Сегодняшняя небольшая хитрость заключается в том, чтобы использовать чистый CSS для создания пламени, реалистичного пламени!
Хм, на что это похоже? Если мы выполним поиск на CodePen с помощью ключевого слова CSS flame, то увидим следующий эффект:
или это:
Мы надеемся, что просто используя CSS, эффект может быть более реалистичным? Может ли быть так:
Как этого добиться
Что ж, нам нужно использовать комбинацию filter
+ mix-blend-mode
, чтобы сделать это.
Многие эффектные CSS-эффекты используются
filter
+mix-blend-mode
, что очень интересно, но совсем не используется в нашей повседневной работе. Конечно, хорошо бы узнать об этом побольше.
Как показано на картинке выше, скелет всей свечи, кроме части пламени, очень прост, поэтому мы не будем об этом. Давайте в основном посмотрим, как генерируется пламя и как его анимировать.
Шаг 1: фильтр размытия и фильтр контрастности
Фильтр «Размытие» перекрывает фильтр «Контраст» для эффекта слияния.
Выньте два фильтра отдельно, и их функции:
filter: blur()
: устанавливает для изображения эффект размытия по Гауссу.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 — одна этикетка для достижения эффекта стекания
Примечательные детали
Хотя анимация красивая, есть еще некоторые моменты, на которые следует обратить внимание в процессе конкретного использования:
- Для одного и того же элемента одновременно можно определить несколько фильтров 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)
для обработки одного и того же изображения получаемый эффект отличается, поскольку алгоритм обработки значения цвета фильтра обрабатывает изображение последовательно.
- Анимация фильтра требует много вычислений и постоянно перерисовывает страницу. Это очень требовательная к производительности анимация. Обратите внимание на сцену использования при его использовании. Не забудьте включить аппаратное ускорение и разумно использовать технологию слоев;
blur()
Смешиваниеcontrast()
фильтров, установка разных цветов будет давать разные эффекты, конкретный алгоритм этого наложения цветов не нашел очень конкретных правил и положений, лучший способ его использования - попробовать разные цвета и понаблюдать, чтобы получить лучший эффект;- Внимательные читатели обнаружат, что все вышеперечисленные эффекты основаны на черном фоне. Если вы попытаетесь изменить фон на белый, эффект сильно уменьшится.
Окончательно
Эта статья лишь кратко представляет весь процесс мышления, и многие детали кода CSS и процесс отладки не показаны. Основные свойства CSS в основном используются по умолчанию. После прочтения вы можете узнать больше и добавить больше деталей:
filter
mix-blend-mode
Еще больше замечательных технических статей по CSS собрано в моем Github — iCSS.