一. 图片滤镜 filter
值可为：
-
blur(px) 模糊效果
-
brightness(%) 亮度
-
contrast(%) 对比度
-
drop-shadow(%) 阴影效果
- drop-shadow(x , y , blur , spread) - 跟 box-shadow 的效果和用法类似(水平阴影起始值，垂直阴影起始值，阴影模糊效果，阴影大小[默认跟原图大小相同]) -
grayscale(%) 灰阶效果，黑白图像
-
hue-rotate(deg) 色相旋转
-
opacity(%) 透明度效果
-
saturate(%) 饱和度
-
sepia(%) 棕褐效果
各自效果大致如下：
注意：
- 可以同时给图片加多个效果！！！
二. 利用 filter 实现的炫酷效果
<1> 融合效果
以上效果基于两点实现：
- 图形是在被设置了
filter: contrast()的画布背景上进行动画的 - 进行动画的图形被设置了
filter: blur()（ 进行动画的图形的父元素需要是被设置了filter: contrast()的画布）
原理先通过模糊，让一定区域内都有颜色，然后当两个圆交汇的时候，两个颜色融合也会形成颜色。然后再通过加强对比度，让边缘颜色不深的地方变得不明显，这样就形成了粘稠的效果。
<style>
.filter-mix {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 200px;
filter: contrast(20);
background: #fff;
}
.filter-mix::before {
content: "";
position: absolute;
width: 120px;
height: 120px;
border-radius: 50%;
background: #333;
top: 40px;
left: 40px;
z-index: 2;
filter: blur(6px);
box-sizing: border-box;
animation: filterBallMove 4s ease-out infinite;
}
.filter-mix::after {
content: "";
position: absolute;
width: 80px;
height: 80px;
border-radius: 50%;
background: #3F51B5;
top: 60px;
right: 40px;
z-index: 2;
filter: blur(6px);
animation: filterBallMove2 4s ease-out infinite;
}
@keyframes filterBallMove {
50% {
left: 140px;
}
}
@keyframes filterBallMove2 {
50% {
right: 140px;
}
}
</style>
</head>
<body>
<div class="filter-mix"></div>
</body>
<2> 火焰效果
还是基于filter: contrast() 与 filter: blur()实现：
接下来，我们只需要在火焰
.fire这个 div 内部，用大量的黑色圆形，由下至上，无规律穿过火焰即可。
<3> 文字融合动画
还是基于
filter: contrast() 与 filter: blur()实现，还要借助letter-spacing
letter-spacing用来设置文字之间的字间距，可以为负值，为负值的话，文字之间会挤得更紧！！！
