<!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>
No comments:
Post a Comment