SCSS
html {
background: #333;
overflow: hidden;
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#c {
display: flex;
}
.s {
width: 40px;
height: 40px;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
.s:nth-child(n+2) {
margin-left: 80px;
}
.s:nth-child(1) {
background: #33ffbb;
-webkit-animation: r0 2s 0s ease-out infinite;
-moz-animation: r0 2s 0s ease-out infinite;
animation: r0 2s 0s ease-out infinite;
}
.s:nth-child(1):hover {
background: #ff3333;
-webkit-animation: r20 0.5s 0.4s ease-out infinite;
-moz-animation: r20 0.5s 0.4s ease-out infinite;
animation: r20 0.5s 0.4s ease-out infinite;
}
@-webkit-keyframes r0 {
0% {
box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 179, 0);
}
10% {
box-shadow: 0 0 8px 6px #1affb3, 0 0 12px 10px #333, 0 0 12px 14px #1affb3;
}
100% {
box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 255, 179, 0);
}
}
@-moz-keyframes r0 {
0% {
box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 179, 0);
}
10% {
box-shadow: 0 0 8px 6px #1affb3, 0 0 12px 10px #333, 0 0 12px 14px #1affb3;
}
100% {
box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 255, 179, 0);
}
}
@keyframes r0 {
0% {
box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 179, 0);
}
10% {
box-shadow: 0 0 8px 6px #1affb3, 0 0 12px 10px #333, 0 0 12px 14px #1affb3;
}
100% {
box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 255, 179, 0);
}
}
@-webkit-keyframes r20 {
from {
box-shadow: 0 0 8px 6px #ff1a1a, 0 0 12px 10px #333, 0 0 12px 14px #ff1a1a;
}
to {
box-shadow: 0 0 8px 6px rgba(255, 26, 26, 0), 0 0 4px 40px #333, 0 0 4px 41px rgba(255, 26, 26, 0);
}
}
@-moz-keyframes r20 {
from {
box-shadow: 0 0 8px 6px #ff1a1a,
0 0 12px 10px #333,
0 0 12px 14px #ff1a1a;
}
to {
box-shadow: 0 0 8px 6px rgba(255, 26, 26, 0),
0 0 4px 40px #333,
0 0 4px 41px rgba(255, 26, 26, 0);
}
}
@keyframes r20 {
from {
box-shadow: 0 0 8px 6px #ff1a1a,
0 0 12px 10px #333,
0 0 12px 14px #ff1a1a;
}
to {
box-shadow: 0 0 8px 6px rgba(255, 26, 26, 0),
0 0 4px 40px #333,
0 0 4px 41px rgba(255, 26, 26, 0);
}
}
.s:nth-child(2) {
background: #33ffdd;
-webkit-animation: r1 2s 0.25s ease-out infinite;
-moz-animation: r1 2s 0.25s ease-out infinite;
animation: r1 2s 0.25s ease-out infinite;
}
.s:nth-child(2):hover {
background: #ff4733;
-webkit-animation: r21 0.5s 0.4s ease-out infinite;
-moz-animation: r21 0.5s 0.4s ease-out infinite;
animation: r21 0.5s 0.4s ease-out infinite;
}
@-webkit-keyframes r1 {
0% {
box-shadow: 0 0 8px 6px rgba(26, 255, 217, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 217, 0);
}
10% {
box-shadow: 0 0 8px 6px #1affd9, 0 0 12px 10px #333, 0 0 12px 14px #1affd9;
}
100% {
box-shadow: 0 0 8px 6px rgba(26, 255, 217, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 255, 217, 0);
}
}
@-moz-keyframes r1 {
0% {
box-shadow: 0 0 8px 6px rgba(26, 255, 217, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 217, 0);
}
10% {
box-shadow: 0 0 8px 6px #1affd9, 0 0 12px 10px #333, 0 0 12px 14px #1affd9;
}
100% {
box-shadow: 0 0 8px 6px rgba(26, 255, 217, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 255, 217, 0);
}
}
@keyframes r1 {
0% {
box-shadow: 0 0 8px 6px rgba(26, 255, 217, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 217, 0);
}
10% {
box-shadow: 0 0 8px 6px #1affd9, 0 0 12px 10px #333, 0 0 12px 14px #1affd9;
}
100% {
box-shadow: 0 0 8px 6px rgba(26, 255, 217, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 255, 217, 0);
}
}
@-webkit-keyframes r21 {
from {
box-shadow: 0 0 8px 6px #ff301a, 0 0 12px 10px #333, 0 0 12px 14px #ff301a;
}
to {
box-shadow: 0 0 8px 6px rgba(255, 48, 26, 0), 0 0 4px 40px #333, 0 0 4px 41px rgba(255, 48, 26, 0);
}
}
@-moz-keyframes r21 {
from {
box-shadow: 0 0 8px 6px #ff301a, 0 0 12px 10px #333, 0 0 12px 14px #ff301a;
}
to {
box-shadow: 0 0 8px 6px rgba(255, 48, 26, 0), 0 0 4px 40px #333, 0 0 4px 41px rgba(255, 48, 26, 0);
}
}
@keyframes r21 {
from {
box-shadow: 0 0 8px 6px #ff301a, 0 0 12px 10px #333, 0 0 12px 14px #ff301a;
}
to {
box-shadow: 0 0 8px 6px rgba(255, 48, 26, 0), 0 0 4px 40px #333, 0 0 4px 41px rgba(255, 48, 26, 0);
}
}
.s:nth-child(3) {
background: #33ffff;
-webkit-animation: r2 2s 0.5s ease-out infinite;
-moz-animation: r2 2s 0.5s ease-out infinite;
animation: r2 2s 0.5s ease-out infinite;
}
.s:nth-child(3):hover {
background: #ff5c33;
-webkit-animation: r22 0.5s 0.4s ease-out infinite;
-moz-animation: r22 0.5s 0.4s ease-out infinite;
animation: r22 0.5s 0.4s ease-out infinite;
}
@-webkit-keyframes r2 {
0% {
box-shadow: 0 0 8px 6px rgba(26, 255, 255, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 255, 0);
}
10% {
box-shadow: 0 0 8px 6px #1affff, 0 0 12px 10px #333, 0 0 12px 14px #1affff;
}
100% {
box-shadow: 0 0 8px 6px rgba(26, 255, 255, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 255, 255, 0);
}
}
@-moz-keyframes r2 {
0% {
box-shadow: 0 0 8px 6px rgba(26, 255, 255, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 255, 0);
}
10% {
box-shadow: 0 0 8px 6px #1affff, 0 0 12px 10px #333, 0 0 12px 14px #1affff;
}
100% {
box-shadow: 0 0 8px 6px rgba(26, 255, 255, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 255, 255, 0);
}
}
@keyframes r2 {
0% {
box-shadow: 0 0 8px 6px rgba(26, 255, 255, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 255, 0);
}
10% {
box-shadow: 0 0 8px 6px #1affff, 0 0 12px 10px #333, 0 0 12px 14px #1affff;
}
100% {
box-shadow: 0 0 8px 6px rgba(26, 255, 255, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 255, 255, 0);
}
}
@-webkit-keyframes r22 {
from {
box-shadow: 0 0 8px 6px #ff471a, 0 0 12px 10px #333, 0 0 12px 14px #ff471a;
}
to {
box-shadow: 0 0 8px 6px rgba(255, 71, 26, 0), 0 0 4px 40px #333, 0 0 4px 41px rgba(255, 71, 26, 0);
}
}
@-moz-keyframes r22 {
from {
box-shadow: 0 0 8px 6px #ff471a, 0 0 12px 10px #333, 0 0 12px 14px #ff471a;
}
to {
box-shadow: 0 0 8px 6px rgba(255, 71, 26, 0), 0 0 4px 40px #333, 0 0 4px 41px rgba(255, 71, 26, 0);
}
}
@keyframes r22 {
from {
box-shadow: 0 0 8px 6px #ff471a, 0 0 12px 10px #333, 0 0 12px 14px #ff471a;
}
to {
box-shadow: 0 0 8px 6px rgba(255, 71, 26, 0), 0 0 4px 40px #333, 0 0 4px 41px rgba(255, 71, 26, 0);
}
}
.s:nth-child(4) {
background: #33ddff;
-webkit-animation: r3 2s 0.75s ease-out infinite;
-moz-animation: r3 2s 0.75s ease-out infinite;
animation: r3 2s 0.75s ease-out infinite;
}
.s:nth-child(4):hover {
background: #ff7033;
-webkit-animation: r23 0.5s 0.4s ease-out infinite;
-moz-animation: r23 0.5s 0.4s ease-out infinite;
animation: r23 0.5s 0.4s ease-out infinite;
}
@-webkit-keyframes r3 {
0% {
box-shadow: 0 0 8px 6px rgba(26, 217, 255, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 217, 255, 0);
}
10% {
box-shadow: 0 0 8px 6px #1ad9ff, 0 0 12px 10px #333, 0 0 12px 14px #1ad9ff;
}
100% {
box-shadow: 0 0 8px 6px rgba(26, 217, 255, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 217, 255, 0);
}
}
@-moz-keyframes r3 {
0% {
box-shadow: 0 0 8px 6px rgba(26, 217, 255, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 217, 255, 0);
}
10% {
box-shadow: 0 0 8px 6px #1ad9ff, 0 0 12px 10px #333, 0 0 12px 14px #1ad9ff;
}
100% {
box-shadow: 0 0 8px 6px rgba(26, 217, 255, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 217, 255, 0);
}
}
@keyframes r3 {
0% {
box-shadow: 0 0 8px 6px rgba(26, 217, 255, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 217, 255, 0);
}
10% {
box-shadow: 0 0 8px 6px #1ad9ff, 0 0 12px 10px #333, 0 0 12px 14px #1ad9ff;
}
100% {
box-shadow: 0 0 8px 6px rgba(26, 217, 255, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 217, 255, 0);
}
}
@-webkit-keyframes r23 {
from {
box-shadow: 0 0 8px 6px #ff5e1a, 0 0 12px 10px #333, 0 0 12px 14px #ff5e1a;
}
to {
box-shadow: 0 0 8px 6px rgba(255, 94, 26, 0), 0 0 4px 40px #333, 0 0 4px 41px rgba(255, 94, 26, 0);
}
}
@-moz-keyframes r23 {
from {
box-shadow: 0 0 8px 6px #ff5e1a, 0 0 12px 10px #333, 0 0 12px 14px #ff5e1a;
}
to {
box-shadow: 0 0 8px 6px rgba(255, 94, 26, 0), 0 0 4px 40px #333, 0 0 4px 41px rgba(255, 94, 26, 0);
}
}
@keyframes r23 {
from {
box-shadow: 0 0 8px 6px #ff5e1a, 0 0 12px 10px #333, 0 0 12px 14px #ff5e1a;
}
to {
box-shadow: 0 0 8px 6px rgba(255, 94, 26, 0), 0 0 4px 40px #333, 0 0 4px 41px rgba(255, 94, 26, 0);
}
}
.s:nth-child(5) {
background: #33bbff;
-webkit-animation: r4 2s 1s ease-out infinite;
-moz-animation: r4 2s 1s ease-out infinite;
animation: r4 2s 1s ease-out infinite;
}
.s:nth-child(5):hover {
background: #ff8533;
-webkit-animation: r24 0.5s 0.4s ease-out infinite;
-moz-animation: r24 0.5s 0.4s ease-out infinite;
animation: r24 0.5s 0.4s ease-out infinite;
}
@-webkit-keyframes r4 {
0% {
box-shadow: 0 0 8px 6px rgba(26, 179, 255, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 179, 255, 0);
}
10% {
box-shadow: 0 0 8px 6px #1ab3ff, 0 0 12px 10px #333, 0 0 12px 14px #1ab3ff;
}
100% {
box-shadow: 0 0 8px 6px rgba(26, 179, 255, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 179, 255, 0);
}
}
@-moz-keyframes r4 {
0% {
box-shadow: 0 0 8px 6px rgba(26, 179, 255, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 179, 255, 0);
}
10% {
box-shadow: 0 0 8px 6px #1ab3ff, 0 0 12px 10px #333, 0 0 12px 14px #1ab3ff;
}
100% {
box-shadow: 0 0 8px 6px rgba(26, 179, 255, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 179, 255, 0);
}
}
@keyframes r4 {
0% {
box-shadow: 0 0 8px 6px rgba(26, 179, 255, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 179, 255, 0);
}
10% {
box-shadow: 0 0 8px 6px #1ab3ff, 0 0 12px 10px #333, 0 0 12px 14px #1ab3ff;
}
100% {
box-shadow: 0 0 8px 6px rgba(26, 179, 255, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 179, 255, 0);
}
}
@-webkit-keyframes r24 {
from {
box-shadow: 0 0 8px 6px #ff751a, 0 0 12px 10px #333, 0 0 12px 14px #ff751a;
}
to {
box-shadow: 0 0 8px 6px rgba(255, 117, 26, 0), 0 0 4px 40px #333, 0 0 4px 41px rgba(255, 117, 26, 0);
}
}
@-moz-keyframes r24 {
from {
box-shadow: 0 0 8px 6px #ff751a, 0 0 12px 10px #333, 0 0 12px 14px #ff751a;
}
to {
box-shadow: 0 0 8px 6px rgba(255, 117, 26, 0), 0 0 4px 40px #333, 0 0 4px 41px rgba(255, 117, 26, 0);
}
}
@keyframes r24 {
from {
box-shadow: 0 0 8px 6px #ff751a, 0 0 12px 10px #333, 0 0 12px 14px #ff751a;
}
to {
box-shadow: 0 0 8px 6px rgba(255, 117, 26, 0), 0 0 4px 40px #333, 0 0 4px 41px rgba(255, 117, 26, 0);
}
}
.s:nth-child(6) {
background: #3399ff;
-webkit-animation: r5 2s 1.25s ease-out infinite;
-moz-animation: r5 2s 1.25s ease-out infinite;
animation: r5 2s 1.25s ease-out infinite;
}
.s:nth-child(6):hover {
background: #ff9933;
-webkit-animation: r25 0.5s 0.4s ease-out infinite;
-moz-animation: r25 0.5s 0.4s ease-out infinite;
animation: r25 0.5s 0.4s ease-out infinite;
}
@-webkit-keyframes r5 {
0% {
box-shadow: 0 0 8px 6px rgba(26, 140, 255, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 140, 255, 0);
}
10% {
box-shadow: 0 0 8px 6px #1a8cff, 0 0 12px 10px #333, 0 0 12px 14px #1a8cff;
}
100% {
box-shadow: 0 0 8px 6px rgba(26, 140, 255, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 140, 255, 0);
}
}
@-moz-keyframes r5 {
0% {
box-shadow: 0 0 8px 6px rgba(26, 140, 255, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 140, 255, 0);
}
10% {
box-shadow: 0 0 8px 6px #1a8cff, 0 0 12px 10px #333, 0 0 12px 14px #1a8cff;
}
100% {
box-shadow: 0 0 8px 6px rgba(26, 140, 255, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 140, 255, 0);
}
}
@keyframes r5 {
0% {
box-shadow: 0 0 8px 6px rgba(26, 140, 255, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 140, 255, 0);
}
10% {
box-shadow: 0 0 8px 6px #1a8cff, 0 0 12px 10px #333, 0 0 12px 14px #1a8cff;
}
100% {
box-shadow: 0 0 8px 6px rgba(26, 140, 255, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 140, 255, 0);
}
}
@-webkit-keyframes r25 {
from {
box-shadow: 0 0 8px 6px #ff8c1a, 0 0 12px 10px #333, 0 0 12px 14px #ff8c1a;
}
to {
box-shadow: 0 0 8px 6px rgba(255, 140, 26, 0), 0 0 4px 40px #333, 0 0 4px 41px rgba(255, 140, 26, 0);
}
}
@-moz-keyframes r25 {
from {
box-shadow: 0 0 8px 6px #ff8c1a, 0 0 12px 10px #333, 0 0 12px 14px #ff8c1a;
}
to {
box-shadow: 0 0 8px 6px rgba(255, 140, 26, 0), 0 0 4px 40px #333, 0 0 4px 41px rgba(255, 140, 26, 0);
}
}
@keyframes r25 {
from {
box-shadow: 0 0 8px 6px #ff8c1a, 0 0 12px 10px #333, 0 0 12px 14px #ff8c1a;
}
to {
box-shadow: 0 0 8px 6px rgba(255, 140, 26, 0), 0 0 4px 40px #333, 0 0 4px 41px rgba(255, 140, 26, 0);
}
}
