使用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改变webkit内核浏览器的滚动条样式
Apr 17 HTML / CSS
CSS+jQuery+PHP+MySQL实现的在线答题功能
Apr 25 HTML / CSS
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
Dec 30 HTML / CSS
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
Jan 17 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 HTML / CSS
Javascript 高级手势使用介绍
Apr 21 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
Aug 22 HTML / CSS
5 个强大的HTML5 API 函数推荐
Nov 19 HTML / CSS
HTML5 Canvas入门学习教程
Mar 17 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
Mar 15 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
Nov 30 HTML / CSS
HTML实现仿Windows桌面主题特效的实现
Jun 28 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 cc攻击代码与防范方法
2012/10/18 PHP
php+ajax实时刷新简单实例
2015/02/25 PHP
分享十款最出色的PHP安全开发库中文详细介绍
2015/03/22 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
thinkphp3.2点击刷新生成验证码
2016/02/16 PHP
PHP检测数据类型的几种方法(总结)
2017/03/04 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
2012/05/14 Javascript
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
JS实现图片翻书效果示例代码
2013/09/09 Javascript
jQuery中first()方法用法实例
2015/01/06 Javascript
浅谈javascript中自定义模版
2015/01/29 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
2016/05/23 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
2016/10/10 Javascript
vue-cli如何添加less 以及sass
2017/07/06 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
JS自定义滚动条效果
2020/03/13 Javascript
nodejs各种姿势断点调试的方法
2020/06/18 NodeJs
[01:05:59]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
Django添加feeds功能的示例
2018/08/07 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
Python tornado上传文件的功能
2020/03/26 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
信号量和自旋锁的区别?如何选择使用?
2015/09/08 面试题
应届生财务管理求职信
2013/11/06 职场文书
大学生撤销处分思想汇报
2014/09/12 职场文书
2014红色之旅心得体会
2014/10/07 职场文书
2015教师见习期工作总结
2014/12/12 职场文书
打架检讨书范文
2015/01/27 职场文书
酒桌上的开场白
2015/06/01 职场文书
婚宴父母致辞
2015/07/27 职场文书
《自己去吧》教学反思
2016/02/16 职场文书
入党申请书怎么写?
2019/06/11 职场文书
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers