<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<html xmlns=
"http://www.w3.org/1999/xhtml"
>
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title>css3图片模糊过滤特效-柯乐义</title>
<style>
.keleyi img{ width:200px; height:200px;}
.keleyi{
list-style: none;
margin: 10px auto; padding: 0;
width: 642px;
/* (200+10+4)x3 */
font-size: 0;
/* fix inline-block spacing */
}
.keleyi li{
display: inline-block;
*display: inline;
zoom: 1;
width: 200px; height: 200px;
margin: 2px;
border: 5px solid #fff;
-moz-box-shadow: 0 2px 2px rgba(0,0,0,.1);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.1);
box-shadow: 0 2px 2px rgba(0,0,0,.1);
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.keleyi:hover li:not(:hover){
-webkit-filter: blur(2px) grayscale(1);
-moz-filter: blur(2px) grayscale(1);
-o-filter: blur(2px) grayscale(1);
-ms-filter: blur(2px) grayscale(1);
filter: blur(2px) grayscale(1);
opacity: .7;
/* fallback */
}
</style>
</head>
<body>
<div style=
"width: 736px; margin: 0px auto;"
><h2>css3图片模糊过滤特效·柯乐义</h2>
请使用支持CSS3的浏览器,移动光标到图片上。 <a href=
"http://keleyi.com/a/bjad/yin8b5eb.htm"
target=
"_blank"
>原文</a>
</div>
<ul
class
=
"keleyi"
>
<li>
<img src=
"http://keleyi.com/image/a/mdvii14p.jpg"
></li>
<li>
<img src=
"http://keleyi.com/image/a/968oqhtf.jpg"
></li>
<li>
<img src=
"http://keleyi.com/image/a/crgi0c5y.jpg"
></li>
</ul>
</body>
</html>