Удивительно! ! Может ли CSS также добиться эффекта дыма?

внешний интерфейс SVG CSS
Удивительно! ! Может ли CSS также добиться эффекта дыма?

В последнее время CSS используется для достижения некоторых эффектов, которые кажутся выходящими за рамки возможностей CSS:

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

Присмотревшись к эффекту дыма, можно выделить еще две важные особенности:

  • эффект размытия
  • зернистый

Сначала посмотрите на эффект размытия, подумайте о размытии, большинство студентов сначала подумают об использованииfilter: blur().

Конечно, да, но в CSS, кроме фильтров, мы также можем использовать класс других средств для имитацииразмытоЭффект.

Чистый CSS для анимации дыма

Давайте сначала посмотрим на этот эффект:

Предположим, у нас есть такой персонаж:

<span>C</span>

мы просто проходимtext-shadow + opacityИзменение может имитировать эффект дыма:

span {
  text-shadow: 0 0 0 whitesmoke;
  animation: smoky 5s;
}

@keyframes smoky {
  to {
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}

Взгляните на эффект:

На основе вышеизложенного мы можем добавить смещение, вращение, масштабирование, немного изменить вышеприведенный код, добавить немногоtransformПреобразование:

span {
  text-shadow: 0 0 0 whitesmoke;
  animation: smoky 5s;
}

@keyframes smoky {
  to {
    transform:
      translate3d(200px, -80px, 0)
      rotate(-40deg)
      skewX(70deg)
      scale(1.5);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}

Вы можете получить следующие эффекты:

наложенныйtransformПосле этого казалось, что слово унесло ветром и превратило в дым. Исходя из этого, нам нужно всего лишь соединить несколько слов, используяanimation-delayПоследовательно управляйте каждым словом, чтобы вызвать эффект анимации, и тогда можно будет получить полный эффект дыма, описанный выше.

Псевдокод выглядит следующим образом:

<div>
    <span>C</span>
    <span>S</span>
    <span>S</span>
    // ...
</div>

// ... 上述所有 CSS 代码

@for $item from 1 through 21 {
  span:nth-of-type(#{$item}){ 
    animation-delay: #{(($item/10))}s; 
  }
}

Можно получить такое слово, которое сдуло ветром и превратилось в дым:

Вышеупомянутый эффект не является моим оригиналом, впервые увиденным у этого автора.CodePen Demo -- Smoky Text By Bennett Feely

Эффект дыма с фильтром SVG feturbulence

Дым в приведенной выше анимации дыма все еще относительно грубый. Главным образом отсутствие небольшой зернистости? Некоторые дымчатые текстуры отсутствуют.

Чтобы добиться более изысканного эффекта дыма, мы должны использовать SVG.<feturbulence>Фильтр, если вы мало знаете об этом фильтре, вы можете ознакомиться с этими моими статьями:

буду использовать следующийfilter: blur()Сотрудничать<feturbulence>фильтр, чтобы получить более реалистичный эффект дыма.

В качестве простого примера предположим, что есть следующие слова:

<div">SMOKE</div>

Простой CSS:

div {
    background: linear-gradient(#fff, #999, #ddd, #888);
    background-clip: text;
}

Получите несколько слов с градиентным цветом, например:

мы используем<feturbulence>Работа с фильтром проста:

<div>SMOKE</div>

<svg width="0">
  <filter id="filter">
    <feTurbulence id="turbulence" type="fractalNoise" baseFrequency=".03" numOctaves="20" />
    <feDisplacementMap in="SourceGraphic" scale="30" />
  </filter>
</svg>

Использование CSSfilter: url()Внедрить этот фильтр, здесь для лучшего эффекта я прямо в<body>Этот фильтр был представлен на:

body {
    filter: url('#filter');
}
div {
    background: linear-gradient(#fff, #999, #ddd, #888);
    background-clip: text;
}

Наш шрифт<feturbulence>Фильтры дают ощущение жидкости:

Можно сказать, что этот эффект не имеет ничего общего с эффектом дыма, но просто добавьте фильтр размытия, и произойдет волшебство:

body {
    filter: url('#filter');
}
div {
    background: linear-gradient(#fff, #999, #ddd, #888);
    background-clip: text;
    filter: blur(5px);
}

Весь эффект мгновенныйаэрозолизацияМного:

Что ж, добавьте к нему эффект циклической анимации и просто обработайте его с помощью JavaScript:

const filter = document.querySelector("#turbulence");
let frames = 1;
let rad = Math.PI / 180;
let bfx, bfy;

function freqAnimation() {
    frames += .2

    bfx = 0.03;
    bfy = 0.03;

    bfx += 0.005 * Math.cos(frames * rad);
    bfy += 0.005 * Math.sin(frames * rad);

    bf = bfx.toString() + " " + bfy.toString();
    filter.setAttributeNS(null, "baseFrequency", bf);

    window.requestAnimationFrame(freqAnimation);
}

window.requestAnimationFrame(freqAnimation);

Взгляните на эффект:

Полный код выше, вы можете ударить здесь:CodePen CSS + SVG Text Smoke Effect

Конечно, вышеуказанный эффект может быть достигнут за счет:

  1. контроль<feTurbulence>изbaseFrequencyкорректировка свойств
  2. контроль<feTurbulence>изnumOctavesкорректировка свойств
  3. контроль<feDisplacementMap>изscaleкорректировка свойств

Буду<feTurbulence>изnumOctavesПри изменении атрибута с 30 на 70 контур текста практически невидим, а весь текст затуманен. Мы можем сделать эффект наведения следующим образом:

Полный код выше, вы можете ударить здесь:CodePen CSS + SVG Text Smoke Hover Effect

Таким образом, на основеfilter: blur()Сотрудничать<feturbulence>фильтр, мы можем получить очень реалистичный эффект дыма.Основываясь на приведенной выше демонстрации, мы также можем накопать много интересных эффектов, которые не будут повторяться в этой статье.

наконец

Хорошо, это конец этой статьи, я надеюсь, что эта статья поможет вам :)

Если вы хотите получить самую интересную информацию о CSS, не пропустите мой официальный аккаунт --Интересные факты о внешнем интерфейсе iCSS😄

Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.

Если у вас есть какие-либо вопросы или предложения, вы можете общаться больше.Оригинальные статьи ограничены в написании и знаниях.Если в статье есть какие-либо неточности, пожалуйста, дайте мне знать.

Категории