作者简介
王莉：一位新妈妈
一、概念
css3的filter属性(滤镜)是用来定义元素（通常是 图片）的视觉效果的，其功能简单易用且强大，可以对网页中的图片进行类似Photoshop处理图片的效果，通过滤镜对图片进行处理，能使一张图片呈现各种不同的视觉效果。
二、用法
单属性用法
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
多属性组合使用
// 用空格分隔每个属性
filter: blur(5px) opacity(0.8) brightness(0.8);
三、filter的兼容性
为了兼容低版本的Safari、Chrome和Opera浏览器，需要加上前缀-webkit- 。
四、属性简介
1、grayscale(灰度)
将图片过滤成灰色，取值为0-1或者0%-100%之间，默认值是0。
2、sepia(褐色)
将图片过滤成怀旧复古的风格，值为0-1或者0%-100%之间的值，默认值是0
3、saturate(饱和度)
转换图像饱和度，值为0%是完全不饱和，图像呈现黑白色，默认值是100%，值为100%图像无变化，超过100%的值是允许的，则有更高的饱和度(图片颜色更深更亮)，值只能是大于等于0的值，取负数的表现和默认值是一样的。
4、contrast(对比度)
调整图像的对比度，值是0%的话，图像会全黑，默认值是100%，值为100%图像无变化，值可以超过100%，意味着会运用更低的对比。
5、hue-rotate(色相旋转)
让图像中的颜色，在色相环中做对应的旋转，默认值是0deg，值为0deg，图像无变化，该值虽然没有最大值，但超过360deg的值相当于又绕一圈。
6、invert(反色)
将图片过滤成类似于照片底片的感觉，取值为0-1或者0%-100%之间，默认值是0%。
7、brightness(亮度)
改变图片的亮度，使其看起来更亮或更暗。如果值是0%，图像会全黑，默认值是100%，值是100%时，图像无变化，值超过100%也是可以的，图像会比原来更亮。
8、opacity(透明度)
改变图像的透明程度，值为0%则是完全透明，默认值是100%，值为100%图像无变化，0-100%之间则是部分透明。也可以用0-1之间的小数替代0%-100%。
9、blur(模糊)
给图像设置高斯模糊。值越大越模糊，默认是0。
10、drop-shadow(阴影)
给图像设置阴影。
filter属性汇总对比图
五、应用
1、电影谢幕效果
技术要点：
- 使用brightness滤镜实现对背景图明暗度的控制。
- 使用opacity滤镜实现对文案展示与否的控制。
- 动画(animation)的使用。
<html>
<head>
<title>关于filter-电影谢幕效果</title>
<meta charset="utf-8"></meta>
<style>
.title{
margin: 20px;
font-size: 25px;
}
.pic{
height: 100%;
width: 100%;
position: absolute;
background: url('./images/movies-picture1.jpeg') no-repeat;
background-size: cover;
animation: fade-away 4s linear forwards;
/*animation-fill-mode forwards当动画完成后，保持最后一帧的状态 */
}
.text{
position: absolute;
line-height: 55px;
color: #fff;
font-size: 36px;
text-align: center;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
filter: opacity(0);
animation: show 4s cubic-bezier(.74,-0.1,.86,.83) forwards;
}
/* 背景图的明暗度动画 */
@keyframes fade-away {
30%{
filter: brightness(1);
}
100%{
filter: brightness(0);
}
}
/* 文字的透明度动画 */
@keyframes show{
20%{
filter: opacity(0);
}
100%{
filter: opacity(1);
}
}
</style>
</head>
<body>
<div class="title">filter-电影谢幕效果</div>
<div class="container">
<div class="pic"></div>
<div class="text">
<p>如果生活中有什么使你感到真正快乐，那就去做吧</p>
<br>
<p>不用管别人说什么</p>
</div>
</div>
</body>
</html>
2、模糊效果
技术要点：
- 将卡片的背景图加在了伪类上，因为，父元素加了滤镜，它的子元素都会一起由该滤镜改变，所以如果滤镜直接加在卡片元素上，就会导致卡片上面的文字也变模糊。
- 非hover的卡片元素使用组合滤镜（filter:blur(5px) opacity(0.8) brightness(0.8)）实现卡片背景图的模糊效果。
- hover的卡片元素使用saturate滤镜实现对卡片背景图的突出强调。
- 动画(transition)的使用。
代码实现：
<html>
<head>
<title>关于filter-模糊效果</title>
<meta charset="utf-8"></meta>
<style>
.title{
margin: 20px;
font-size: 25px;
}
.cards{
display: flex;
justify-content: center;
}
.card{
width: 300px;
height: 400px;
color: white;
font-size: 20px;
margin: 0 30px;
padding: 0 20px;
}
.text{
padding: 0 15px;
}
.card:hover{
cursor: pointer;
}
.card:before{
width: 300px;
height: 400px;
z-index: -1;
content: '';
position: absolute;
background: url('./images/movies-picture1.jpeg') no-repeat center;
background-size: cover;
border-radius: 20px;
transition: filter 200ms linear, transform 200ms linear;
}
/* 通过css选择器选出非hover的.card元素，给其伪类添加模糊、透明度和明暗度的滤镜 */
.cards:hover > .card:not(:hover):before{
filter: blur(5px) opacity(0.8) brightness(0.8);
}
/* 对于hover的元素，其伪类增强饱和度，尺寸放大 */
.card:hover:before{
filter: saturate(2);
transform: scale(1.05);
}
</style>
</head>
<body>
<div class="title">filter-模糊效果</div>
<div class="cards">
<div class="card">
<p class="text">Flower</p>
<p class="text">The flowers mingle to form a blaze of color.</p>
</div>
<div class="card">
<p class="text">Sunset</p>
<p class="text">The sunset glow tinted the sky red.</p>
</div>
<div class="card">
<p class="text">Plain</p>
<p class="text">The winds came from the north, across the plains, funnelling down the valley. </p>
</div>
</div>
</body>
</html>
3、褪色效果
技术要点：
- 图片的褪色效果使用组合滤镜（filter: sepia(30%) saturate(40%) hue-rotate(5deg)）实现。
- hover的图片去掉所有滤镜效果（filter:none）。
- 动画(transition)的使用。
代码实现：
<html>
<head>
<title>关于filter-褪色效果</title>
<meta charset="utf-8"></meta>
<style>
.title{
margin: 20px;
font-size: 25px;
}
.bg{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 400px;
background: #edecdb;
border-radius: 15px;
}
.pic1{
width: 240px;
height: 190px;
}
.pic2{
width: 240px;
height: 300px;
}
.pic3{
width: 240px;
height: 190px;
}
.pic4{
width: 240px;
height: 136px;
}
.bg img{
padding: 0 5px;
border: 3px solid #fff;
box-shadow: 0 10px 50px #5f2f1182;
filter: sepia(30%) saturate(40%) hue-rotate(5deg); /*退色效果*/
transition: transform 1s;
}
.bg img:hover{
filter: none;
transform: scale(1.2) translateX(10px);
z-index: 1;
}
</style>
</head>
<body>
<div class="title">filter-褪色效果</div>
<div class="bg">
<img src="./images/movies-picture1.jpeg" class="pic1">
<img src="./images/2.jpeg" class="pic2">
<img src="./images/3.jpeg" class="pic3">
<img src="./images/4.jpeg" class="pic4">
<img src="./images/movies-picture1.jpeg" class="pic1">
</div>
</body>
</html>
4、融合效果
技术要点：
- blur滤镜应用在融合元素上，实现模糊效果，融合元素四周出现毛边。
- 通过contrast滤镜加强融合元素父元素的对比度，使融合元素四周的毛边粘黏在一起。
正常两个圆交叠
使用blur滤镜在两个圆上面
使用contrast滤镜在两个圆父元素上面
代码实现：
<html>
<head>
<title>关于filter-融合效果</title>
<meta charset="utf-8"></meta>
<style>
.title{
margin: 20px;
font-size: 25px;
}
.container{
margin: 50px auto;
height: 140px;
width: 400px;
background: #fff; /*给融合元素的父元素设置背景色*/
display: flex;
align-items: center;
justify-content: center;
filter: contrast(50); /*给融合元素的父元素设置contrast*/
}
.circle{
border-radius: 50%;
filter: blur(10px); /*给融合元素设置blur*/
}
.circle-1{
height: 110px;
width: 110px;
background: #03a9f4;
}
.circle-2{
height: 80px;
width: 80px;
background: #0000ff;
transform: translate(-40px);
}
</style>
</head>
<body>
<div class="title">filter-融合效果</div>
<div class="container">
<div class="circle circle-1"></div>
<div class="circle circle-2"></div>
</div>
</body>
</html>
4.1、融合效果之水滴融合
技术要点：
- blur滤镜应用在三个圆圈上。
- contrast滤镜应用三个圆圈的父元素上面。
- 动画(transition)的使用。
- hover到三个圆圈的父元素上面时，将第一个和第三个圆圈分别向左右移动。
代码实现：
<html>
<head>
<title>关于filter-融合效果</title>
<meta charset="utf-8"></meta>
<style>
.title{
margin: 20px;
font-size: 25px;
}
.box {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #111;
filter: contrast(30); /*父元素设置对比度*/
}
.drop {
width: 150px;
height: 150px;
border-radius: 50%;
background-color: white;
position: absolute;
filter: blur(15px); /*子元素设置模糊度*/
transition: transform 1s;
}
.box:hover .drop-1 {
transform: translateX(-180px);
}
.box:hover .drop-3 {
transform: translateX(180px);
}
</style>
</head>
<body>
<div class="title">filter-融合效果应用之水滴融合</div>
<div class="box">
<div class="drop drop-1"></div>
<div class="drop drop-2"></div>
<div class="drop drop-3"></div>
</div>
</body>
</html>
4.2、融合效果之文字融合
技术要点：
- contrast滤镜应用在文字的父元素上面。
- 动画(animation)的使用，使用blur滤镜和letter-spacing属性制作作用在文字上的动画。
代码实现：
<html>
<head>
<title>关于filter-融合效果</title>
<meta charset="utf-8"></meta>
<style>
.title{
margin: 20px;
font-size: 25px;
}
.container{
margin-top: 50px;
text-align: center;
background-color: #000;
filter: contrast(30); /*父元素设置对比度*/
}
.text{
font-size: 100px;
letter-spacing: -40px;
color: #fff;
animation: move-letter 4s linear forwards; /*forwards当动画完成后，保持最后一帧的状态*/
}
@keyframes move-letter{
0% {
letter-spacing: -40px;
filter: blur(10px); /*子元素设置模糊度*/
}
50% {
filter: blur(5px);
}
100% {
letter-spacing: 15px;
filter: blur(2px);
}
}
</style>
</head>
<body>
<div class="title">filter-融合效果应用之文字融合</div>
<div class="container">
<span class="text">helloworld!</span>
</div>
</body>
</html>
5、水波效果
技术要点：
- filter可以通过 URL 链接到 SVG filter。
- 两个img标签使用同一张图片，将第二个img标签使用scaleY(-1)实现垂直方向的镜像翻转，模拟倒影。
- 对倒影图片使用feTurbulence滤镜，通过动画不断改变feTurbulence滤镜的baseFrequency值实现水纹波动的效果。
代码实现：
<html>
<head>
<title>关于filter-水波效果</title>
<meta charset="utf-8"></meta>
<style>
.title{
margin: 20px;
font-size: 25px;
}
.container{
height: 520px;
width: 400px;
display: flex;
clip-path: inset(10px);
flex-direction: column;
}
img{
height: 50%;
width: 100%;
}
.reflect {
transform: scaleY(-1);
/* 对模拟倒影的元素应用svg filter，url中对应的是上面svg filter的id */
filter: url(#displacement-wave-filter);
}
</style>
</head>
<body>
<div class="title">filter-水波效果</div>
<div class="container">
<img src="./images/movies-picture1.jpeg">
<img src="./images/movies-picture1.jpeg" class="reflect">
</div>
<!--定义svg滤镜，这里使用的是feTurbulence滤镜-->
<svg width="0" height="0">
<filter id="displacement-wave-filter">
<!--baseFrequency设置0.01 0.09两个值，代表x轴和y轴的噪声频率-->
<feTurbulence baseFrequency="0.01 0.09">
<!--这是svg动画的定义方式，通过动画不断改变baseFrequency的值，从而形成波动效果-->
<animate
attributeName="baseFrequency"
dur="20s"
keyTimes="0;0.5;1"
values="0.01 0.09;0.02 0.13;0.01 0.09"
repeatCount="indefinite"
></animate>
</feTurbulence>
<feDisplacementMap in="SourceGraphic" scale="10" />
</filter>
</svg>
</body>
</html>
5、抖动效果
代码实现：
<html>
<head>
<title>关于filter-抖动效果</title>
<meta charset="utf-8"></meta>
<style>
.title{
margin: 20px;
font-size: 25px;
}
.container{
text-align: center;
width: 100%;
height: 400px;
background: black;
}
.shaky{
line-height: 400px;
color: white;
font-size: 60px;
filter: url(#displacement-text-filter);
/* url中对应的是上面svg filter的id */
}
</style>
</head>
<body>
<div class="title">filter-抖动效果</div>
<div class="container">
<p class="shaky">Such a good night! 美好的一天</p>
</div>
<svg width="0" height="0">
<filter id="displacement-text-filter">
<!--定义feTurbulence滤镜-->
<feTurbulence baseFrequency="0.02" seed="0">
<!--这是svg动画的定义方式，通过动画不断改变seed的值，形成抖动效果-->
<animate
attributeName="seed"
dur="1s"
keyTimes="0;0.5;1"
values="1;2;3"
repeatCount="indefinite"
></animate>
</feTurbulence>
<feDisplacementMap in="SourceGraphic" scale="10" />
</filter>
</svg>
</body>
</html>
LBG开源项目推广：
还在手写 HTML 和 CSS 吗？
还在写布局吗？
快用 Picasso 吧，Picasso 一键生成高可用的前端代码，让你有更多的时间去沉淀和成长，欢迎Star
开源项目地址：https://github.com/wuba/Picasso
官网地址：https://picassoui.58.com
