CSS3如何实现图片模糊切换效果
短信预约 -IT技能 免费直播动态提醒
这篇文章将为大家详细讲解有关CSS3如何实现图片模糊切换效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
<!DOCTYPE html>
<html>
<head>
<title>css3图片过滤效果 </title>
<style>
body{
background: #eee;
}
.gallery{
list-style: none;
margin: 50px auto; padding: 0;
width: 642px;
font-size: 0;
}
.gallery li{
display: inline-block;
*display: inline;
zoom: 1;
width: 200px; height: 150px;
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;
}
.gallery: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;
}
#about{
color: #999;
text-align: center;
font: 0.9em Arial, Helvetica;
}
#about a{
color: #777;
}
</style>
</head>
<body>
<ul class="gallery">
<li><img class="lazy" data-src="1.jpg"></li>
<li><img class="lazy" data-src="2.jpg"></li>
<li><img class="lazy" data-src="3.jpg"></li>
<li><img class="lazy" data-src="4.jpg"></li>
<li><img class="lazy" data-src="5.jpg"></li>
<li><img class="lazy" data-src="6.jpg"></li>
</ul>
<div style="margin: 0 auto; text-align:center"><a href="http://bbs.zzfriend.com" target="_blank" title="bbs.zzfriend.com">编程网</a></div>
</body>
</html>关于“CSS3如何实现图片模糊切换效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
