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

CSS代码

.blur {

filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */

-webkit-filter: blur(10px); /* Chrome, Opera */

-moz-filter: blur(10px);

-ms-filter: blur(10px);

filter: blur(10px);

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */

}

HTML部分

<img src="mm1.jpg" class="blur" />

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

CSS3中毛玻璃效果的使用方法的更多相关文章

  1. iOS 毛玻璃效果的实现方法

    iOS开发中有的时候需要将图片设置模糊,来实现特定的效果获取更好的用户体验, iOS7之后半透明模糊效果得到大范围使用的比较大,现在也可以看到很多应用局部用到了图片模糊效果,可以通过高斯模糊和毛玻璃效 ...

  2. iOS毛玻璃效果的实现方法

    ios开发中常常用到的毛玻璃效果实现方法 iOS8以后使用系统里的UIBlurEffect可以实现,UIBlurEffect继承自UIVisualEffect UIBlurEffectStyle有三个 ...

  3. android 中毛玻璃效果的实现

    最近在做一款叫叽叽的App(男银懂的),其中有一个功能需要对图片处理实现毛玻璃的特效 进过一番预研,找到了3中实现方案,其中各有优缺点: 1.如果系统的api在16以上,可以使用系统提供的方法直接处理 ...

  4. css3中新增的样式使用方法

    在PC版开发中由于IE原因,我们很少用到css3,但随着平板和智能手机进入我们的生活,以及现在越来越流行,在手机版和平板版开发中我们就可以大胆的使用了,下面我们探讨常用几个css3属性: 1.css3 ...

  5. CSS3中-webkit-overflow-scrolling: touch 的使用方法详解

    -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止. touch 使用具有回弹效果的滚 ...

  6. view添加毛玻璃效果两种方法

    第一种方法: UIBlurEffect *effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]; UIVisualEffectV ...

  7. 解决css3毛玻璃效果(blur)有白边问题

    做一个登录页,全屏背景图毛玻璃效果,实现方法如下: HTML: <body> <div class="login-wrap"> <div class= ...

  8. 实现iOS7上tableView的切割线像iOS6中的效果

    iOS7上tableView的切割线左边短了一点,要实现和iOS6中的效果还是有方法的,UITableView头文件中个属性: @property (nonatomic)         UIEdge ...

  9. 使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...

随机推荐

  1. 使用php脚本查看已开启的扩展

    php安装时会将扩展包编译进去,对于一个正在运行中的数据库,查看php的扩展开启状况,第一种方式是通过配置文件查看,另外是通过phpinfo函数查看所有的配置,另外是使用php内置函数来查看,通过脚本 ...

  2. [设计模式]&lt;&lt;设计模式之禅&gt;&gt;关于单例模式

     1 我是皇帝我独苗 自从秦始皇确立了皇帝这个位置以后,同一时期基本上就只有一个人孤零零地坐在这个位置.这种情况下臣民们也好处理,大家叩拜.谈论的时候只要提及皇帝,每个人都知道指的是谁,而不用在皇帝前 ...

  3. MySQL 各类日志文件介绍

    日志文件 1.错误日志 ErrorLog 错误日志记录了MyQLServer运行过程中所有较为严重的警告和错误信息,以及MySQLServer每次启动和关闭的详细信息. 在默认情况下,系统记录错误日志 ...

  4. React Native &amp; iframe &amp; WebView

    React Native & iframe & WebView React Native 怎么渲染 iframe 页面 WebView & source html https: ...

  5. Vim-latex 插件 的安装

    ref:https://www.jianshu.com/p/ddd825064062 Vim-latex 插件 1. 安装 Vim-latex 插件是一个强大的Latex插件, 它的安装方法是: 将下 ...

  6. FineUIPro v4.0.0 发布了,全新 CSS3 动画惊艳登场!

    FineUI(专业版)v4.0.0 即将于 2017-10-23 发布! 这个版本将引入了激动人心的 CSS3 动画,只需要开启全局属性 EnableAnimation 即可,先睹为快: 1. 菜单动 ...

  7. day70 cookie &amp; session 前后端交互分页显示

    本文转载自qimi博客,cnblog.liwenzhou.com 概要: 我们的cookie是保存在浏览器中的键值对 为什么要有cookie? 我们在访问浏览器的时候,千万个人访问同一个页面,我们只要 ...

  8. Notes : &lt;Hands-on ML with Sklearn &amp; TF&gt; Chapter 1

    <Hands-on ML with Sklearn & TF> Chapter 1 what is ml from experience E with respect to som ...

  9. mysql变更数据的捕获和入库

    问题:涉及状态的信息,mysql中是update的,缺少中间状态的记录.数据分析中需要这部分数据. 思路:后端服务通过监控某张表的某个字段,根据mysql的binlog文件,还原数据,发送到kafka ...

  10. 【Java面试题】48 GC是什么? 为什么要有GC?

    GC是垃圾收集的意思(Gabage Collection),内存处理是编程人员容易出现问题的地方,忘记或者错误的内存回收会导致程序或系统的不稳定甚至崩溃,Java提供的GC功能可以自动监测对象是否超过 ...