忙里偷闲，最近又在看许多比较酷炫的效果。现在基于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. git小白使用教程（一）

    本文所涉及命令基本可以涵盖日常开发场景, 对于开发者平时很少使用的命令不再列举,这样不至于让刚刚使用git的小伙伴们看的脑袋大...如有特殊使用可以联系我单独回复. 首先通过一张图了解git的工作流程 ...

  2. Web应用配置虚拟主机(www.baidu.com)

    最终效果:浏览器地址栏输入www.baidu.com访问时,会显示自己的网页 1.创建文件 任意盘新建一个www.baidu.com文件,在该文件夹下新建WEB-INF文件.自己写的一个html文件, ...

  3. 【BZOJ3143】【HNOI2013】游走 高斯消元

    题目传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=3143 我们令$P_i$表示从第i号点出发的期望次数.则$P_n$显然为$0$. 对于$P ...

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

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

  5. Jsp页面用ajax传输json数组的方法

    详细参考jquery的API 这里主要展示实例,即写法 <%@ page language="java" contentType="text/html; chars ...

  6. JDK1.10+scala环境的搭建之linux环境（centos6.9）

    ---恢复内容开始--- 第一步:安装jdk1.10版本 进入网页 http://oracle.com/technetwork/java/javase/downloads/index.html  下载 ...

  7. 【树】Kth Smallest Element in a BST（递归）

    题目: Given a binary search tree, write a function kthSmallest to find the kth smallest element in it. ...

  8. sql日期格式处理

    sql server中使用convert来取得datetime数据类型样式(全) 日期数据格式的处理,两个示例: CONVERT(varchar(16), 时间一, 20) 结果:2007-02-01 ...

  9. Linux笔记：linux常用命令

    文件目录操作 1.展示目录命令 ls # 展示当前目录下的可见文件 ls -a # 展示当前目录下所有的文件(包括隐藏的文件) ls -l # 展示当前目录下文件的详细信息 ll # 展示当前目录下文 ...

  10. asterisk与freepbx常用的命令

    asterisk 常用命令: 通过asterisk -r 连接我们的asterisk. 在CLI中常用的命令: sip show peers 显示所有的SIP peers(包括friends) sip ...