CSS3图片模糊切换效果

最新推荐文章于 2024-04-26 22:25:00 发布

猿说前端

最新推荐文章于 2024-04-26 22:25:00 发布

阅读量283

点赞数

文章标签： css html 前端 Web前端前端教程

本文链接：https://blog.csdn.net/ITZ1992/article/details/106200645

版权

今天我们来分享一款利用CSS3技术让图片模糊的效果，我们只需要将鼠标滑过图片，就可以让图片产生模糊的特效，利用CSS3实现图片模糊效果也非常简单，用CSS3中的filter属性即可，针对不同浏览器用-webkit-filter、-moz-filter、-o-filter和-ms-filter。

<!DOCTYPE html>
<html>
<head>
<title>css3图片过滤效果 </title>
<style>
body{
background: #eee;
}
.gallery{
list-style: none;
margin: 50px auto; padding: 0;
width: 642px; /* (200+10+4)x3 */
font-size: 0; /* fix inline-block spacing */
}
.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; /* fallback */
}
/* Demo page only */
#about{
color: #999;
text-align: center;
font: 0.9em Arial, Helvetica;
}
#about a{
color: #777;
}
</style>
</head>
<body>
<ul class="gallery">
<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>
<div style="margin: 0 auto; text-align:center"><a href="http://bbs.zzfriend.com" target="_blank" title="bbs.zzfriend.com">前端技术学习群：784783012</a></div>
</body>
</html>

从事全栈6年，专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节，互相交流学习，不停更新最新的教程和学习技巧（网页制作，网站开发，web开发，从0基础开始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移动端HTML5的项目实战【视频＋工具＋系统路线图】全栈工程师学习路线以及规划都有整理，分享给小伙伴）点：学习前端，我们是认真的

猿说前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3图片模糊切换效果

今天我们来分享一款利用CSS3技术让图片模糊的效果，我们只需要将鼠标滑过图片，就可以让图片产生模糊的特效，利用CSS3实现图片模糊效果也非常简单，用CSS3中的filter属性即可，针对不同浏览器用-webkit-filter、-moz-filter、-o-filter和-ms-filter。<!DOCTYPE html><html><head><title>css3图片过滤效果 </title><style>body{
复制链接

扫一扫