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 :
Regardez d'abord l'effet de flou. les étudiants le feront en premier. J'ai pensé à utiliser filter: blur() . filter: blur() 。
当然没错，不过在 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> 滤镜
接下来会使用 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>CSS 的中利用 filter: 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
https://codepen.io/Chokcoco/pen/wvrrwVM
当然，上述效果可以通过：
控制 <feturbulence> 的 baseFrequency 属性调节
控制 <feturbulence> 的 numOctaves 属性调节
控制 <fedisplacementmap></fedisplacementmap> 的 scale 属性调节
将 <feturbulence> 的 numOctaves
🎜🎜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🎜
<feturbulence> de SVG 🎜🎜Ensuite, nous utiliserons filter: blur() 
🎜🎜Nous utilisons le filtre <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 <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 : 🎜
baseFrequency de Control<feturbulence>🎜🎜🎜🎜Control<feturbulence> L'ajustement de l'attribut numOctaves 🎜🎜🎜🎜 contrôle l'ajustement de l'attribut <fedisplacementmap></fedisplacementmap> scale 🎜🎜🎜🎜 numOctaves de code><feturbulence> 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> 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.
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
