前言
毛玻璃模糊效果，即PS中高斯模糊效果，这种效果在设计中能展现出优质的界面，IOS应用中也多出应用。那如何实现呢？
CSS3 blur滤镜实现
CSS3支持blur，使用起来相当简单
|
1 2 3 4 5 6 |
.blur { -webkit-filter: blur(10px); /* Chrome, Opera */ -moz-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); } |
相关HTML代码
|
1 2 |
<img src="mm1.jpg" /> <img src="mm1.jpg" class="blur" /> |
这个高级功能，目前当然是Chrome专属啦，其他些浏览器，如FireFox到目前还没有支持CSS3 filter。当然，要实现（比方说）FireFox 24浏览器上照片变模糊的效果，也是可以的。
使用SVG的模糊滤镜
新建文命名为blur.svg的SVG文件：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" baseProfile="full"> <defs> <filter id="blur"> <feGaussianBlur stdDeviation="10" /> </filter> </defs> </svg> |
如下CSS调用代码：
|
1 |
filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */ |
完整的css代码
|
1 2 3 4 5 6 7 8 9 10 |
.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 */ } |
解决白边方式
在使用CSS3 blur的时候，你会发现毛玻璃图片的边缘出现白边，如何解决呢？
相关HTML代码如下：
|
1 2 |
<img src="mm1.jpg" /> <img src="mm1.jpg" /> |
原理是在要模糊的图片下面在定位一张相同的图片，当要模糊的图片缩小时，就会显示出底下的高清图
[赞啊]
[切]
[鬼脸]
水平很高啊，值得学习
超級精彩，我非常喜歡
这个效果在好多网站上都看到过
来学习了，谢谢分享