SCSS
$size: 100%;
$count: 40;
body {
background: #222;
}
.box {
width: $size;
height: $size;
background: #000;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
span {
background-color: #3498db;
display: block;
position: absolute;
bottom: 0;
border: 1px solid #000;
box-sizing: border-box;
border-radius: ($size / $count) ($size / $count) 0 0;
@for $i from 1 through $count {
&:nth-of-type(#{$i}) {
width: $size / $count;
height: 0%;
left: (($size / $count) * $i) - ($size / $count);
animation: wow 5s $i*.1+s infinite ease-in-out;
}
}
}
}
@keyframes wow {
0% {
height: 0%;
-webkit-filter: hue-rotate(0deg);
}
50% {
height: 50%;
-webkit-filter: hue-rotate(180deg);
}
100% {
height: 0%;
-webkit-filter: hue-rotate(360deg);
}
}
1 Response