CSS Filter
CSS Filter介绍
css Filter是css3的属性,提供的图形特效,像模糊,锐化或元素变色。现在移动端和PC的主流浏览器都开始对 CSS Filter 进行支持了,详情请参考浏览器兼容情况。
filter 可以支持很多效果函数: 更多
- blur 给图像设置高斯模糊。
- brightness 给图片应用一种线性乘法,使其看起来更亮或更暗。
- contrast 调整图像的对比度。
- drop-shadow 给图像设置一个阴影效果。
- opacity 转化图像的透明程度。
- url URL函数接受一个XML文件,该文件设置了 一个SVG滤镜,且可以包含一个锚点来指定一个具体的滤镜元素。
CSS Filter动画支持
css Filter支持动画,查看css动画属性。
下面写个例子:
这里我们用 transition来实现动画,transition 或者 animation 都可以实现:
.blur-ele{
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
-webkit-transform: scale(0.94, 1);
-ms-transform: scale(0.94, 1);
transform: scale(0.94, 1);
opacity: 0;
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
-webkit-filter: blur(10px);
filter: blur(10px);
-webkit-transition: .8s ease;
transition: .8s ease .15s;
}
其中我们只需要关注 transition 和 filter 两个属性就行。然后我们设置 active 类,用于开始动画。
.blur-ele.active{
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-filter: blur(0);
filter: blur(0);
}
使用:只需要在想要动起来的元素加上.active即可。
你学会了吗? 妈妈以后都不用担心我不会写高斯模糊之类的效果了。