利用css3制作毛玻璃的效果

忙里偷闲,最近又在看许多比较酷炫的效果。现在基于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一样的,最终效果如下:

时间: 2024-10-23 09:31:32

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

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

CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致. 利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态效果,由CSS3来驱动产生动画效果. 下面讲解一下如何利用CSS3制作淡入淡出的动画效果.具体实例可参考刚进入本站时的淡入效果. 1. 定义动画,名称为fadeIn @-webkit-keyframes fadeIn { 0% { opacity: 0; /*初始状态 透明度为0*/ } 50% {

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

今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的??.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此创建了两个演示,分别演示垂直和水平旋转网格项. 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 您可能感兴趣的相关文章 创意无限!一组网页边栏过渡动画[附源码下载] 真是好东西!13种非常动感的页面加载动画效果 你见过吗?9款超炫的

学习使用 jQuery &amp; CSS3 制作照片堆栈效果

在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个动作类似现实世界的行为. 在线演示      源码下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载] 12款经典的白富美型

纯CSS3制作的圆角效果按钮菜单

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>纯CSS3制作的圆角效果按钮菜单丨曲阳雕塑</title> <style type="text/css"> nav{display: block; width: 100%; ov

纯CSS3制作的“Ribbons”效果

在看具体每个demo之前,我们一起来看下面一个截图: 上图是一个典型的“Ribbons”各部位的示意图,但每一个“Ribbons”并不会都使用上图示意的各个部分,在下面的实例中大家可以明显的看 到或者说感受到.别的我就不多说了,我想上图能示意出“Ribbons”各个部位.那么每个部位我们可以使用一个“html”标签,当然有了CSS3的伪 元素“::before”和“::after”后,我们可以省去一些标签. 效果一: HTML Markup <div class="ribbons"

利用css3制作旋转动画

利用css3功能强大,我们可以直接完成旋转动画的制作,而跳过复杂的javascript. html代码如下:demo01.html   <!DCTYPE html>       <head>           <meta type="utf-8"/>           <title>旋转动画</title>           <link rel="stylesheet" type="t

利用css3制作网页动画的解析

一.CSS3变形 CSS3变形是一些效果的集合 如平移.旋转.缩放.倾斜效果 每个效果都可以称为变形(transform),它们可以分别操控元素发生平移.旋转.缩放.倾斜等变化 二.CSS3位移:translate <style type="text/css"> li a:hover{ transform: translate(10px,10px); transform: translateX(10px); transform: translateY(10px); } &l

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

一.CSS3变形 CSS3变形是一些效果的集合    如平移.旋转.缩放.倾斜效果    每个效果都可以称为变形(transform),它们可以分别操控元素发生平移.旋转.缩放.倾斜等变化 二.CSS3位移:translate <style type="text/css"> li a:hover{       transform: translate(10px,10px);       transform: translateX(10px);       transform

HTML5 CSS3制作正方体3D效果

随着HTML5 CSS3的出现和发展,使得我们的网页可以实现更加复杂的效果,也使得我们的浏览体验更加丰富,所以今天我们将制作一个正方体的3D效果: 正方体需要六个面:那么我们就写一个ul列表,里面有六个li分别代表着正方体的六个面,而最外层的ul则可以作为这个正方体的参照物,代码如下: <ul> <li></li> <li></li> <li></li> <li></li> <li>&l