CSS3实现图片高斯模糊

2015-09-13 Views

通过高斯模糊，我们可以让一张普通的图片看起来更加有艺术感。

本文参考于网络文章中图片高斯模糊的技巧。

首先，我们假定这样的元素：

<ul class="tupian">  
   <li><img src="1.jpg"></li>  
   <li><img src="2.jpg"></li>  
   <li><img src="3.jpg"></li>  
   <li><img src="4.jpg"></li>  
   <li><img src="5.jpg"></li>  
   <li><img src="6.jpg"></li>        
</ul>

当鼠标指向其中的一个列表项时，未被指向的其他列表的图片都高斯模糊并变灰。
那么，我们可以这样设置：

.tupian:hover li:not(:hover){
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px) grayscale(1);
    -o-filter: blur(3px) grayscale(1);
    -ms-filter: blur(3px) grayscale(1);
    filter: blur(3px) grayscale(1);
}

于是，我们就完成了一个很简单的列表图片激活时完成高斯模糊的效果。

另外，可以将CSS修改为 .tupian:hover li:nth-child(-n+3）{}实现前三张模糊，后三张不模糊。当然，这仅仅是举个例子，说明下 nth-child 的奇妙用法。