如何使用CSS打造毛玻璃效果

html-css014

如何使用CSS打造毛玻璃效果,第1张

其实毛玻璃的模糊效果技术上比较简单,只是用到了 css 滤镜(filter)中的 blur 属性。

1. 对元素直接使用模糊会将其内容全部模糊掉,为了保证文字不会模糊掉需要多一个层单独应用模糊效果。

2. 模糊效果并不会应用到其背后的元素上,所以需要使用 content 区域有和背景相同的背景图并进行模糊。

所谓的毛玻璃效果其实是半透明+模糊,可以用CSS filter实现。

时间不多,就抛个砖,题主可以自己找一下文档和更多案例。

filter - CSS

div {

-moz-filter: blur(5px)

-webkit-filter: blur(5px)

-o-filter: blur(5px)

-ms-filter: blur(5px)

filter: blur(5px)

}

大体思路是,当出现弹出层的时候,对背景层增加blur filter,再给弹出层的一定透明度就可以了。

因为有同学坚持说 CSS filter 只能用于图片,所以录了一个小视频,证明它是可以用于可视的DOM元素的。

在 codepen 上找了一个栗子,是通过CSS filter + JS复制滚动元素实现的毛玻璃 Nav Bar 效果,也可以说明,这个属性真的不是只能作用于图片,也不需要“截屏”啊。