# filter
# 电影效果
滤镜中的brightness用于调整图像的明暗度。默认值是1；小于 1 时图像变暗，为 0 时显示为全黑图像；大于 1 时图像显示比原图更明亮。
<div class="container">
<div class="pic"></div>
<div class="text">
<p>如果生活中有什么使你感到快乐，那就去做吧</p>
<br />
<p>不要管别人说什么</p>
</div>
</div>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
.pic {
height: 100%;
width: 100%;
position: absolute;
background: url("./images/movie.webp") no-repeat;
background-size: cover;
animation: fade-away 2.5s linear forwards;
/* //forwards当动画完成后，保持最后一帧的状态 */
}
.text {
position: absolute;
line-height: 55px;
color: #fff;
font-size: 36px;
text-align: center;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 0;
animation: show 2s cubic-bezier(0.74, -0.1, 0.86, 0.83) forwards;
}
@keyframes fade-away {
/* //背景图的明暗度动画 */
30% {
filter: brightness(1);
}
100% {
filter: brightness(0);
}
}
@keyframes show {
/* //文字的透明度动画 */
20% {
opacity: 0;
}
100% {
opacity: 1;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
# 模糊效果
在下面的单词卡片中，当鼠标 hover 到某一张卡片上时，其他卡片背景模糊，使用户焦点集中到当前卡片。
<ul class="cards">
<li class="card">
<p class="title">Flower</p>
<p class="content">The flowers mingle to form a blaze of color.</p>
</li>
<li class="card">
<p class="title">Sunset</p>
<p class="content">The sunset glow tinted the sky red.</p>
</li>
<li class="card">
<p class="title">Plain</p>
<p class="content">
The winds came from the north, across the plains, funnelling down the
valley.
</p>
</li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
实现的方式，是将背景加在.card元素的伪类上，当元素不是焦点时，为该元素的伪类加上滤镜。
.card:before {
z-index: -1;
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 20px;
filter: blur(0px) opacity(1);
transition: filter 200ms linear, transform 200ms linear;
}
/*
这里不能将滤镜直接加在.card元素，而是将背景和滤镜都加在伪类上。
因为，父元素加了滤镜，它的子元素都会一起由该滤镜改变。
如果滤镜直接加在.card元素上，会导致上面的文字也变模糊。
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* //通过css选择器选出非hover的.card元素，给其伪类添加模糊、透明度和明暗度的滤镜 */
.cards:hover > .card:not(:hover):before {
filter: blur(5px) opacity(0.8) brightness(0.8);
}
1
2
3
4
5
2
3
4
5
/* //对于hover的元素，其伪类增强饱和度，尺寸放大 */
.card:hover:before {
filter: saturate(1.2);
transform: scale(1.05);
}
1
2
3
4
5
6
2
3
4
5
6
# 褪色效果
褪色效果可以打造出一种怀旧的风格。下面这组照片墙，我们通过 sepia 滤镜将图像基调转换为深褐色，再通过降低 饱和度 saturate 和 色相旋转 hue-rotate 微调，模拟老照片的效果
.pic {
border: 3px solid #fff;
box-shadow: 0 10px 50px #5f2f1182;
filter: sepia(30%) saturate(40%) hue-rotate(5deg);
transition: transform 1s;
}
.pic:hover {
filter: none;
transform: scale(1.2) translateX(10px);
z-index: 1;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 融合效果
要使两个相交的元素产生下面这种融合的效果，需要用到的滤镜是
blur和contrast。
<div class="container">
<div class="circle circle-1"></div>
<div class="circle circle-2"></div>
</div>
1
2
3
4
2
3
4
.container {
margin: 50px auto;
height: 140px;
width: 400px;
background: #fff;
/* //给融合元素的父元素设置背景色 */
display: flex;
align-items: center;
justify-content: center;
filter: contrast(30);
/* //给融合元素的父元素设置contrast */
}
.circle {
border-radius: 50%;
position: absolute;
filter: blur(10px);
/* //给融合元素设置blur */
}
.circle-1 {
height: 90px;
width: 90px;
background: #03a9f4;
transform: translate(-50px);
animation: 2s moving linear infinite alternate-reverse;
}
.circle-2 {
height: 60px;
width: 60px;
background: #0000ff;
transform: translate(50px);
animation: 2s moving linear infinite alternate;
}
@keyframes moving {
/* //两个元素的移动 */
0% {
transform: translate(50px);
}
100% {
transform: translate(-50px);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
实现融合效果的技术要点：
- contrast 滤镜应用在融合元素的父元素（.container）上，且父元素必须设置 background。
- blur 滤镜应用在融合元素（.circle）上。
- blur 设置图像的模糊程度，contrast 设置图像的对比度。当两者像上面那样组合时，就会产生神奇的融合效果，你可以像使用公式一样使用这种写法。
# 加载动画
html 和 css 如下所示，这个动画主要通过控制子元素.circle 的尺寸和位移来实现，但是由于父元素和子元素都满足 “融合公式” ，所以当子元素相交时，就出现了融合的效果。
<div class="container">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
1
2
3
4
5
6
7
2
3
4
5
6
7
.container {
margin: 10px auto;
height: 140px;
width: 300px;
background: #fff;
/* //父元素设置背景色 */
display: flex;
align-items: center;
filter: contrast(30);
/* //父元素设置contrast */
}
.circle {
height: 50px;
width: 60px;
background: #1aa7ff;
border-radius: 50%;
position: absolute;
filter: blur(20px);
/* //子元素设置blur */
transform: scale(0.1);
transform-origin: left top;
}
.circle {
animation: move 4s cubic-bezier(0.44, 0.79, 0.83, 0.96) infinite;
}
.circle:nth-child(2) {
animation-delay: 0.4s;
}
.circle:nth-child(3) {
animation-delay: 0.8s;
}
.circle:nth-child(4) {
animation-delay: 1.2s;
}
.circle:nth-child(5) {
animation-delay: 1.6s;
}
@keyframes move {
/* //子元素的位移和尺寸动画 */
0% {
transform: translateX(10px) scale(0.3);
}
45% {
transform: translateX(135px) scale(0.8);
}
85% {
transform: translateX(270px) scale(0.1);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
# 酷炫的文字出场方式
主要通过不断改变 letter-spacing 和 blur 的值，使文字从融合到分开
<div class="container">
<span class="text">fantastic</span>
</div>
1
2
3
2
3
.container {
margin-top: 50px;
text-align: center;
background-color: #000;
filter: contrast(30);
}
.text {
font-size: 100px;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
letter-spacing: -40px;
color: #fff;
animation: move-letter 4s linear forwards;
/* //forwards当动画完成后，保持最后一帧的状态 */
}
@keyframes move-letter {
0% {
opacity: 0;
letter-spacing: -40px;
filter: blur(10px);
}
25% {
opacity: 1;
}
50% {
filter: blur(5px);
}
100% {
letter-spacing: 20px;
filter: blur(2px);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
# 水波效果
filter 还可以通过 URL 链接到 SVG 滤镜元素
下面的水波纹效果就是基于 SVG 的feTurbulence滤镜实现的
feTurbulence 滤镜借助 Perlin 噪声算法模拟自然界真实事物那样的随机样式。它接收下面 5 个属性：
- baseFrequency 表示噪声的基本频率参数，频率越高，噪声越密集。
- numOctaves 就表示倍频的数量，倍频的数量越多，噪声看起来越自然。
- seed 属性表示 feTurbulence 滤镜效果中伪随机数生成的起始值，不同数量的 seed 不会改变噪声的频率和密度，改变的是噪声的形状和位置。
- stitchTiles 定义了 Perlin 噪声在边框处的行为表现。
- type 属性值有 fractalNoise 和 turbulence，模拟随机样式使用 turbulence。
在这个例子，两个 img 标签使用同一张图片，将第二个 img 标签使用 scaleY(-1)实现垂直方向的镜像翻转，模拟倒影。 并且，对倒影图片使用 feTurbulence 滤镜，通过动画不断改变 feTurbulence 滤镜的 baseFrequency 值实现水纹波动的效果。
<div class="container">
<img src="images/moon.jpg" />
<img src="images/moon.jpg" 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.container {
height: 520px;
width: 400px;
display: flex;
clip-path: inset(10px);
flex-direction: column;
}
img {
height: 50%;
width: 100%;
}
.reflect {
transform: translateY(-2px) scaleY(-1);
/* //对模拟倒影的元素应用svg filter */
/* //url中对应的是上面svg filter的id */
filter: url(#displacement-wave-filter);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 抖动效果
在上面的水波动画中改变的是 baseFrequency 值，我们也通过改变 seed 的值，实现文字的抖动效果。
<div>
<p class="shaky">Such a joyful 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.shaky {
font-size: 60px;
filter: url(#displacement-text-filter);
/* //url中对应的是上面svg filter的id */
}
1
2
3
4
5
2
3
4
5