• Для скачивания ресурсов Форума пользователь должен написать не менее 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
Просмотры
743
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

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

  • Country flag
    Country flag
    Показывает флаг страны в информационном блоке сообщения пользователя.
  • [DigitalPoint] Better Google Analytics
    [DigitalPoint] Better Google Analytics
    Расширяет Google Analytics, чтобы «отслеживать все».
  • [XenGenTr] Core Library
    [XenGenTr] Core Library
    Плагин, который работает в интеграции со всеми плагинами, темами или продуктами XenGenTr.
  • Calendar
    Calendar
    Календарь для форума.
  • Similar threads
    Similar threads
    Отображение похожих тем при создании новой.
Похожие ресурсы
Назад
Верх Низ