60 lines
1.2 KiB
SCSS
60 lines
1.2 KiB
SCSS
|
|
.anim-container {
|
|
position: absolute;
|
|
width: 100%;
|
|
min-height: 100%;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.blast-cast {
|
|
position: absolute;
|
|
background: black;
|
|
opacity: .7;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
@for $i from 1 through 100 {
|
|
@keyframes blast-cast-#{$i} {
|
|
100% {
|
|
transform: translate3d(-3em +random(200)/200, 0, 0);
|
|
}
|
|
}
|
|
}
|
|
|
|
@for $i from 1 through 100 {
|
|
.blast-cast:nth-child(#{$i}){
|
|
$size: random(30)+px;
|
|
height: $size;
|
|
width: $size;
|
|
transform: translate3d( (random(200) * 1px), (random(200) * 1px), (random(200) * 1px));
|
|
background: #15f4ee;
|
|
animation: blast-cast-#{$i} 0.7s;
|
|
}
|
|
}
|
|
|
|
.blast-hit {
|
|
position: absolute;
|
|
background: black;
|
|
opacity: .7;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
@for $i from 1 through 100 {
|
|
@keyframes blast-hit-#{$i} {
|
|
100% {
|
|
transform: translate3d((random(200) * 1px), (random(200) * 1px), (random(200) * 1px));
|
|
}
|
|
}
|
|
}
|
|
|
|
@for $i from 1 through 100 {
|
|
.blast-hit:nth-child(#{$i}){
|
|
$size: random(30)+px;
|
|
height: $size;
|
|
width: $size;
|
|
transform: translate3d(-3em +random(200)/200, 0, 0);
|
|
animation: blast-hit-#{$i} 0.7s infinite;
|
|
background: #15f4ee;
|
|
}
|
|
}
|