使用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 相关文章推荐
CSS3弹性伸缩布局之box布局
Jul 12 HTML / CSS
使用 css3 transform 属性来变换背景图的方法
May 07 HTML / CSS
让IE6支持css3,让 IE7、IE8 都支持CSS3
Oct 09 HTML / CSS
利用css3制作3D样式按钮实现代码
Mar 18 HTML / CSS
css3实现的多级渐变下拉菜单导航效果代码
Aug 31 HTML / CSS
CSS3实现各种图形的示例代码
Oct 19 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
Nov 30 HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
Jun 24 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
Jun 16 HTML / CSS
CSS实现多个元素在盒子内两端对齐效果
Mar 30 HTML / CSS
CSS实现九宫格布局(自适应)的示例代码
Feb 12 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
PHP4.04简明安装
2006/10/09 PHP
php全排列递归算法代码
2012/10/09 PHP
PHP实现的简易版图片相似度比较
2015/01/07 PHP
php生成gif动画的方法
2015/11/05 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
Gambit vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
用js得到网页中所有的div的id
2020/10/19 Javascript
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
javascript 学习之旅 (3)
2009/02/05 Javascript
Js,alert出现乱码问题的解决方法
2013/06/19 Javascript
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
js中indexof的用法详细解析
2013/12/24 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
2017/11/17 Javascript
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
python基础之入门必看操作
2017/07/26 Python
python查看模块,对象的函数方法
2018/10/16 Python
Python对象与引用的介绍
2019/01/24 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
Python3爬虫ChromeDriver的安装实例
2021/02/06 Python
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
介绍一下Ruby的特点
2013/01/20 面试题
电脑教师的自我评价
2013/12/18 职场文书
硕士研究生自我鉴定范文
2013/12/27 职场文书
保研推荐信
2014/05/09 职场文书
社团个人总结范文
2015/03/05 职场文书
成事在人观后感
2015/06/16 职场文书
男人帮观后感
2015/06/18 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
pytorch显存一直变大的解决方案
2021/04/08 Python
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python
Element实现动态表格的示例代码
2021/08/02 Javascript