這篇文章將為大家詳細講解有關CSS3如何實現圖片模糊切換效果,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
<!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">億速云</a></div> </body> </html>
關于“CSS3如何實現圖片模糊切換效果”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。