Сегодняшняя небольшая хитрость заключается в том, чтобы использовать чистый CSS для создания пламени, реалистичного пламени!

Хм, на что это похоже? Если мы выполним поиск на CodePen с помощью ключевого слова CSS flame, то увидим следующий эффект:

или это:

Мы надеемся, что просто используя CSS, эффект может быть более реалистичным? Может ли быть так:

Как этого добиться

Что ж, нам нужно использовать комбинацию filter+ mix-blend-mode, чтобы сделать это.

Многие эффектные CSS-эффекты используются filter+ mix-blend-mode, что очень интересно, но совсем не используется в нашей повседневной работе. Конечно, хорошо бы узнать об этом побольше.

Как показано на картинке выше, скелет всей свечи, кроме части пламени, очень прост, поэтому мы не будем об этом. Давайте в основном посмотрим, как генерируется пламя и как его анимировать.

Шаг 1: фильтр размытия и фильтр контрастности

Фильтр «Размытие» перекрывает фильтр «Контраст» для эффекта слияния.

Выньте два фильтра отдельно, и их функции:

  1. filter: blur(): устанавливает для изображения эффект размытия по Гауссу.
  2. filter: contrast(): настройка контрастности изображения.

Однако, когда они «подходят», происходит чудесное явление слияния.

Начнем с простого примера:

Посмотрите внимательно на процесс пересечения двух кругов. Когда край соприкасается с краем, возникает эффект слияния границ. Размытый край размытия по Гауссу устраняется с помощью контрастного фильтра, а размытие по Гауссу используется для достижения эффекта слияния.

Используя приведенный выше filter blur & filter contrast, нам нужно сначала создать треугольник, похожий на пламя. (Пропустить процесс)

Конкретный процесс реализации треугольника в форме пламени здесь подробно объясняется в этой статье: Навыки CSS-фильтрации и детали, о которых вы не знаете

Когда родительский элемент будет добавлен filter: blur(5px) contrast(20), он станет таким:

Шаг 2: Анимация огненных частиц

Немного похоже, дальше идет анимация пламени, сначала убираем родительский элемент filter: blur(5px) contrast(20), а потом продолжаем.

Здесь также используется filterэффект слияния. В показанном выше пламени мы используем SASS для случайного и равномерного распределения большого количества круглых коричневых элементов div разных размеров, спрятанных внутри треугольника пламени, который, вероятно, выглядит следующим образом:

Далее с помощью SASS придаем каждому маленькому кругу посередине анимацию, постепенно исчезающую снизу вверх, и равномерно назначаем разные animation-delay, это будет выглядеть так:

ОК, самый важный шаг — filter: blur(5px) contrast(20) открыть , и появится эффект магического пламени:

Шаг 3: полировка в режиме смешивания

Конечно, вышеописанный эффект уже очень хорош. После различных попыток и настройки параметров я, наконец, обнаружил, что добавление режима смешивания mix-blend-mode: screenэффект лучше, и окончательный эффект на изображении заголовка выглядит следующим образом:

Весь исходный код находится на моем CodePen: CodePen Demo — CSS Fire

некоторые другие эффекты

Конечно, после освоения этого метода, эту технику генерации пламени можно перенести и на другие эффекты. На картинке ниже — еще одно небольшое демо, с которым я повозился. При наведении курсора на элемент создается эффект пламени:

Демонстрация CodePen — Hover Fire

Ну, на самом деле это некоторая комбинация фильтров и режимов наложения. Конечно, конечно, это то, что делает CSS таким захватывающим.

Возвращаясь к теме, разобравшись с этой липкой и влажной техникой, вы также сможете использовать множество других интересных эффектов. Конечно, вам, возможно, придется попробовать больше, например эффект капания, достигнутый с помощью одного тега DIV ниже:

CodePen Demo — одна этикетка для достижения эффекта стекания

Примечательные детали

Хотя анимация красивая, есть еще некоторые моменты, на которые следует обратить внимание в процессе конкретного использования:

  1. Для одного и того же элемента одновременно можно определить несколько фильтров CSS, например filter: blur(5px) contrast(150%) brightness(1.5), но эффект от разных фильтров будет разным;

Иными словами, при использовании filter: blur(5px) contrast(150%) brightness(1.5) и filter: brightness(1.5) contrast(150%) blur(5px) для обработки одного и того же изображения получаемый эффект отличается, поскольку алгоритм обработки значения цвета фильтра обрабатывает изображение последовательно.

  1. Анимация фильтра требует много вычислений и постоянно перерисовывает страницу. Это очень требовательная к производительности анимация. Обратите внимание на сцену использования при его использовании. Не забудьте включить аппаратное ускорение и разумно использовать технологию слоев;
  2. blur()Смешивание contrast()фильтров, установка разных цветов будет давать разные эффекты, конкретный алгоритм этого наложения цветов не нашел очень конкретных правил и положений, лучший способ его использования - попробовать разные цвета и понаблюдать, чтобы получить лучший эффект;
  3. Внимательные читатели обнаружат, что все вышеперечисленные эффекты основаны на черном фоне. Если вы попытаетесь изменить фон на белый, эффект сильно уменьшится.

Окончательно

Эта статья лишь кратко представляет весь процесс мышления, и многие детали кода CSS и процесс отладки не показаны. Основные свойства CSS в основном используются по умолчанию. После прочтения вы можете узнать больше и добавить больше деталей:

  • filter
  • mix-blend-mode

Еще больше замечательных технических статей по CSS собрано в моем Github — iCSS.