css3玻璃质感简单实现 css3

【css3玻璃质感简单实现】最近做一个工业看板，自己设计的一款透明玻璃效果，做完之后在网上搜了一下css玻璃效果，看到了很多毛玻璃效果的制作，
这一款很不错，也试着做了一下毛玻璃效果，最终也实现了一款毛玻璃效果，下面为两个中效果显示图。

文章图片

文章图片

对于实现原理，透明玻璃要简单好多，直接是给body加一张背景图，对里面的div设置它的box-shade 和background-color即可主要css

body { height: 100%; box-sizing: border-box; margin: 0; background: url("./images/bg1.jpg") fixed 0 center; background-size: cover; color: #fff; } .content{ width: 100%; min-height: 100%; padding: 10px; box-sizing: border-box; border-radius: 5px; box-shadow: 0 0 0 1px hsla(240,0%,100%,.3) inset, 0 .5em 1em rgba(0, 0, 0, 0.6); text-shadow: 0 1px 1px hsla(240,0%,100%,.5); background-color: rgba(100,100,100,.2); }

而毛玻璃的实现则麻烦好多，需要给。content加一个模糊效果，要用css3的filter里的blur函数，而直接作用在content上就会使内容一起模糊，因此要给content加一个伪类，对它进行模糊效果，主要代码如下

.content { position: relative; min-height: 100%; padding: 10px; border-radius: 5px; background-position: center top; background-size: cover; z-index: 1; box-shadow: 0 0 0 1px hsla(240,0%,100%,.3) inset, .1em .3em 1em rgba(100, 100, 0, 0.6); overflow: hidden; } .content::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-filter: blur(80px); -moz-filter: blur(80px); -ms-filter: blur(80px); -o-filter: blur(80px); filter: blur(80px); z-index: -3; margin: -30px; background-image: url("./images/bg1.jpg"); background-position: center top; background-size: cover; background-attachment: fixed; }

例子路径github，切换css里.content注释部分实现毛玻璃和透明玻璃转换