CSS Filter

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即可。

你学会了吗？ 妈妈以后都不用担心我不会写高斯模糊之类的效果了。