轩枫阁

首页 / 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

本文标题:CSS3实现毛玻璃模糊效果 - 轩枫阁

转载请务必注明出处,欢迎分享

如果觉得我的文章对您有用,请随意打赏
赞  赏
赞赏作者 轩枫-ivan
¥ 6.66
换个金额 使用微信扫一扫赞赏
  • 6.66
  • 8.88
  • 16.8
  • 2.33
  • 52.0
  • 20.0
  • 自定义
  • 10.0
112/434
114/434

相关文章

文章评论

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

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

    [返回曲谱列表]