SCSS
$size: 100px;
$count: 50;
$time: 8s;
$delay: 0.2s;
@mixin animation($name) {
@keyframes #{$name} {
@content;
}
}
@include animation(tunnel) {
100% { transform: rotate(30deg) scale(20); }
}
body {
overflow: hidden;
background: #000;
.static {
position: absolute;
top: 50%;
left: 50%;
width: $size;
height: $size;
margin-left: -$size/2;
margin-top: -$size/2;
border: 2px solid aqua;
}
.el {
@extend .static;
@for $i from 1 through $count{
&:nth-child(#{$i}){
border-color: hsl($i*70deg, 85%, 50%);
animation: tunnel $time infinite;
animation-timing-function: linear;
animation-delay: $i*$delay;
}
}
}
}
1 Response