L'effet de fumée flou et granuleux peut également être obtenu avec du CSS pur !

Des effets de fumée flous et granuleux peuvent également être obtenus avec du CSS pur. Dans cet article, nous examinerons étape par étape si nous pouvons mieux obtenir certains effets de fumée en utilisant du CSS pur.

Comme ceci :

Regardez attentivement l'effet de fumée, il y a deux autres caractéristiques importantes :

• Effet de flou
• Sensation granuleuse

Regardez d'abord l'effet de flou. les étudiants le feront en premier. J'ai pensé à utiliser filter: blur() . 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 顺序控制每个字触发动画效果，即可得到上述的完整烟雾效果。

伪代码如下：

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

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

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

就可以得到这样一个被风吹跑的字，幻化成烟雾的效果：

上述效果并非我原创，最早见于这位作者 -- CodePen Demo -- Smoky Text By Bennett Feely

https://codepen.io/bennettfeely/pen/lgybC

借助 SVG feturbulence 滤镜实现烟雾效果

上述的烟雾动画的烟雾还是比较粗糙的。主要是缺少了一点颗粒感？缺少了一些烟雾的质感。

想要实现更为精致的烟雾效果，我们还得借助 SVG 的 <feturbulence></feturbulence> 滤镜

接下来会使用 filter: blur() 配合 <feturbulence></feturbulence> 滤镜，得到更为逼真的烟雾效果。

举个简单的例子，假设有这样几个字：

<div">SMOKE</div>

简单的 CSS：

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

得到这样几个带渐变色字：

我们利用 <feturbulence></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>

CSS 的中利用 filter: url() 引入该滤镜，这里为了效果更好，我直接在 上引入了该滤镜：

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

我们的字体就被 <feturbulence></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

https://codepen.io/Chokcoco/pen/wvrrwVM

当然，上述效果可以通过：

• 控制 <feturbulence></feturbulence> 的 baseFrequency 属性调节

• 控制 <feturbulence></feturbulence> 的 numOctaves 属性调节

• 控制 <fedisplacementmap></fedisplacementmap> 的 scale 属性调节

将 <feturbulence></feturbulence> 的 numOctaves

Bien sûr, c'est vrai, mais en CSS, en plus des filtres, nous pouvons également utiliser un type d'autres moyens pour simuler l'effet 🎜flou🎜. 🎜

🎜CSS pur pour implémenter l'animation de fumée🎜

🎜Regardons d'abord cet effet : 🎜🎜🎜🎜Supposons que nous ayons un tel personnage : 🎜rrreee🎜Nous passons simplement Text- ombre + opacité peut simuler l'effet de la fumée : 🎜rrreee🎜Regardez l'effet : 🎜🎜🎜🎜Sur la base de ce qui précède, nous pouvons ajouter un déplacement, une rotation, une mise à l'échelle et une légère transformation. Prenez le code ci-dessus et ajoutez quelques transformations transform : 🎜rrreee🎜 pour obtenir l'effet suivant : 🎜🎜🎜🎜Après la superposition de transformation, on a l'impression qu'un mot est emporté et transformé en fumée. . Sur cette base, il nous suffit de rassembler plusieurs mots et d'utiliser animation-delay pour contrôler séquentiellement chaque mot afin de déclencher l'effet d'animation afin d'obtenir l'effet de fumée complet mentionné ci-dessus. 🎜🎜Le pseudo code est le suivant : 🎜rrreeerrreee🎜Vous pouvez obtenir l'effet d'un mot emporté par le vent et transformé en fumée : 🎜🎜🎜

🎜L'effet ci-dessus n'est pas original pour moi, il a été vu pour la première fois par cet auteur - CodePen Démo - Smoky Text par Bennett Feely🎜🎜https://codepen.io/bennettfeely/pen/lgybC🎜

🎜Utilisez le filtre de féturbulence SVG pour obtenir l'effet de fumée 🎜

🎜ce qui précède La fumée dans l'animation de fumée est encore relativement grossière. Principalement parce qu'il manque un peu de grain ? Une partie de la texture de la fumée est manquante. 🎜🎜Pour obtenir un effet de fumée plus raffiné, nous devons utiliser le filtre <feturbulence></feturbulence> de SVG 🎜🎜Ensuite, nous utiliserons filter: blur() pour obtenir un effet de fumée plus réaliste. 🎜🎜Pour un exemple simple, supposons qu'il y ait quelques mots comme celui-ci : 🎜rrreee🎜CSS simple : 🎜rrreee🎜Obtenez quelques mots avec des couleurs dégradées comme ceci : 🎜🎜🎜🎜Nous utilisons le filtre <feturbulence></feturbulence> pour traitement simple Jetez un oeil : 🎜rrreee🎜CSS utilise filter: url() pour introduire ce filtre Pour un meilleur effet, j'ai introduit ce filtre directement sur Filtre. : 🎜rrreee🎜Notre police est fluide grâce au filtre <feturbulence></feturbulence> : 🎜🎜🎜🎜Cet effet n'a fondamentalement rien à voir avec l'effet de fumée, mais il vous suffit d'ajouter un filtre de flou Miroir, quelque chose de magique s'est produit : 🎜rrreee🎜Tout l'effet instantanément 🎜fumé🎜 beaucoup : 🎜🎜🎜🎜D'accord, ajoutez-y un effet d'animation en boucle et utilisez simplement JavaScript pour le traiter : 🎜rrreee🎜Regardez l'effet : 🎜🎜🎜

🎜Ci-dessus Pour l'intégralité code, vous pouvez cliquer ici : CodePen CSS + SVG Text Smoke Effect🎜🎜https://codepen.io/Chokcoco/pen/wvrrwVM🎜

🎜Bien sûr, les effets ci-dessus peuvent être obtenus par : 🎜

🎜🎜Ajustement de l'attribut baseFrequency de Control<feturbulence></feturbulence>🎜🎜🎜🎜Control<feturbulence> </feturbulence> L'ajustement de l'attribut numOctaves 🎜🎜🎜🎜 contrôle l'ajustement de l'attribut <fedisplacementmap></fedisplacementmap> scale 🎜🎜🎜🎜 numOctaves de code> passe de 30 à 70, et le contour du texte est fondamentalement invisible et le texte est complètement atomisé. Nous pouvons créer un effet de survol comme celui-ci : 🎜



Pour le code complet ci-dessus, vous pouvez cliquer ici : CodePen CSS + SVG Text Smoke Hover Effect

https://codepen.io/Chokcoco/pen/Jjrrojj

De cette façon, basé sur le filter: blur() 配合 <feturbulence></feturbulence> filtre, nous pouvons obtenir un effet de fumée très réaliste. Sur la base de la démonstration ci-dessus, nous pouvons également explorer de nombreux effets intéressants, que nous n'entrerons pas dans les détails dans cet article.

Enfin

D'accord, cet article se termine ici, j'espère que cet article vous sera utile :)

(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!