Tuesday, 23 June 2020

Disco light effect codes using HTML and CSS

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Neon Grid Loaders</title>
<style>
    body {
  margin: 0;
  background-color: #1D1F20;
}
.container {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  justify-content: space-around;
  -webkit-justify-content: space-around;
  align-items: center;
  -webkit-align-items: center;
  align-content: center;
  -webkit-align-content: center;
}
.grid-big {
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  align-content: center;
  -webkit-align-content: center;
  width: 100%;
  height: 100%;
}
.cell-1 {
  width: 20%;
  height: 20%;
  border-radius: 5px;
  margin: 2px;
  animation: quick-glow 1.25s 0.3s infinite linear;
  -webkit-animation: quick-glow 1.25s 0.3s infinite linear;
}
.cell-1:nth-child(1),.cell-1:nth-child(7),.cell-1:nth-child(12) ,.cell-1:nth-child(18){
  animation: quick-glow 1s 0.15s infinite linear;
  -webkit-animation: quick-glow .4s 0.15s infinite linear;
}
.cell-1:nth-child(2),.cell-1:nth-child(8),.cell-1:nth-child(13),.cell-1:nth-child(19) {
  animation: quick-glow 1.1s 0.15s infinite linear;
  -webkit-animation: quick-glow .6s 0.15s infinite linear;
}.cell-1:nth-child(3),.cell-1:nth-child(9),.cell-1:nth-child(14),.cell-1:nth-child(20) {
  animation: quick-glow 1.2s 0.15s infinite linear;
  -webkit-animation: quick-glow .8s 0.15s infinite linear;
}.cell-1:nth-child(4),.cell-1:nth-child(9),.cell-1:nth-child(15) ,.cell-1:nth-child(21){
  animation: quick-glow .4s 0.15s infinite linear;
  -webkit-animation: quick-glow 1s 0.15s infinite linear;
}
.cell-1:nth-child(5),.cell-1:nth-child(10) ,.cell-1:nth-child(16),.cell-1:nth-child(22){
  animation: quick-glow .6s 0.15s infinite linear;
  -webkit-animation: quick-glow 1.2s 0.15s infinite linear;
}
.cell-1:nth-child(6),.cell-1:nth-child(11) ,.cell-1:nth-child(17),.cell-1:nth-child(23){
  animation: quick-glow .8s 0.15s infinite linear;
  -webkit-animation: quick-glow 1.3s 0.15s infinite linear;
}

@keyframes quick-glow {
  5%{
      background:rgb(255, 47, 47)(255, 47, 47);
    box-shadow: 0 0 10px 2px rgb(255, 47, 47)(255, 47, 47);
  }
  20% {
    z-index: 99;
    background: rgb(250, 137, 32);
    box-shadow: 0 0 10px 2px rgb(250, 137, 32);
  }
  33%{
    background: rgb(250, 185, 32);
    box-shadow: 0 0 10px 2px rgb(250, 185, 32);
  }
  
  45%{
    background: rgb(210, 250, 32);
    box-shadow: 0 0 10px 2px rgb(210, 250, 32);
  }
  57%{
    background: rgb(101, 250, 32);
    box-shadow: 0 0 10px 2px rgb(101, 250, 32);
  }
  70%{
    background: rgb(32, 250, 239);
    box-shadow: 0 0 10px 2px rgb(32, 235, 250);
  }
  
  87%{
    background: rgb(32, 36, 250);
    box-shadow: 0 0 10px 2px rgb(36, 32, 250);
  }
  98%{
    background: rgb(217, 32, 250);
    box-shadow: 0 0 10px 2px rgb(217, 32, 250);
  }
  100%{
    background: white;
    box-shadow: 0 0 10px 2px white;
  }
  
}
@-webkit-keyframes quick-glow {
  5%{
      background:rgb(255, 47, 47)(255, 47, 47);
    box-shadow: 0 0 10px 2px rgb(255, 47, 47)(255, 47, 47);
  }
  20% {
    z-index: 99;
    background: rgb(250, 137, 32);
    box-shadow: 0 0 10px 2px rgb(250, 137, 32);
  }
  33%{
    background: rgb(250, 185, 32);
    box-shadow: 0 0 10px 2px rgb(250, 185, 32);
  }
  
  45%{
    background: rgb(210, 250, 32);
    box-shadow: 0 0 10px 2px rgb(210, 250, 32);
  }
  57%{
    background: rgb(101, 250, 32);
    box-shadow: 0 0 10px 2px rgb(101, 250, 32);
  }
  70%{
    background: rgb(32, 250, 239);
    box-shadow: 0 0 10px 2px rgb(32, 235, 250);
  }
  
  87%{
    background: rgb(32, 36, 250);
    box-shadow: 0 0 10px 2px rgb(36, 32, 250);
  }
  98%{
    background: rgb(217, 32, 250);
    box-shadow: 0 0 10px 2px rgb(217, 32, 250);
  }
  100%{
    background: white;
    box-shadow: 0 0 10px 2px white;
  }
}
</style> 
</head>
<body>
<div class="container">
  <div class="grid-big">
    <div class="cell-1" style="background:red;"> </div>
    <div class="cell-1" style="background:red;"> </div>
    <div class="cell-1" style="background:red;"> </div>
    <div class="cell-1" style="background:red;"> </div>
    <div class="cell-1" style="background:red;"> </div>
    <div class="cell-1" style="background:red;"> </div>
    <div class="cell-1" style="background:red;"> </div>
    <div class="cell-1" style="background:red;"> </div>
    <div class="cell-1" style="background:red;"> </div>
    <div class="cell-1" style="background:red;"> </div>
    <div class="cell-1" style="background:red;"> </div>
    <div class="cell-1" style="background:red;"> </div>
    <div class="cell-1" style="background:red;"> </div>
    <div class="cell-1" style="background:red;"> </div>
    <div class="cell-1" style="background:red;"> </div>
    <div class="cell-1" style="background:red;"> </div>
    <div class="cell-1" style="background:red;"> </div>
    <div class="cell-1" style="background:red;"> </div>
    <div class="cell-1" style="background:red;"> </div>
    <div class="cell-1" style="background:red;"> </div>
    <div class="cell-1" style="background:red;"> </div>
    <div class="cell-1" style="background:red;"> </div>
    <div class="cell-1" style="background:red;"> </div>
    <div class="cell-1" style="background:red;"> </div>
  </div>  
</body>
</html>
Posted by at No comments:

how to make a clock project using HTML/CSS

 <!DOCTYPE html>
<html lang="en-US"> 
<head> 
<title>Clock</title> 
<meta charset=utf-8 /> 
<style>
#container{
height: 100%;
width: 100%; 
}
#clock {stroke-linecap: round;}
#surface{stroke-width: 5px;} 
#hour {stroke-width: 5px;}
#second {stroke-width: 1px;}
#minute{stroke-width: 3px;} 
#numbers {font-family: sans-serif; font-size: 80%;} 
</style>
<script>
function timerTick() {
with (new Date()) {
var h, m, s; h = 30 * ((getHours() % 12) + getMinutes() / 60);
m = 6 * getMinutes();
s = 6 * getSeconds();
document.getElementById('hour').setAttribute('transform', 'rotate(' + h + ', 50, 50)'); 
document.getElementById('minute').setAttribute('transform', 'rotate(' + m + ', 50, 50)');
document.getElementById('second').setAttribute('transform', 'rotate(' + s + ', 50, 50)');
setTimeout(timerTick, 1000); 
}
}
</script> 
</head>
<body onload='timerTick()'> 
<table  id='container'>
<tr> <td align="center">
<svg id='clock' viewBox='0 0 100 100' width='400' height='400'> 
<circle id='surface' cx='50' cy='50' r='47.5' fill="blue" stroke="#000"/>
<!--Its for a clock (sec,min,hour)-->
<g id='pointers'>
    <line id='hour'  x1='50' y1='50' x2='50' y2='27' stroke="#000" /> 
    <line id='minute' x1='50' y1='50' x2='50' y2='17' stroke="#000"/> 
    <line id='second' x1='50' y1='50' x2='50' y2='13' stroke="#000"/> 
</g> 
<!--Its for numbers (3,6,9,12)-->
<g id='numbers'>
    <text x="65" y="22">1</text> 
    <text x="78" y="35">2</text> 
    <text x='85' y='54'>3</text>
    <text x='79' y='73'>4</text>
    <text x="65" y="85">5</text>    
    <text x='47' y='91'>6</text>
    <text x="27" y="85">7</text> 
    <text x='14' y='73'>8</text>
    <text x='9' y='57'>9</text> 
    <text x="12" y="38">10</text>
    <text x="27" y="24">11</text> 
    <text x='43' y='18'>12</text>
</g>
</svg>
</td>
</tr>
</table>
</body> 
</html>
Posted by at No comments:
Subscribe to: Posts (Atom)