忙里偷闲，最近又在看许多比较酷炫的效果。现在基于jquery的插件比较多，但是很多插件的兼容性不是太好，所以原生的才是王道。在日常当中，毛玻璃已经不常见了，那是一个很久远年代的东西了。诺，下面就是毛玻璃：

哈哈，不闲扯了，接下来不如正题吧，先看一下终极效果：

嗯，好了，，开始我们的步骤吧：

第一步：进行页面的基本搭建：

我在body上设置了一张大大的背景图，然后中间部分是一个div,html代码如下：

<body>

<div >

    iPhone 7 dramatically improves the most important aspects of the iPhone experience. It introduces advanced new camera systems. The best performance and battery life ever in an iPhone. Immersive stereo speakers. The brightest, most colorful iPhone display. Splash and water resistance.1 And it looks every bit as powerful as it is. This is iPhone 7.

</div>

</body>

　　文字多是为了撑开div使其效果更明显

css的代码如下：

   body {

            min-height: 100vh;

            box-sizing: border-box;

            margin: 0;

            padding-top: calc(50vh - 6em);

            font: 150%/1.6 serif;

            background: url("http://www.jackzxl.net/wp-content/MyFile/2016/09/iphone.jpg") fixed 0 center;

            background-size: cover;

        }

        div {

            margin: 0 auto;

            padding: 1em;

            max-width: 30em;

            border-radius: 0.3em;

            box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,

            0 .5em 1em rgba(0, 0, 0, 0.6);

            text-shadow: 0 1px 1px hsla(0,0%,100%,.3);

            background: hsla(0,0%,100%,.3);

        }

看上面的样式代码，body里面，vh为视口大小，100为100%，background设置的为固定位置，铺满整个元素；在div当中，居中设置背景色然后设置其盒子样式；然后是这个样子滴：

　

亮堂堂的小透明玻璃就这么出来了，那么开始我们的毛玻璃加工吧

第二步：背景模糊的毛玻璃设置

在css当中，有同一个关于模糊度的设置，为

filter: blur(20px);

后面的数值为模糊度的大小，数值越大越模糊啊，但是目前只支持px,不支持百分比；

我们直接给div加这个样式是不行的，因为这样会连子都变得模糊，这个时候我们可以利用伪元素，即::before；

我们使用伪元素之前，需要给div加一个相对定位，由于伪元素使用模糊度以后会溢出整个div盒子，为了美观漂亮大气上档次，我们需要给div加overflow:hidden；即：

  overflow: hidden;

  position: relative;

　div的伪元素：

   div::before{

            content: '';

            position: absolute;

            top: 0; right: 0; bottom: 0; left: 0;

            z-index: -1;

            filter: blur(20px);

            margin: -20px;

            background: url("http://www.jackzxl.net/wp-content/MyFile/2016/09/iphone.jpg") fixed 0 center;

            background-size: cover;

        }

　　在上面的css代码中我们可以看出，设置的模糊度，和div是重叠的，背景图也是和body一样的，最终效果如下：

利用css3制作毛玻璃的效果的更多相关文章

  1. 利用CSS3制作淡入淡出动画效果

    CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致. 利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态 ...

  2. 学习使用 jQuery & CSS3 制作照片堆栈效果

    在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个 ...

  3. 3D Grid Effect – 使用 CSS3 制作网格动画效果

    今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...

  4. 纯CSS3制作的“Ribbons”效果

    在看具体每个demo之前,我们一起来看下面一个截图: 上图是一个典型的“Ribbons”各部位的示意图,但每一个“Ribbons”并不会都使用上图示意的各个部分,在下面的实例中大家可以明显的看 到或者 ...

  5. 利用css3制作的几个loading图

    先看图,多数是从别人那里看的效果直接仿的,先开随笔,有了创意继续加 其实3个之后,脑子里立刻有个第四个的制作思路,无外乎是利用border或者块元素变形,然后构思好接下来的行为,写起来也非常简单,5个 ...

  6. 利用CSS3制作网页动画

    如何在网页中实现动画效果动态图片 flashjavascriptcss3变形是一些效果的集合如平移 旋转 缩放 倾斜效果每个效果都可以称为变形(transfrom) 它们可以分别操控元素发生平移.旋转 ...

  7. 利用OpacityMask制作打洞效果

    起因 项目上存在一个连线功能,在设计的原型中,在连线中间文字上下各有15像素的空白.接手的同事觉得没思路,问我能不能在不影响连线后面的背景情况下解决该问题.我就抽了点时间给他写了个Demo.回家后趁热 ...

  8. 分享一个利用HTML5制作的海浪效果代码

    在前面简单讲述了一下HTML里的Canvas,这次根据Canvas完成了“海浪效果”(水波上升). (O(∩_∩)O哈哈哈~作者我能看这个动画看一下午) 上升水波.gif 动画分析构成:贝塞尔曲线画布 ...

  9. 第九章 利用CSS3制作网页动画

    一.CSS3变形transform 1.平移:translate(x,y) translateX(x) translateY(y) 注意:如果想只向X轴平移那么可以translateX,如果想只向X轴 ...

随机推荐

  1. mysql编写存储过程（1）

    存储过程:其实就是存储在数据库中,有一些逻辑语句与SQL语句组成的函数.由于是已经编译好的语句,所以执行速度快,而且也安全. 打开mysql的控制台,开始编写存储过程. 实例1: 编写存储过程: 执行 ...

  2. Servlet中相对路径与绝对路径

    相对路径与绝对路径: 相对路径:相对路径指的是相对于当前文件所在目录的路径! http://localhost:8080/servlet01/ http://localhost:8080/servle ...

  3. Swift 里字符串（四）large sting

    对于普通的字符串,对应的_StringObject 有两个存储属性: _countAndFlagsBits: UInt64 _object: Builtin.BridgeObject _countAn ...

  4. C#4.0使用dynamic 动态添加属性

    最近做一个项目,用wpf mvvm实现,而前台表格需要根据数据库某表的设置不同生成不同的列名.过去用winform和Ado.net实现这种功能的时候就只需要拼装DataTable,拼成最后需要的表格, ...

  5. 服务器集群的session管理

    应用服务器的高可用架构设计主要基于服务无状态这一特性,但是事实上,业务总是有状态的,单机情况下,Session可由部署在服务器上的web容器(如Jboss)管理.在使用负载均衡的集群环境中,由于负载均 ...

  6. Shell之expect的测试

    测试:./sshLogin.sh Slave1 caipeichao 1qaz@WSX hadoop lk198981 HadoopCluster #!/usr/bin/expect -f #auto ...

  7. WSGI学习系列WebOb

    1. WSGI Server <-----> WSGI Middleware<-----> WSGI Application  1.1 WSGI Server wsgi ser ...

  8. ubuntu编译安装ruby1.9.3，从p551降级到p484

    在升级redmine的时候遇到ruby版本适配的问题.找了些资料. ruby安装包除了官方网站,可以参考 http://ftp.ruby-lang.org/pub/ruby/1.9/ 需要从1.9.3 ...

  9. SPSS学习系列之SPSS Text Analytics是什么？

    不多说,直接上干货! IBM® SPSS® Text Analytics 是一个IBM® SPSS® Modeler 完全集成内插式插件,它采用了先进语言技术和Natural Language Pro ...

  10. Tomcat配置https、访问http自动跳转至https

    1.配置Tomcat,打开$CATALINA_HOME/conf/server.xml,修改如下 <Connector port="8080" protocol=" ...