轩枫阁

首页 / Web前端 / CSS / CSS3实现毛玻璃模糊效果

CSS3实现毛玻璃模糊效果

前言

毛玻璃模糊效果,即PS中高斯模糊效果,这种效果在设计中能展现出优质的界面,IOS应用中也多出应用。那如何实现呢?

blur

CSS3 blur滤镜实现

CSS3支持blur,使用起来相当简单

相关HTML代码

这个高级功能,目前当然是Chrome专属啦,其他些浏览器,如FireFox到目前还没有支持CSS3 filter。当然,要实现(比方说)FireFox 24浏览器上照片变模糊的效果,也是可以的。

使用SVG的模糊滤镜

新建文命名为blur.svg的SVG文件:

如下CSS调用代码:

完整的css代码

解决白边方式

在使用CSS3 blur的时候,你会发现毛玻璃图片的边缘出现白边,如何解决呢?

相关HTML代码如下:

原理是在要模糊的图片下面在定位一张相同的图片,当要模糊的图片缩小时,就会显示出底下的高清图

Demo

CSS3:http://xuanfengge.com/demo/201503/blur/index.html

SVG:http://xuanfengge.com/demo/201503/blur/blur.svg

149/470
151/470

相关阅读

文章评论

  • [赞啊]

  • [切]

  • [鬼脸]

  • 水平很高啊,值得学习

  • 超級精彩,我非常喜歡

  • 这个效果在好多网站上都看到过

  • 来学习了,谢谢分享

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子