• Для скачивания ресурсов Форума пользователь должен написать не менее 5 полезных сообщений и получить 5 симпатий.
    Если Вы не хотите выполнять условия, Вы должны купить переход в группу "Работяга" или любое наше дополнение и сможете скачивать ресурсы, перевод происходит по email, который указывается при оплате.
Создаем огонь на чистом 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
Просмотры
318
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

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

  • [Xen-Soluce] Credit System
    [Xen-Soluce] Credit System
    Расширенная система для подсчета пользовательских тем, сообщений, ответов и реакций.
  • [tl] Social Groups
    [tl] Social Groups
    Полная система социальных групп для форума.
  • [BS] Scheduled posting
    [BS] Scheduled posting
    Планирование публикации сообщений.
  • [Andrew] Moderator Panel
    [Andrew] Moderator Panel
    Расширяет существующие параметры модератора.
  • Ultimate Custom Slider
    Ultimate Custom Slider
    Пользовательский слайдер на форум.
Верх Низ