- var parts = 50;
.fire
- while (parts--) {
.particle
- }
$fireColor: rgb(255,80,0);
$fireColorT: rgba(255,80,0,0);
$dur: 1s;
$blur: 0.02em;
$fireRad: 3em;
$parts: 50;
$partSize: 5em;
body {
background-color: rgb(48,8,8);
margin: 0;
}
.fire {
font-size: 24px;
filter: blur($blur);
-webkit-filter: blur($blur);
margin: 3em auto 0 auto;
position: relative;
width: 10em;
height: 12em;
}
.particle {
animation: rise $dur ease-in infinite;
background-image: radial-gradient($fireColor 20%,$fireColorT 70%);
border-radius: 50%;
mix-blend-mode: screen;
opacity: 0;
position: absolute;
bottom: 0;
width: $partSize;
height: $partSize;
// spread particles out in time and x-position to get desired effect
@for $p from 1 through $parts {
&:nth-of-type(#{$p}) {
animation-delay: $dur * random();
left: calc((100% - #{$partSize}) * #{($p - 1)/$parts});
}
}
}
@keyframes rise {
from {
opacity: 0;
transform: translateY(0) scale(1);
}
25% {
opacity: 1;
}
to {
opacity: 0;
transform: translateY(-10em) scale(0);
}
}