【UI特效】CSS3图片模糊切换效果
- 2019 年 12 月 5 日
- 筆記
今天我们来分享一款利用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">html5-html5_css3教程-基于html5手机app开发技术交流平台</a></div> </body> </html>
