SCSS
@import "compass/css3";
$particles: 10;
$particleSize: 22vw;
$lapDuration: 3s;
$shadowColor: #ffffff;
html, body {
overflow: hidden;
background: black;
}
.hole {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
}
i {
display: block;
position: absolute;
width: $particleSize;
height: $particleSize;
left: -$particleSize/2;
top: -$particleSize/2;
border-radius: $particleSize;
opacity: 0;
animation-name: scale;
animation-duration: $lapDuration;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@for $i from 1 through $particles {
i:nth-child(#{$i}) {
animation-delay: $i * ($lapDuration / $particles);
}
}
@keyframes scale {
0% {
transform: scale(2);
opacity: 0;
box-shadow: 0px 0px 50px rgba($shadowColor, 0.5);
}
50% {
transform: scale(1) translate(0px, -5px);
opacity: 1;
box-shadow: 0px 8px 20px rgba($shadowColor, 0.5);
}
100% {
transform: scale(0.1) translate(0px, 5px);
opacity: 0;
box-shadow: 0px 10px 20px rgba($shadowColor, 0);
}
}
