基于CSS3实现图片模糊过滤效果

先给大家展示下效果图，如果和你想象的效果一样请继续往下看。

css3图片过滤效果，鼠标放上后其它图片模糊，鼠标所在位置的图片是清淅的，有效索引出当前的图片，对图片的模糊处理是本特效的亮点，你完全可以将模糊的效果应用于其它的图片特效中，你同样也可借此代码研究一下HTML5中的CSS3技术。

代码如下所示：

1.   
2.   
3.   
4.        
5.        
6.        
7. .keleyi img{ width:200px; height:200px;}   
8.     .keleyi{   
9.       list-style: none;   
10.       margin: 10px auto; padding: 0;   
11.       width: 642px;   
12.       font-size: 0;   
13.     }   
14.     .keleyi li{   
15.         display: inline-block;   
16.         *display: inline;   
17.         zoom: 1;   
18.         width: 200px; height: 200px;   
19.         margin: 2px;   
20.         border: 5px solid #fff;   
21.         -moz-box-shadow: 0 2px 2px rgba(0,0,0,.1);   
22.         -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.1);   
23.         box-shadow: 0 2px 2px rgba(0,0,0,.1);   
24.         -webkit-transition: all .3s ease;   
25.         -moz-transition: all .3s ease;   
26.         -ms-transition: all .3s ease;   
27.         -o-transition: all .3s ease;   
28.         transition: all .3s ease;          
29.     }   
30.     .keleyi:hover li:not(:hover){         
31.         -webkit-filter: blur(2px) grayscale(1);   
32.         -moz-filter: blur(2px) grayscale(1);   
33.         -o-filter: blur(2px) grayscale(1);   
34.         -ms-filter: blur(2px) grayscale(1);   
35.         filter: blur(2px) grayscale(1);   
36.         opacity: .7;           
37.     }   
38.      
39.   
40.   
41.     "width: 736px; margin: 0px auto;">css3图片模糊过滤特效·柯乐义   
42.         请使用支持CSS3的浏览器,移动光标到图片上。 "http://keleyi.com/a/bjad/yin8b5eb.htm" target="_blank">原文   
43.        
44.        
45.         
46.   
47.             
    
    
  
48.         
49.   
50.             
    
    
  
51.         
52.   
53.             
    
    
  
54.        
55.   
56.   

以上代码就是本文的全部内容，代码简单易懂，相信大家都可以看得懂吧，有任何问题欢迎随时给我留言，我会在第一时间和大家联系的。谢谢大家一直以来对考高分网网站的支持，有你们的关注我们会做的更好，谢谢！