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