標籤：style blog http color 使用 os io strong
各位網友，大家好，我是陌上花會開，人稱陌陌，在上一篇文章《CSS3實戰開發: 手把手教大家實戰開發滑鼠划過圖片動畫特效》 中，我已經手把手帶領大家開發了一個滑鼠滑過時的動畫特效。
這篇文章裡，我將再帶領大家開發另一個動畫特效，希望大家能得到啟發。還是一如往常，我不提供源碼下載，但是可以保證：只要是將本教程中的代碼，一步步複製到本地，定會得到樓主同樣的運行效果。
好了，廢話少說，直接進入今天的學習。樓主是個愛偷懶的人，所以我還是利用上一篇文章中的素材。
首先，我們先看一下今天需要實現的特效：
1. 滑鼠划過前：
2. 滑鼠划過時，先平滑顯示灰色遮蓋物背景，接著平滑過渡顯示搜尋表徵圖：
看完了，直接進入本篇的CSS3實戰之旅吧！
首先，我們編輯html代碼:
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="styles"> <meta name="keywords" content="css,css3,滑鼠划過動畫效果,css3實戰開發,css3案例" /> <title>css3實現滑鼠划過圖片時效果(1)</title> </head> <body> <a href="http://www.itdriver.cn">實戰互連網</a> <div class="container"> <div class="photowall"> <div class="photoview"> <a href="http://www.itdriver.cn"><img src="img01.jpg" width="320" height="200" /></a> <div class="mask"><a href="http://www.itdriver.cn">實戰互連網</a></div> </div> <div class="photoview"> <a href="http://www.itdriver.cn"><img src="img02.jpg" width="320" height="200" /></a> <div class="mask"><a href="http://www.itdriver.cn">實戰互連網</a></div> </div> </div> </div> </body></html>
我們根據上面的，大概可以知道要對哪幾個div應用樣式：
1. 給牆按上背景紙;
2.給照片應用樣式，實現內邊距補白;
3.設定一遮蓋層;
好了，既然知道需要做哪些樣式了，直接進入樣式編碼吧！
我們首先給container設定樣式，使容器置中顯示，代碼如下:
*{ /* 清空所有元素內外邊距*/ margin:0; padding:0;}html,body,.container{ /*設定container高度瀏覽器自適應*/ height:100%; }.container { /*設定container容器樣式*/ width:80%; margin:auto; padding:10px;}
緊接著，我們給照片牆應用樣式，給它貼上壁紙，同時設定它的高度為500px，代碼如下:
.photowall{ background:url(bg.png); /*設定照片牆背景*/ background-size:cover; /*設定背景以最小值填充*/ height:500px; /*設定照片牆的高度*/}
我們先看一下此時頁面的運行效果：
現在我們應用CSS3的盒模型屬性，將照片在垂直和水平方向上都置中顯示，代碼如下：
.photowall{ background:url(bg.png); /*設定照片牆背景*/ background-size:cover; /*設定背景以最小值填充*/ height:500px; /*設定照片牆的高度*/ display:-webkit-box; /*應用盒子模型*/ display:-moz-box; display:-o-box; display:box; -webkit-box-pack:center; /*使盒子內元素水平置中*/ -moz-box-pack:center; -o-box-pack:center; box-pack:center; -webkit-box-align:center; /* 設定盒子內元素垂直方向上置中分配空間*/ -moz-box-align:center; -o-box-align:center; box-align:center;}
緊接著，我們給照片加上陰影製作效果，同時設定照片的內邊框，代碼如下：
照片的大體樣子已經出來了，接著我們調整遮蓋物的大小，以及利用絕對位置（父容器已經使用了相對定位），調整遮蓋物蒙板的位置，同時給遮蓋物應用transition屬性（如果大家對transition屬性不是太瞭解的，請關注我的其它博文），代碼如下：
.photoview .mask{ position:absolute; /*由於父容器設定了position:relative,所以子項目可以相對父容器做絕對位置*/ top:0; left:0; height: 216px; /*設定遮蓋物的寬高*/ line-height:216px; width: 332px; display: inline-block; background:rgba(0, 0, 0, 0.7); /*設定背景半透明*/ opacity:0; /*設定遮蓋物為透明的*/ visibility:hidden; /*設定遮蓋物是不可見可見的*/ -moz-transition:all 0.4s ease-in-out; /*設定transition屬性，一旦遮蓋物屬性發生變化時，進行平滑動畫過度*/ -webkit-transition:all 0.4s ease-in-out; -o-transition:all 0.4s ease-in-out; -ms-transition:all 0.4s ease-in-out; transition:all 0.4s ease-in-out;}
此時我們運行一下頁面，看一下當前的頁面顯示效果：
現在我們來加上搜尋表徵圖，因為我們想給圖片加上動畫效果，所以我現在給a標籤添加transition屬性，代碼如下：
.photoview .mask a{ background:url(link.png) center no-repeat; /*給遮蓋物上的a標籤應用樣式*/ display:inline-block; height:20px; width:20px; overflow:hidden; text-decoration: none; text-indent:-9999; opacity:0; /*設定a標籤預設為透明*/ -moz-transition:all 0.3s ease-in-out; /*一旦a標籤屬性發生變化時，進行平滑動畫過度*/ -webkit-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;}
對於transition屬性，這裡我給大家對做個簡單介紹，當一個元素應用了transition屬性時，如果以後因為某一事件導致此元素的屬性發生變化，則會進行平滑的動畫過渡效果。這個正是我們所期待的，所以我給上面需要實現動畫的遮蓋物以及搜尋表徵圖都加上了這個屬性。
根據最開始我給大家展示的效果“2. 滑鼠划過時，先平滑顯示灰色遮蓋物背景，接著平滑過渡顯示搜尋表徵圖：”，所以這裡我們給照片添加hover事件，當滑鼠划過照片時，我們分別重新設定遮蓋物的屬性和搜尋表徵圖的屬性，代碼如下：
.photoview:hover .mask { /*當滑鼠划過照片時，將遮蓋物設為不透明，將遮蓋物可見的*/ opacity: 1; background:rgba(0, 0, 0, 0.7); visibility:visible;}
對於搜尋表徵圖，為了顯示更好的動畫效果，我們同時給她設定：延時0.3s執行動畫，代碼如下所示：
.photoview:hover .mask a{ /*當滑鼠划過照片時，將a標籤設為不透明，且延遲0.3秒顯示*/ opacity: 1; -moz-transition-delay: 0.3s; -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; -ms-transition-delay: 0.3s; transition-delay: 0.3s;}
至此，所以代碼編寫完了，現在我們來看一下效果：
正如所願，達到了我們期望的效果。
當然，對於搜尋表徵圖延時效果，我們也可以直接採用複合方式，將
-moz-transition:all 0.3s ease-in-out;
修改為
-moz-transition:all 0.3s ease-in-out 0.3s;
最後的0.3s代表動畫效果，延時多長時間後執行。
效果和上面都是一樣的，這裡我就不帶領大家示範了。
這篇的教程就講到這邊，感謝大家的閱讀。
歡迎大家加入互連網技術交流群：62329335
個人申明：所分享博文，絕對原創，并力爭每一個知識點都通過實戰示範來進行驗證。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
