最近在用CSS实现一些看似CSS能力之外的效果：巧妙利用渐变实现高级背景光动画[1]太神奇了！！CSS也能实现极光吗？[2]这篇文章是这个系列的续篇，这篇文章我主要想讨论一些烟雾效果是不是可以用CSS更好的实现。像这样：仔细观察烟雾效果，还有两个比较重要的特征：模糊效果颗粒感首先看模糊效果，想到模糊，大部分同学首先会想到使用filter:blur()。当然可以，但是在CSS中，除了滤镜，我们还可以使用一类其他的手段来模拟模糊效果。纯CSS实现烟雾动画先来看这样一个效果：假设我们有这样一个字符：C我们可以通过改变text-shadow+opacity来模拟烟??雾的效果：span{text-shadow:000whitesmoke;animation:smoky5s;}@keyframessmoky{to{text-shadow:0020pxwhitesmoke;opacity:0;}}看效果：在上面的基础上，我们可以添加位移，旋转，缩放，稍微修改一下看看上面的代码并添加一些转换转换：span{text-shadow:000whitesmoke;animation:smoky5s;}@keyframessmoky{to{transform:translate3d(200px,-80px,0)rotate(-40deg)skewX(70deg)scale(1.5);text-shadow:0020pxwhitesmoke;opacity:0;}}可以得到如下效果：叠加变换后，一个字被吹走变成烟雾。在此基础上，我们只需要将多个角色放在一起，使用animation-delay序列控制每个角色触发动画效果，就可以得到上述完整的烟雾效果。伪代码如下：
CSS//...
//...全部上面的CSS代码@for$itemfrom1through21{span:nth-of-type(#{$item}){animation-delay:#{(($item/10))}s;}}可以得到这样一个词被吹走风，化为烟的效果：以上效果非本人独创。最先被笔者看到——CodePenDemo——BennettFeely[3]的SmokyText使用SVGfeturbulencefilter实现烟雾效果。上面的烟雾动画还是比较粗糙的。主要是少了一点粮食？缺少一些烟雾的质感。为了获得更精致的烟雾效果，我们不得不使用SVG滤镜。如果你对这个过滤器不太了解，可以看我的文章：有趣！强大的SVG滤镜[4]惊呆了！巧用SVG滤镜也能做出表情包？[5]实现一个会动的鸿蒙LOGO[6]下面我们就用filter:blur()配合滤镜得到更逼真的烟雾效果。举个简单的例子，假设有几个词是这样的：:text;}得到这几个渐变色的词:我们用滤镜简单处理一下:
SMOKE
CSS使用filter:url()引入过滤器Mirror，这里为了更好的效果，直接引入了上面的滤镜：body{filter:url('#filter');}div{background:linear-gradient(#fff,#999,#ddd,#888);background-clip:text;}我们的字体被滤镜赋予了一种流畅的感觉：这个效果可以说和烟雾效果无关，只需要再加一个模糊滤镜，神奇的事情就发生了：body{filter:url('#filter');}div{background:linear-gradient(#fff,#999,#ddd,#888);background-clip:text;filter:blur(5px);}整个效果瞬间烟雾缭绕：OK，给它加一个圆形动画效果，简单用JavaScript处理一下：constfilter=document.querySelector("#turbulence");letframes=1;letrad=Math.PI/180;letbfx,bfy;functionfreqAnimation(){frames+=.2bfx=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);看效果：完整代码以上，可以点击这里：CodePenCSS+SVGTextSmokeEffect[7]当然以上效果可以通过调整控件的baseFrequency属性调整控件的numOctaves属性调整控件的scale属性改变numOctaves属性从30到70，基本上已经看不到文字的轮廓，文字完全被雾化了。我们可以这样创建悬停效果：上面的完整代码，可以点这里：CodePenCSS+SVGTextSmokeHoverEffect[8]，基于filter:blur()加上filter，我们可以得到非常逼真的烟雾效果.基于上面的演示，我们还可以挖掘出很多有趣的效果，本文不再赘述。最后，本文到此结束，希望本文对你有所帮助：）参考文献【1】使用渐变实现高级背景光动画：https://github.com/chokcoco/iCSS/issues/150[2]Amazing!!CSS也能实现极光？：https://github.com/chokcoco/iCSS/issues/155[3]CodePenDemo--SmokyTextByBennettFeely：https://codepen.io/bennettfeely/pen/lgybC[4]有趣！强大的SVG滤镜：https://github.com/chokcoco/cnblogsArticle/issues/27[5]震惊！可以用SVG滤镜制作表情吗：https://github.com/chokcoco/iCSS/issues/107[6]实现一个会动的鸿蒙LOGO：https://github.com/chokcoco/iCSS/issues/137[7]CodePenCSS+SVG文本烟雾效果：https://codepen.io/Chokcoco/pen/wvrrwVM[8]CodePenCSS+SVG文本烟雾悬停效果：https://codepen.io/Chokcoco/pen/Jjrrojj
