利用CSS3实现毛玻璃效果示例源码
发布时间：2016-09-25 17:25:54 作者：张歆琳 
我要评论
我要评论相信大家都知道毛玻璃效果做的好的话，能使页面显得非常生动立体，整体效果非常好，下面我们就来学习下如何利用CSS3实现毛玻璃效果。
先来看看效果图
复制代码
代码如下:body {
min-height: 100vh;
box-sizing: border-box;
margin: 0;
padding-top: calc(50vh - 6em);
font: 150%/1.6 serif;
background: url("iphone.jpg") fixed 0 center;
background-size: cover;
}
main {
margin: 0 auto;
padding: 1em;
max-width: 30em;
border-radius: .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);
}</p> <p><main>……</main>
去掉那些式样方面的代码，上面实现毛玻璃效果的核心代码如下：
复制代码
代码如下:body {
…
background: url("iphone.jpg") fixed 0 center;
background-size: cover;
}
main {
…
background: hsla(0,0%,100%,.3);
}
当然这个效果离我们的期望还有点距离，因为单纯的30%的透明度会让文字变的难以阅读。对页面来说背景图只是起美化作用，文字才是最核心的。你可以增大透明度的百分比，但这样页面会显得很死板。为了让文字便于阅读，又保持页面的生动活泼，可以对上面的mian标签的背景做模糊处理。
你可能尝试blur滤镜，但可惜的是效果不对：
复制代码
代码如下:main {
…
-webkit-filter: blur(3px);
filter: blur(3px);
}
用blur滤镜会将文字也模糊掉，更看不清了，只能放弃。正确的做法是给mian标签增加伪元素::before，在伪元素上使用blur滤镜：（为了效果演示，加上了红色背景色）
复制代码
代码如下:main {
position: relative;
…
}
main::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
-webkit-filter: blur(20px);
filter: blur(20px);
background: rgba(255,0,0,.5);
}
可以看出blur效果是出来了，但导致了两个问题。首先由于blur出现了外阴影，这个比较好解决，只要加上overflow: hidden;就行了。其次四周20px的模糊半径范围内模糊效果会逐渐消退。如果对此比较介意，想让四周的模糊效果和中间一样，可以将伪元素尺寸外扩20px，为了保险起见，可以稍微再外扩一点到30px：
复制代码
代码如下:main {
…
overflow: hidden;
}
main::before {
…
margin: -30px;
}
最后将伪元素的红色背景色替换成body的背景图即可，效果如下。
总结
以上就是CSS3实现毛玻璃效果的全部内容，希望能对大家的学习或者工作带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
相关文章
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
CSS3的blur属性可以将图片加上模糊滤镜的效果,下面我们就来详细看一下使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法,需要的朋友可以参考下2016-07-08- 毛玻璃其实就是磨砂玻璃，能够模糊的看清背后的风景，让人感觉有种朦胧美，让界面看上去有些层次感，对毛玻璃感兴趣的小伙伴们可以参考一下2015-12-21
- 这篇文章主要介绍了css实现照片模糊效果类似毛玻璃效果,需要的朋友可以参考下2014-04-08
jQuery实现花瓣网毛玻璃模糊背景特效源码是一款个性的毛玻璃模糊特效下载。本段代码适应于所有网页使用，有需要的朋友可以直接下载使用2016-07-06
这是一款基于html5 svg实现的仿花瓣网毛玻璃模糊背景效果源码。背景是图片的模糊显示效果，画面中心则是图片的圆形缩略显示图2016-07-04- 今天小编为大家分享PS制作漂亮的毛玻璃背景效果方法，教程制作出来的毛玻璃效果非常漂亮，难度不是很大，介绍地也很详细，好了，我们一起来学习吧2016-06-11
- 随着ios7风格越来越普及,其中毛玻璃的效果很容易出现在我们的设计中,在网上看到不少制作毛玻璃效果的方法,而最近苹果发布的ios9也让很多国人兴奋不已。下面小编就为大家介2015-09-21
- 想做像WIN7，VISTA系统的那种玻璃效果吗？想用Fireworks作出透明玻璃的导航条吗？本文将讲述如何使用Fireworks实现简单玻璃导航效果2012-11-13
最新评论