CSS3实现图片高斯模糊

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

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

首先,我们假定这样的元素:

<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 的奇妙用法。

NOOLDEY

本文作者:NOOLDEY

做一个诗情画意的码农,皮皮猪,我们走!

原文链接: http://zhuweisheng.com.cn/html/css3-Gaussian-blur/

本站文章如无特殊声明均为原创,创作不易,转载请注明来源,谢谢!