Создаем огонь на чистом CSS

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

Нет прав для скачивания
Создаем огонь на чистом 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);
    }
}
И получаем наш результат:
005424.gif
Автор
baltun
Скачиваний
0
Просмотры
930
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

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

  • [Ap Yazılım] External Link Redirector
    [Ap Yazılım] External Link Redirector
    Плагин позволяет создать страницу с предупреждениями, прежде чем перенаправлять пользователей.
  • [XenCustomize] React to Own Content
    [XenCustomize] React to Own Content
    Позволяет пользователям реагировать на свои собственные сообщения на форуме.
  • [MMO] Live Notifications
    Добавляет живые уведомления с помощью websockets
  • [Xen-Soluce] DM Auto Reply
    [Xen-Soluce] DM Auto Reply
    Модуль позволяет добавить автоответчик для личных сообщений.
  • Retain Search Keywords
    Retain Search Keywords
    Модуль позволяет сохранять ключевые слова поиска при переключении между формами расширенного поиска.
Похожие ресурсы
Назад
Верх Низ