<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3图片模糊过滤特效-岳瑞涛</title>
<style>
* {
background-color: #00DD00;
}
.yrt img{
width:300px; height:300px;
padding-top: 200px;
}
.yrt{
list-style: none;
margin: 50px auto; padding: 0;
width: 945px; /* (300+10+5)x3 */
font-size: 0; /* fix inline-block spacing */
}
.yrt li{
display: inline-block;
display: inline;
zoom: 1;
width: 200px; height: 150px;
margin: 2px;
-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;
}
.yrt: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>
<ul class="yrt">
<li>
<img src="1.jpg"></li>
<li>
<img src="2.jpg"></li>
<li>
<img src="3.jpg"></li>
</ul>
</body>
</html>
css3图片模糊过滤特效
最新推荐文章于 2020-07-08 17:23:20 发布