使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法


Posted in HTML / CSS onJuly 08, 2016

今天在使用icloud的时候看到苹果icloud官网的毛玻璃效果非常赞,仔细研究了一下它的实现方式,是使用js配合background-image: -webkit-canvas的形式绘制出的毛玻璃背景图片。
不过今天又仔细研究了一下css3中的blur方法,可以实现同样的效果。且配合JS可以实现模糊缩放的效果

基础
先来看一下blur属性的表达式:

CSS Code复制内容到剪贴板
  1. filter:blur(add=add,direction,strength=strength)  

我们看到blur属性有三个参数:add、direction、strength。
Add参数有两个参数值:true和false。意思是指定图片是否被改变成模糊效果。

 

Direction参数用来设置模糊的方向。模糊效果是按照顺时针方向进行的。其中0度代表垂直向上,每45度一个单位,默认值是向左的270度。角度方向的对应关系见下表:
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法

实例
CSS代码

CSS Code复制内容到剪贴板
  1. .blur {    
  2.     filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */  
  3.        
  4.     -webkit-filter: blur(10px); /* Chrome, Opera */  
  5.        -moz-filter: blur(10px);   
  6.         -ms-filter: blur(10px);       
  7.             filter: blur(10px);   
  8.        
  9.     filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */  
  10. }  

HTML部分

XML/HTML Code复制内容到剪贴板
  1. <img src="mm1.jpg" class="blur" />  

其中blur(10px)中的大小决定了模糊后的图片大小和模糊程度

HTML / CSS 相关文章推荐
css动画效果之animation的常用样式
Mar 09 HTML / CSS
CSS3字体效果的设置方法小结
Jun 13 HTML / CSS
css3实现的下拉菜单效果示例
Jan 22 HTML / CSS
CSS3感应鼠标的背景闪烁和图片缩放动画效果
May 14 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
Jun 02 HTML / CSS
深入理解css中vertical-align属性
Apr 18 HTML / CSS
CSS3 实现发光边框特效
Nov 11 HTML / CSS
微信浏览器左上角返回按钮拦截功能
Nov 21 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
Jan 06 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
Oct 16 HTML / CSS
canvas线条的属性详解
Mar 27 HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
Aug 14 HTML / CSS
分享CSS3制作卡片式图片的方法
Jul 08 #HTML / CSS
CSS3制作缩略图的详细过程
Jul 08 #HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 #HTML / CSS
css3media响应式布局实例
Jul 08 #HTML / CSS
使用CSS3的ruby-position固定注音位置的用法示例
Jul 05 #HTML / CSS
CSS3中Transition动画属性用法详解
Jul 04 #HTML / CSS
CSS3中Animation动画属性用法详解
Jul 04 #HTML / CSS
You might like
php获取YouTube视频信息的方法
2015/02/11 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
window.showModalDialog使用手册
2007/01/11 Javascript
javascript URL编码和解码使用说明
2010/04/12 Javascript
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
判断iframe里的页面是否加载完成
2014/06/06 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
2019/06/12 Javascript
微信小程序 调用微信授权窗口相关问题解决
2019/07/25 Javascript
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
js实现随机div颜色位置 类似满天星效果
2019/10/24 Javascript
跟老齐学Python之??碌某?? target=
2014/09/12 Python
在Django的上下文中设置变量的方法
2015/07/20 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
python各层级目录下import方法代码实例
2020/01/20 Python
python实现ftp文件传输功能
2020/03/20 Python
Python count函数使用方法实例解析
2020/03/23 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
C和C++经典笔试题附答案解析
2014/08/18 面试题
软件配置管理有什么好处
2015/04/15 面试题
公司人力资源的自我评价
2014/01/02 职场文书
中学家长会邀请函
2014/01/17 职场文书
目标责任书范本
2014/04/16 职场文书
优秀团员自我评价范文
2014/04/23 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
部门优秀员工推荐信
2015/03/24 职场文书
死者家属慰问信
2015/03/24 职场文书
领导干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫