推荐阅读
相关文章
网站建设您当前位置:主页 > 网络学院 > 网站建设 >

浅谈网站制作中CSS滤镜技巧与细节

发布日期:2020-12-20 来源:优橙 浏览量:
摘要: 本文主要介绍CSS过滤器的不常见用法,希望给读者带来一些干货! 好的,直接转到下面的文本。本文描述的过滤器是指CSS3问世后的过滤器,而不是工业工程系列时代的过滤器。语法如

本文主要介绍CSS过滤器的不常见用法,希望给读者带来一些干货!


好的,直接转到下面的文本。本文描述的过滤器是指CSS3问世后的过滤器,而不是工业工程系列时代的过滤器。语法如下。如果您没有接触过这个属性,您可以像MDN-Filter一样简单地理解它:


``


{


滤波器:模糊(5px);


filter:亮度(0.4);


filter:对比度(200%);


filter : drop-shadow(16px 16px 20px蓝色);


filter:灰度(50%);


filter:色调旋转(90度);


filter:反转(75%);


filter:不透明度(25%);


filter:饱和(30%);


filter : sepia(60%);


``


``


/*应用多个滤镜*/


滤镜:对比度(175%)亮度(3%);



/*全局值*/


filter:继承;


filter: initial


filter: unset


}


```


## 基本用法


先简单看看几种滤镜的效果:


![](http://upload-images.jianshu.io/upload_images/8373224-cb33f949395b0f60?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)



你可以通过 hover 取消滤镜,观察该滤镜的效果。


简单来说,CSS 滤镜就是提供类似 PS 的图形特效,像模糊,锐化或元素变色等功能。通常被用于调整图片,背景和边界的渲染。本文就会围绕这些滤镜展开,看看具体能怎么使用或者玩出什么花活。



![](http://upload-images.jianshu.io/upload_images/8373224-3eae5b43397c214d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)



## 常用用法


既然是标题是你所不知道的技巧与细节,那么比较常用的一些用法就不再赘述,通常我们见得比较多的 CSS 滤镜用法有:



- 使用 `filter: blur()`生成毛玻璃效果



- 使用 `filter: drop-shadow()`生成整体阴影效果



- 使用 `filter: opacity()`生成透明度



如果对上面的技巧不是很了解,可以稍稍百度谷歌一下,下文将由浅及深,介绍一些不大常见的滤镜的具体用法及一些小细节:


## contrast/brightness — hover 增亮图片


通常页面上的按钮,都会有 hover/active 的颜色变化,以增强与用户的交互。但是一些图片展示,则很少有 hover 的交互,运用` filter: contrast()`或者`filter: brightness()`可以在 hover 图片的时候,调整图片的对比图或者亮度,达到聚焦用户视野的目的。


`brightness表示亮度,contrast 表示对比度。`



当然,这个方法同样适用于按钮,简单的 CSS 代码如下:


```


.btn:hover,


.img:hover {


transition: filter .3s


filter:亮度(1.1)对比度(110%);


}


```


![](http://upload-images.jianshu.io/upload_images/8373224-353b8d4f07f14df6.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)



![](http://upload-images.jianshu.io/upload_images/8373224-337779738e33478f.gif?imageMogr2/auto-orient/strip)



## blur — 生成图像阴影


通常而言,我们生成阴影的方式大多是 box-shadow 、filter: drop-shadow() 、text-shadow 。但是,使用它们生成阴影是阴影只能是单色的。


有读者同学会问了,你这么说,难道还可以生成渐变色的阴影不成?



![Paste_Image.png](http://upload-images.jianshu.io/upload_images/8373224-c4196975425efc6c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)



额,当然不行。



![Paste_Image.png](http://upload-images.jianshu.io/upload_images/8373224-cd32750f8352bc55.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)



这个真不行,但是通过巧妙的利用 filter: blur


模糊滤镜,我们可以假装生成渐变色或者说是颜色丰富的阴影效果。


假设我们有下述这样一张头像图片:



![Paste_Image.png](http://upload-images.jianshu.io/upload_images/8373224-d4698bd116437002.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)



下面就利用滤镜,给它添加一层与原图颜色相仿的阴影效果,核心 CSS 代码如下:


``


。avator {


相对位置:


background: url($img)不重复中心中心;


背景尺寸: 100% 100%;


``


``


:after {


content :“”;


position:绝对值;


top : 10%;


宽度:±100%;


height : 100%;


background: inherit


背景尺寸: 100% 100%;


filter:模糊(10px)亮度(80%)不透明度(. 8);


z-index :-1;


}


}


``


看看效果:



![](http://上传-图片。建设/上传-图片/8373224-7af75a4486f98a54.png?imageMogr 2/自动定向/条带%7CimageView2/2/w/1240)



其简单原理是使用伪元素生成与原始图像大小相同的新图像,并将其叠加在原始图像下,然后使用滤镜模糊滤镜:模糊()


与其他亮度/对比度、透明度和其他滤镜合作,创建一个虚幻的阴影,并将其伪装成原始图像的阴影效果。


嗯,最重要的是这句话:滤镜:模糊(10px)亮度(80%)不透明度(. 8);


.


代码pendemo-filtercreate)


##模糊混合对比度产生融合效果


这是本文的重点。模糊滤镜叠加对比度滤镜产生的融合效果。让你知道什么是CSS黑色技术!


分别取出两个过滤器。他们的职能是:


1。filter: blur():在图像上设置高斯模糊效果。


2。filter: contrast():调整图像的对比度。



然而,当它们“结合在一起”时,会有一种奇妙的融合现象。通过对比度滤波消除高斯模糊的模糊边缘,通过高斯模糊实现融合效果。


让我们看一个简单的例子:



![微信图片_ 201710131002608.gif] (http://上传-图片。建shu.io/upload _图片/8373224-f58712a351cb8253.gif?imageMogr 2/自动定向/剥离)



仔细观察两个圆圈相交的过程。当边缘相互接触时,将产生边界融合效应。


上述效果的实现基于两点:


1。图形在画布背景上以滤镜:对比度设置为动画()


2。要被动画化的图形用过滤器: blur()设置(要被动画化的图形的父元素需要用过滤器:对比度()设置)


画布)



意味着上面两个圆圈的运动背后实际上是一个叠加的对比度()和滤波器:


有一个大的白色背景,而这两个圆是用filter: blur()设置的


,两个条件是必不可少的。


当然,背景颜色不一定是白色。我们稍微修改了上面的演示。简单示意图如下:



![](http://上传-图片。建设/上传-图片/8373224-ef2e140b3ac33409。巴布亚新几内亚?imageMogr 2/自动定向/条带%7CimageView2/2/w/1240)



燃烧的火焰


好吧,在介绍了上面的原理之后,让我们来看看用这种效果产生的一些强大的CSS效果。其中,最惊人的是利用融合效应产生火焰。这种效果最早是由作者中野裕介看到的:



![微信图片_ 20171013102804.gif] (http://上传-图片。建shu.io/Upload _图片/8373224-28D 45081db917631.gif?imageMogr 2/自动定向/剥离)




不要怀疑你的眼睛,上面的GIF效果是用纯CSS实现的。


内核或滤波器:对比度()


和滤波器:模糊()


一起使用,但实施过程也很有趣。我们需要用CSS画一个火焰形状。


火焰形状CSS核心代码如下:


``


。火


width : 0;


height : 0;


border-radius : 45%;


box-sizing : border-box;


border: 100px固体# 000;


border-bottom : 100 pxsolid transparent;


background-color : # b 5932 f;


transform : Scalex(. 4);


filter:模糊(20px)对比度(30);


}


``


看起来像这样:



![(http://上传-图片。建书。io/上传-图片/8373224-5f 0 b5 db 61eb 476 EC。png?imageMogr 2/自动定向/条带%7CimageView2/2/w/1240)



分解流程:



![](http://upload-images.jianshu.io/upload_images/8373224-d473b05ea16ea04a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)



在纯黑色背景上,你会得到上图的效果。


这里会有一个大问题,添加滤镜:模糊(20px)对比度(30);



之后,为什么黑色和黄色之间会出现红色边框?



我在这里咨询了几位设计师和前端同事,我得到的答案可能是,两个不同滤镜的颜色值处理算法在边界重叠以获得另一种颜色。 (不一定准确,请评论),尝试在PS中恢复这种效果,但PS没有对比度()过滤器,结果偏差相当大。



好,继续课文。接下来,我们只需要把火放在火里。


在这个分区内,从下到上使用大量黑色圆圈,不规则地穿过火焰。由于过滤器的融合效果,产生火焰效果。为了便于理解,我将背景颜色切换为白色。火焰动画的原理一目了然:



![](http://上传-图片。建设/上传-图片/8373224-86 a5 F5 da 6a 95080 . gif?imageMogr 2/自动定向/剥离)




##文本融合动画


此外,我们可以在动画制作过程中动态更改元素滤镜的滤镜:模糊()


的价值。


使用这种方法,我们还可以设计一些文本融合效果:



![](http://上传-图片。建设/上传-图片/8373224-b0725f40883e356e.gif?imageMogr 2/自动定向/剥离)



![](http://上传-图片。建设. io/上传-图片/8373224-3a 91b 42e 02821添加. gif?imageMogr 2/自动定向/剥离)




具体实施情况见下文:


Code Pendemo-Word动画|文字过滤器(https://codepen.io/Chokcoco/pen/jLjNRj)



##值得注意的细节


虽然动画很美,但在具体使用过程中仍有一些需要注意的地方:



1。CSS滤镜可以同时为同一元素定义多个滤镜,例如,滤镜:对比度(150%)亮度(1.5)


,但不同顺序的过滤器效果不同。



也就是说,使用:°对比度(150%)亮度(1.5)。


和滤波器:亮度(1.5)对比度(150%)


处理同一张图片会产生不同的结果,因为滤镜的颜色值处理算法会按顺序处理图片。


2。过滤动画需要大量的计算和连续重绘页面。这是一个非常消耗性能的动画。使用它时,你应该注意场景。记住打开硬件加速,合理使用分层技术;


3。模糊()混合对比度()滤镜效果,设置不同的颜色会产生不同的效果,这种颜色叠加的具体算法暂时不是很清楚,更好的使用方法是尝试不同的颜色并观察以获得最佳效果;


4。CSS3过滤器的兼容性不是很好,但可以在移动端正常使用。要获得更准确的兼容性列表,请选中“我可以使用吗”。


福州友诚互联网,一家致力于福州网站建设网站制作公司,为客户提供小程序制作,促进福州网络全网推广,准确开发客户。欢迎来到http://www.g303.com


全国统一客服热线

13809509600

周一至周五 9:00-22:30

法定节假日 9:00-23:00

微信公众号