你所不知道的CSS滤镜技巧与细节

border: 100px solid #000;

border-bottom: 100pxsolid transparent;

background-color: #b5932f;

transform: scaleX(.4);

filter: blur(20px) contrast(30);

}

大年夜概是长如许：

分化一下过程：

放在纯黑的背景下，就获得了上述图片的效不雅。

这里会有个很大年夜的疑问，增长了 filter: blur(20px) contrast(30); 之后，为什么纯色黑色和黄色的中心，生成了一条红色的边框?

这里我咨询了几个设计师、前端同事，获得的答复大年夜概是两个不合滤镜的色值处理算法在界线处叠技咀用获得了别的一种色彩。(不必定精确，求赐教)，在 PS 里测验测验还原这个效不雅，然则 PS 没有 contrast() 滤镜，获得的效不雅误差挺大年夜的。

OK，持续正文，接下来，我们只须要在火焰 .fire 这个 div 内部，用大年夜量的黑色圆形，由下至上，无规律穿过分焰即可。因为滤镜的融合效不雅，火焰效不雅随之产生，这里为了便利懂得，我把配风景切换成白色，火焰动画道理一看即懂：

具体完全实现可以看这里：

CodePen Demo — CSS fire | CSS filter mix(https://codepen.io/Chokcoco/pen/GvbMmE)

文字融合动画

假设我们有下述如许一张头像图片：

别的，我们可以在动画的过程中，动态改变元素滤镜的 filter: blur() 的值。

应用这个办法，我们还可以设计一些文字融合的效不雅：

先简单看看几种滤镜的效不雅：

具体实现你可以看这里：

CodePen Demo — word animation | word filter(https://codepen.io/Chokcoco/pen/jLjNRj)

值得留意的细节点

动画固然好梦，然则具体应用的过程中，仍然有一些须要留意的处所：

CSS 滤镜可以给同个元素同时定义多个，例如 filter: contrast(150%) brightness(1.5) ，然则滤镜的先后次序不合产生的效不雅也是不一样的;也就是说，应用 filter: contrast(150%) brightness(1.5) 和 filter: brightness(1.5) contrast(150%) 处理同一张图片，获得的效不雅是不一样的，原因在于滤镜的色值处理算法对图片处理的先后次序。
滤镜动画须要大年夜量的计算，赓续的重绘页面，属于异常消费机能的动画，应用时要留意应用处景。记得开启硬件加快及合理应用分层技巧;
blur() 混淆 contrast() 滤镜效不雅，设置不合的色彩会产生不合的效不雅，这个色彩叠加的具体算法本文作者临时也不是很清跋扈，应用时比较好的办法是多测验测验不合色彩，不雅察取最好的效不雅;
CSS3 filter 兼容性不算太好，然则在移动端已经可以比较正常的应用，更为精确的兼容性列表，萌芽 Can i Use。

最后

好了，本文到此停止，欲望对你有赞助 :)

【编辑推荐】

【义务编辑：庞桂玉 TEL：（010）68476606】

　　推荐阅读

　　如何科学地蹭热点：用python爬虫获取热门微博评论并进行情感分析

然后我赶紧去存眷了一下比来老薛的消息…在感触感染了剧情的复杂和案情的扑朔迷离之后…我默默地进修了若何浏览合同…若何应用ELA分析图片…若何写作文…若>>>详细阅读

地址：http://www.17bianji.com/lsqh/37762.html