忙里偷闲，最近又在看许多比较酷炫的效果。现在基于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实际操作]七、常见概念-(4)范围CGRect的使用详解

    本文将为你演示区域对象CGRect的使用.你可以将区域对象,看作是点对象和尺寸对象的组合 首先导入需要使用到底界面工具框架 import UIKit 然后初始化一个区域对象,它的原点位于(0,0),宽 ...

  2. mysql 练习 和链接 pymysql 练习题

    python操作数据库 1. 查询student表的所有记录 2. 查询student表的第2条到第4条记录 3. 查询所有学生的学号(id).姓名(name)和报读课程(department)的信息 ...

  3. 搭建互联网架构学习--004--centos安装Mysql

    Mysql安装 1. yum安装mysql yum -y install mysql-server 2. 启动mysql服务 启动mysql:service mysqld start 查看mysql的 ...

  4. php 数字 的简单加解密

    转载 <?php /** * 加密解密类 * 该算法仅支持加密数字.比较适用于数据库中id字段的加密解密,以及根据数字显示url的加密. * @author 深秋的竹子 * @email 812 ...

  5. Win7上装CentOS7 双系统

    今天折腾了半天,终于在Win7上把CentOS装上了,Win7和CentOS双系统共存,可自由切换. 你问我为什么不装在虚拟机上,我只能说我的电脑卡得一B. 装机参考: 1.Window7+CentO ...

  6. 《LeetBook》leetcode题解(18) : 4Sum[M]

    我现在在做一个叫<leetbook>的免费开源书项目,力求提供最易懂的中文思路,目前把解题思路都同步更新到gitbook上了,需要的同学可以去看看 书的地址:https://hk029.g ...

  7. Okhttp3上传多张图片同时传递参数

    之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片. 最近做项目,打算换个方法上传图片. Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片. ...

  8. mysql show processlist分析

    mysql> show processlist; +—–+————-+——————–+ | Id | User | Host | db | Command | Time| State | Inf ...

  9. Redis笔记（六）：Java中使用Redis

    Java程序使用Redis 添加依赖包 Maven依赖方式 <dependency> <groupId>redis.clients</groupId> <ar ...

  10. Java虚拟机（一）：JVM简介

    JVM简介 Java虚拟机(JVM)是由Java虚拟机规范定义的,其上运行的是字节码指令集.这种字节码指令集包含一个字节的操作码(opcode),零至多个操作数(oprand),虚拟机规范明确定义了每 ...