github unity 图片切换效果_CSS3图片模糊切换效果
生活随笔
收集整理的這篇文章主要介紹了
github unity 图片切换效果_CSS3图片模糊切换效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
今天我們來分享一款利用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>從最零基礎開始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移動端HTML5的項目實戰【視頻＋工具＋系統路線圖】都有整理，在線解析，學習指導，點：【WEB前端學習圈⑤】
總結
以上是生活随笔為你收集整理的github unity 图片切换效果_CSS3图片模糊切换效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 暗黑三黑化崔斯特姆怎么进去 《暗黑破坏神
- 下一篇： html 对话框 flatballoon