忙里偷闲，最近又在看许多比较酷炫的效果。现在基于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. Swift 里字符串（九）UTF16View

    即以 UTF16 编码的格式来查看字符串. UTF16View 是一个结构体 @_fixed_layout public struct UTF16View { @usableFromInline in ...

  2. 4. Neural Network

    1. 神经网络 首先引入一些便于稍后讨论的新标记: $L$:代表神经网络层数$S_l$:代表第$l$层处理单元的个数$K$:代表多分类中类别种数 2. 前向传播(forward propagation ...

  3. html5聊天案例|趣聊h5|仿微信界面聊天|红包|语音聊天|地图

    之前有开发过一个h5微直播项目,当时里面也用到过聊天模块部分,今天就在之前聊天部分的基础上重新抽离模块,开发了这个h5趣聊项目,功能效果比较类似微信聊天界面.采用html5+css3+Zepto+sw ...

  4. Spring Security构建Rest服务-1100-单机Session管理

    Session失效时间: springboot配置session失效时间,只需要在application.properties里配置 #session超时时间,低于60秒按60秒server.sess ...

  5. Linux的shell script

    Linux的shell script //编辑shell: vi a.sh //子进程运行shell sh a.sh //主线程运行shell source a.sh 相关例子: #!/bin/bas ...

  6. pthon获取word内容之获取表单

    需求:把word里面的表单内容获取 按照规则拼成字符串 转换成类似下面的样子 代码如下: from docx import Document import re def parse_docx(f): ...

  7. C#设计模式系列目录

    http://www.cnblogs.com/libingql/archive/2012/04/16/2451608.html 抽空,学习,加强!

  8. slq 修改表结构

    1.增加列: alter table tableName add columnName varchar(30) 2.修改列类型: alter table tableName alter column  ...

  9. golang prometheus包的使用

    prometheus包提供了用于实现监控代码的metric原型和用于注册metric的registry.子包(promhttp)允许通过HTTP来暴露注册的metric或将注册的metric推送到Pu ...

  10. js便签笔记（1）——说说HTMLCollection、NodeList以及NamedNodeMap

    介绍 在js的dom操作中,除了常用的document.html**Element之外,还有三个集合对象,即HTMLCollection.NodeList以及NamedNodeMap.试看以下操作: ...