Разработка - Создаем огонь на чистом CSS | Все для вебмастера

Создаем разметку на HTML:

HTML:

<div class="fire">
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
</div>

Далее добавляем стиль:

SCSS:

$fireColor: rgb(255,80,0);
$fireColorT: rgba(255,80,0,0);
$dur: 1s;
$blur: 0.03em;
$fireRad: 3em;
$parts: 50;
$partSize: 5em;

*, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    background-color: rgb(48,8,8);
}
.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);
    }
}

И получаем наш результат:

Разработка Создаем огонь на чистом CSS

Ещё ресурсы от baltun