简单来说,CSS 滤镜就是提供类似 PS 的图形特效,像模糊,锐化或元素变色等功能。通常被用于调整图片,背景和边界的渲染。
本文就简单介绍几种滤镜的使用。
css几种常用的滤镜技巧:
- 使用 filter: blur() 生成毛玻璃效果
- 使用 filter: drop-shadow() 生成整体阴影效果
- 使用 filter: opacity() 生成透明度
看下效果:
brightness/contrast —— hover时增大图片亮度
通常页面上的按钮,都会有 hover/active 的颜色变化,以增强与用户的交互。但是一些图片展示,则很少有 hover 的交互,运用 filter: contrast() 或者 filter: brightness() 可以在 hover 图片的时候,调整图片的对比图或者亮度,达到聚焦用户视野的目的。
brightness表示亮度,contrast 表示对比度。
img:hover{
filter: brightness(1.1);
filter: contrast(110%);
}
brightness(1.1)和contrast(110%)的效果相同。
blur — 生成图像阴影
通常而言,我们生成阴影的方式大多是 box-shadow 、filter: drop-shadow() 、text-shadow 。但是,使用它们生成阴影是阴影只能是单色的。虽然filter:blur()也不能生成彩色的阴影,但是我们可以通过巧妙的利用 filter: blur 模糊滤镜,我们可以假装生成渐变色或者说是颜色丰富的阴影效果。
.img-box{
position: relative;
width: 500px;
height: 300px;
left: 100px;
background: url("images/titleBg.png") no-repeat center center;
background-size: 100%;
}
.img-box:after{
content: "";
position: absolute;
top: 5%;
z-index: -1;
height: 100%;
width: 100%;
background: url("images/titleBg.png") no-repeat center center;
-webkit-background-size: 100%;
background-size: 100%;
filter: blur(10px) brightness(80%) opacity(.8);
}
blur 混合 contrast 产生融合效果
(参考其他博客内容)
单独将两个滤镜拿出来,它们的作用分别是:
filter: blur(): 给图像设置高斯模糊效果。
filter: contrast(): 调整图像的对比度。
但是,当他们“合体”的时候,产生了奇妙的融合现象,通过对比度滤镜把高斯模糊的模糊边缘给干掉,利用高斯模糊实现融合效果。
.filter-mix {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 200px;
filter: contrast(20);
background: #ccc;
}
.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;
}
}
两圆相交的过程,在边与边接触的时候,会产生一种边界融合的效果。
上述效果的实现基于两点:
1.图形是在被设置了 filter: contrast() 的画布背景上进行动画的
2.进行动画的图形被设置了 filter: blur()( 进行动画的图形的父元素需要是被设置了 filter: contrast() 的画布)
意思是,上面两圆运动的背后,其实是叠加了一张设置了 filter: contrast() 的大白色背景,而两个圆形则被设置了 filter: blur() ,两个条件缺一不可。
文字融合动画
h1 {
font-family: Righteous;
color: white;
font-size: 4rem;
text-transform: uppercase;
line-height: 1;
animation: letterspacing 5s infinite alternate ease-in-out;
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
letter-spacing: -2.2rem;
}
@keyframes letterspacing {
0% {
letter-spacing: -2.2rem;
filter: blur(.3rem);
}
50% {
filter: blur(.5rem);
}
100% {
letter-spacing: .5rem;
filter: blur(0rem);
color: #fff;
}
}