CSS3实现图片高斯模糊
通过高斯模糊,我们可以让一张普通的图片看起来更加有艺术感。
本文参考于网络文章中图片高斯模糊的技巧。
首先,我们假定这样的元素:
<ul class="tupian"> |
当鼠标指向其中的一个列表项时,未被指向的其他列表的图片都高斯模糊并变灰。
那么,我们可以这样设置:
.tupian:hover li:not(:hover){ |
于是,我们就完成了一个很简单的列表图片激活时完成高斯模糊的效果。
另外,可以将CSS修改为 .tupian:hover li:nth-child(-n+3){}
实现前三张模糊,后三张不模糊。当然,这仅仅是举个例子,说明下 nth-child
的奇妙用法。