S11LPL春季赛最近开始了。在看比赛的过程中，我在新赛季的Ban/Pick选择阶段发现了一个新奇有趣的遮蔽效果，如下图所示：当然是动态效果。Duringtheprocessofbeingelected,therewillbeabreathingeffect:theGifimageisabitblurry.总的来说，是一种接近于雾的蒙版效果。而且，他可以动态变化。本文将探讨如何在CSS中实现类似的效果。实现烟雾蒙版效果首先我们来尝试实现这样一个动态蒙版：假设没有模糊边缘和烟雾效果，它实际上是一个渐变：
div{width:340px;高度：180px；边框：2px实心#5b595b；background:linear-gradient(rgba(229,23,49,1),rgba(229,23,49,.9)48%,transparent55%,);}通过上面的代码，我们可以得到：看起来很普通，我们怎么用它来得到雾化效果呢？说到烟雾，聪明的同学应该能想到滤镜，当然是SVG滤镜。没错，又是它，它真的很有趣，我关于它的最后两篇文章——太棒了！！CSS也能实现烟雾效果？[1]，太棒了！！CSS也能实现极光？[2]是一起阅读。type="fractalNoise"在模拟云雾效果时非常有用。这个滤镜使用柏林噪声函数创建图像，可以实现半透明的烟熏或波浪图像，用于实现一些特殊的纹理。这里，我们使用过滤器对上面的图形进行简单的处理：
在CSS中可以使用filter:url()将这个filter引入对应的element:div{...filter:url(#smoke);}带滤镜的元素效果：由于我给元素加了边框，所以整个边框也雾化了，这不是我们想要的，你可以使用伪元素修改元素，给容器应用边框，使用伪元素实现渐变，给伪元素应用滤镜：div{position:relative;宽度：340px；高度：180px；边框：2px实心#5b595b；&::之前{内容：“”；位置：绝对；左：0；顶部：0；右：0；底部：0；背景：线性渐变（30deg,rgba(229,23,49,1),rgba(229,23,49,.9)48%,transparent55%,);过滤器：网址（#smoke）；}}返工看起来是这样的：好的，更近了一步，但还有很多未被填补的缺陷。问题不大，我们改一下top\left\right\bottom的定位，让伪元素超出父容器，父容器可以设置overflow:hidden:div{....overflow:hidden;&::before{....左：-20px；顶部：-10px；右：-20px；底部：-20px；背景：线性渐变（30deg,rgba(229,23,49,1),rgba(229,23,49,..9)48%,transparent55%,);过滤器：网址（#smoke）；}}调整后看效果：感觉有点像，接下来就是让smoke元素动起来，为了让整个效果连贯（由于SVG动画本身不支持animation-fill-之类的特性）mode:alternate)，我们还需要写一点JavaScript代码来控制整个动画周期。大概的代码是这样的：constfilter=document.querySelector("#turbulence");letframes=1;letrad=Math.PI/180;letbfx,bfy;functionfreqAnimation(){frames+=.35;bfx=0.035;bfy=0.015;bfx+=0.006*Math.cos(帧*弧度);bfy+=0.004*Math.sin(frames*rad);bf=bfx.toString()+""+bfy.toString();filter.setAttributeNS(null,"baseFrequency",bf);window.requestAnimationFrame(freqAnimation);}window.requestAnimationFrame(freqAnimation);这段代码实际上只有一件事，就是让SVGbaseFrequency属性的#turbulence过滤器，在一个区间内无限循环，仅此而已。通过改变baseFrequency，整个烟雾不断变化。至此，我们就得到了一个完整的、会动的烟雾面具：在下图中添加图片，就可以得到开头给出的效果图了：完整代码可以点这里——CodePenDemos——-LPLBANPICKMASKEffect[3]实现呼吸状态的遮罩效果。在上面的基础上，添加呼吸效果其实很简单。我们只需要改变渐变的一个位置。有很多方法。这里我会给出一个比较优雅但可能不太兼容的方法——CSS@property。简单修改上面的代码：@property--per{syntax:"";继承：假的；初始值：22%；}div::before{...背景：线性梯度（30deg，#ff0020，rgba（229、23、49，.9）var（--per），透明计算（var（--每)+8%),);过滤器：网址（#smoke）；动画：改变2s无限缓出；}@keyframes改变{50%{--per:18%;}}这样就实现了呼吸效果：完整代码，可以点这里--CodePenDemos--LPLBANPICKMASKEffect[4]FinallyOK好了，本文到此结束，希望这篇文章对你有帮助:)参考资料[1]Amazing!!CSS也能实现烟雾效果？：https://github.com/chokcoco/iCSS/issues/156[2]Amazing!!CSS也能实现极光？：https://github.com/chokcoco/iCSS/issues/155[3]CodePen演示——LPLBANPICKMASK效果：https://codepen.io/Chokcoco/pen/YzrBxrK[4]CodePen演示——LPLBANPICKMASK效果：https://codepen.io/Chokcoco/pen/YzrBxrK
