CSS 实现IOS毛玻璃的虚化效果

· 2017-04-19 · # Css

今天不谈php 偶尔闲下来就稍谈下了下css的毛玻璃效果其实这样的效果如果处理的好的话给用户的体验还是非常不错的

介绍

可能我们最初见到的也就是IOS的毛玻璃的效果现在很多的软件例如一些音乐软件在背静虚化上都有处理这其实实现起来并不是一件什么

难事，但对于用户的视觉效果还是很有必要的。我们经常会遇到这样的背景虚化过滤效果。作为一名PHPer 我想一些基本的前端技能还是要有的

所以今天不谈后端就单纯的说下磨砂的这种效果实现最后我会将代码发布到CodePen上

MDN filter说明

我的CodePen笔记地址

CodePen

首先说下CodePen这个平台可能很多人也知道但我想更多人最为熟悉的还是 jsfiddle

这个我们平常用来测试页面的网站很多的demo我们在这里运行以达到自己的想要的效果我在CodePen上已经用了半年多了确实体验不错

特别是做前端的话很多时候你会在这里发现很多设计灵感说起来这明义上是一个代码笔记的意思不过其创新程度确实让人眼前一亮

在CodePen里只提供最新版本的jQuery, MooTools, Prototype框架，且默认不使用任何库这给开发者很大的空间

另外还有一点很重要的就是CodePen的所见即所得这点对于一名程序员来说是一件非常爽的一件事

当然作为现在很多的平台我想更多的还是支持每一位开发者更好的更为自由去交流自己的想法

开始

首先当然新建一个index.html文件为了方便说明在本地就直接新建一个css文件并进行引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Css 实现磨砂效果</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
    <h1>Hello JellyBean</h1>
</div>
</body>
</html>

接下来就是在style.css定义相关的样式

为了最终的效果这里引入一张图片作为背景

body , .main::before {
    background: url("http://i2.muimg.com/567571/63ce92cd55b62c6c.jpg") 0/cover fixed;
}

接着定义一下.main和h1的布局只需放在你需要的网页个位置

.main {
    position: relative;
    top: 12vh;
    margin: auto;
    min-height: 75vh;
    max-height: 440px;
    width: 80%;
    max-width: 680px;
    color: rgba(255, 255, 255, 0.94);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset, 0 1px 1px rgba(0, 0, 0, 0.3);
    text-shadow: 0 1px 1px rgba(25, 25, 25, 0.5);
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
    overflow: hidden;
}

.main > h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    font-size: 3rem;
    margin-top: 0;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

这边只是将这个div相对的放在了屏幕中间而已效果就是这样的最后

接下来其实就是最只要的我们前提是要了解下filter这个属性

filter 函数

filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。

滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)

还有一点需要注意的是

Internet Explorer 不支持 filter 属性。

所以这里我们是在Chrome里进行测试的

filter函数里有几种效果这几种具体的效果很简单在MDN里讲的也挺明白在这我们用到的就是blur

blur 提供了图片的高斯模糊的效果其实filter提供的就是对图像的一个滤镜效果如果结合图像的透明度和阴影效果

那么我们就可以做出一个磨砂的效果

我们现在用到的blur 的值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值

所以我们在.main里可以去加上这个属性:

.main::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -20px;
    -webkit-filter: blur(6px);
    filter: blur(6px);
    -webkit-transition: all .2s ease-in-out, -webkit-filter .8s .22s ease-in-out;
    transition: all .2s ease-in-out, -webkit-filter .8s .22s ease-in-out;
    transition: all .2s ease-in-out, filter .8s .22s ease-in-out;
    transition: all .2s ease-in-out, filter .8s .22s ease-in-out, -webkit-filter .8s .22s ease-in-out;
}

这里我们给出的 filter:blur(6px) 6px 的模糊度为了对比效果我们可以加上一个hover的效果

.main:hover::before {
    -webkit-filter: blur(0);
    filter: blur(0);
}

So 最终的效果: