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

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

Верх Низ