今天在使用 icloud 的时候看到 苹果 icloud官网的毛玻璃效果非常赞，仔细研究了一下它的实现方式，是使用js配合background -i mage: - webkit -canvas的形式 绘制 出的毛玻璃背景图片。
不过 今天又仔细研究了一下css3中的blur方法，可以实现同样的效果。且配合JS可以实现模糊缩放的效果
基础
先来看一下blur属性的表达式：
CSS Code 复制内容到剪贴板
filter：blur（add=add， direction ，strength=strength）&nbs p;
我们看到blur属性有三个参数：add、direction、strength。
Add参数有两个参数值：true和false。 意思 是指定图片 是否 被 改变 成模糊效果。
Direction参数用来设置模糊的 方向 。模糊效果是按照顺时针方向进行的。其中0度代表垂直向上，每45度一个单位，默认值是向左的270度。角度方向的对应关系见下表：
实例
CSS代码
CSS Code 复制内容到剪贴板
.blur { filter: url (blur.svg # blur ); /* FireFox, Ch rom e, opera */ -webk IT -filter: blur( 10px ); /* C hr ome, O PE ra */ -moz-filter: blur( 10px ); -ms-filter: blur( 10px ); filter: blur( 10px ); filter: PR ogid:DXImageTransform.Microsoft.Blur(PixelRadius=10, ;m akeShadow=false); /* IE6~IE9 */ }
HT ML 部分
XM L/HTML Code 复制内容到剪贴板
< img src = "mm1. jpg " class = "blur" />
其中blur(10px)中的大小决定了模糊后的图片大小和模糊程度
总结
以上是 为你收集整理的 使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法 全部内容，希望文章能够帮你解决 使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法的详细内容...