SCSS
$red: #e74c3c;
$green: #2ecc71;
$blue: #3498db;
$yellow: #f1c40f;
body {
background: #07121d;
width: 450px;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
position: absolute;
left: 50%;
top: 50%;
}
div {
width: 60px;
height: 60px;
display: inline-block;
margin: 0 5px 0 5px;
background: $blue;
box-shadow: 0px 0px 20px $blue;
animation: glow 6s infinite;
-webkit-animation: glow 6s infinite;
}
div:nth-child(1) {
animation-delay: -0.5s;
-webkit-animation-delay: -0.5s;
}
div:nth-child(2) {
animation-delay: -1s;
-webkit-animation-delay: -1s;
}
div:nth-child(3) {
animation-delay: -1.5s;
-webkit-animation-delay: -1.5s;
}
div:nth-child(4) {
animation-delay: -2s;
-webkit-animation-delay: -2s;
}
div:nth-child(5) {
animation-delay: -2.5s;
-webkit-animation-delay: -2.5s;
}
div:nth-child(6) {
animation-delay: -3s;
-webkit-animation-delay: -3s;
}
@-webkit-keyframes glow {
0% {
background: $blue;
box-shadow: 0px 0px 20px $blue;
}
25% {
background: $green;
box-shadow: 0px 0px 105px $green;
}
50% {
background: $red;
box-shadow: 0px 0px 20px $red;
}
75% {
background: $yellow;
box-shadow: 0px 0px 20px $yellow;
}
}
@keyframes glow {
0% {
background: $blue;
box-shadow: 0px 0px 20px $blue;
}
25% {
background: $green;
box-shadow: 0px 0px 105px $green;
}
50% {
background: $red;
box-shadow: 0px 0px 20px $red;
}
75% {
background: $yellow;
box-shadow: 0px 0px 20px $yellow;
}
}
