如何利用HTML5和CSS3代码实现模糊滤镜

html-css010

如何利用HTML5和CSS3代码实现模糊滤镜,第1张

第一步,打开HBuilder工具,新建静态页面blur.html,如下图所示:

第二步,在<body></body>插入一个<div></div>,再在div元素里插入五个img元素,分别设置为class,如下图所示:

第三步,设置五个img元素的样式,图片高度和宽度为250px,如下图所示:

第四步,预览该静态页面,在浏览器中查看页面效果,如下图所示:

第五步,分别设置class为two、three、four和five的样式,如下图所示:

6

第六步,再次预览该静态页面,利用IE浏览器查看效果,如下图所示:

所谓的毛玻璃效果其实是半透明+模糊,可以用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 效果,也可以说明,这个属性真的不是只能作用于图片,也不需要“截屏”啊。