使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
程序员文章站
2023-01-06 09:42:02
CSS3的blur属性可以将图片加上模糊滤镜的效果,下面我们就来详细看一下使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法,需要的朋友可以参考下... 16-07-08...
今天在使用icloud的时候看到苹果icloud官网的毛玻璃效果非常赞,仔细研究了一下它的实现方式,是使用js配合background-image: -webkit-canvas的形式绘制出的毛玻璃背景图片。
不过今天又仔细研究了一下css3中的blur方法,可以实现同样的效果。且配合js可以实现模糊缩放的效果
基础
先来看一下blur属性的表达式:
css code复制内容到剪贴板
- filter:blur(add=add,direction,strength=strength)
我们看到blur属性有三个参数:add、direction、strength。
add参数有两个参数值:true和false。意思是指定图片是否被改变成模糊效果。
direction参数用来设置模糊的方向。模糊效果是按照顺时针方向进行的。其中0度代表垂直向上,每45度一个单位,默认值是向左的270度。角度方向的对应关系见下表:
实例
css代码
css code复制内容到剪贴板
- .blur {
- filter: url(blur.svg#blur); /* firefox, chrome, opera */
- -webkit-filter: blur(10px); /* chrome, opera */
- -moz-filter: blur(10px);
- -ms-filter: blur(10px);
- filter: blur(10px);
- filter: progid:dximagetransform.microsoft.blur(pixelradius=10, makeshadow=false); /* ie6~ie9 */
- }
html部分
xml/html code复制内容到剪贴板
- <img src="mm1.jpg" class="blur" />
其中blur(10px)中的大小决定了模糊后的图片大小和模糊程度
上一篇: 三个阶段 让你全面做好产品推广
下一篇: 新产品推广 如何给消费者一个必买的理由?