標籤：style blog http color os io strong for
各位網友大家好，我是陌上花會開，當然大家也可以叫我陌陌。今天這篇文章，我將手把手帶領大家實戰開發一個滑鼠划過圖片時的動畫特效。在這裡我不會給大家提供案例的源碼下載，但是本人可以保證，只要大家跟著我的思路，一步步將代碼複製到本地，一定會得到同樣的運行效果。希望大家明白我的用心。好了不廢話，直接進入今天的主題吧。
在今天這個案例裡，我準備3個素材，一張背景圖，兩張風景圖片。這個大家可以到網上自行下載。
在寫代碼之前，我先給大家展示一下，動畫特效的。
滑鼠花過前：
當滑鼠划過圖片時，圖片將逐漸層亮：
大家從上面的兩幅比較圖片大概也可以看出來，特效是：當滑鼠划過圖片時，由內而外逐漸層量。
好了，開始今天的實戰之旅吧。
首先我們先編寫html代碼，下面高亮的樣式名就是我們今天著重實現的：
<!DOCTYPE html> <html><head><meta charset=”utf-8″><link rel=”stylesheet” href=”styles_2014080702.css”><meta name=”keywords” content=”css,css3,滑鼠划過動畫效果,css3實戰開發,css3案例“ /><title>css3實現滑鼠划過圖片時效果(1)</title></head><body><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“></div></div><div class=”photoview“><a href=”http://www.itdriver.cn”><img src=”img02.jpg” width=”320″ height=”200″ /></a><div class=”mask“></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;}
緊接著，我們給照片加上陰影製作效果，同時設定照片的內邊框，代碼如下：
.photowall .photoview { /*給照片框應用樣式*/ padding:6px; background:#FFFFFF; margin:0 10px; position:relative; overflow:hidden; /*將溢出的內容隱藏*/ box-shadow:2px 2px 6px black; /*給照片框應用陰影製作效果*/}
那此時的運行效果如何呢？
好了，整個樣子已經出來的，現在我們給照片增加效果吧！
結果我們要做的就是先設定遮蓋物，由於我們已經給照片類設定了position:relative;屬性，現在我們可以輕易的通過絕對位置來改變樣式為.mask的元素位置了。我們應該知道，當元素設定了position後，則代表它已經脫離了標準的文檔流而懸浮起來，所以我們可以輕易的調整.mask元素的位置來達到遮蓋物的效果。現在我們給遮蓋物.mask應用效果吧：
.photoview .mask{position:absolute; /*由於父容器設定了position:relative,所以子項目可以相對父容器做絕對位置*/top:60px;left:120px;height: 120px; /*設定遮蓋物的寬高*/width: 120px;cursor:pointer;border-radius: 60px; /*給遮蓋物設定圓角效果，如果radius=元素寬度*1/2 ，則此時元素就成一個圓形*/border-width: 60px;display: inline-block;border: 60px solid rgba(0, 0, 0, 0.7);-moz-box-sizing:border-box; /*以border-box方式計算容器的寬高*/-webkit-box-sizing:border-box;box-sizing:border-box;opacity:1; /*設定遮蓋物為不透明的*/visibility:visible; /*設定遮蓋物是可見的*/-moz-transform:scale(4); /*將遮蓋物放大4倍尺寸*/-webkit-transform:scale(4);-o-transform:scale(4);-ms-transform:scale(4);transform:scale(4);-moz-transition:all 0.4s ease-in-out; /*一旦遮蓋物屬性發生變化時，進行平滑動畫過度*/-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;}
如果大家對上面這些屬性不是太瞭解的話，可以關注我的其他博文，裡面會有詳細講解。此時我們再看一下運行效果：
遮蓋物已經呈現半透明狀態，並且已經完全遮蓋住照片，在上面的樣式中我們定義了 transition:all 0.4s ease-in-out; 這個是什麼意思呢？
它其實是說，當.mask元素的樣式發生變化時，以先快後慢的動畫效果實現.mask樣式屬性的變化。
好了，當滑鼠划過照片時，我們重新調整.mask屬性樣式：
.photoview:hover .mask { /*當滑鼠划過照片時，將遮蓋物設為透明，且border設為0，將遮蓋物隱藏*/opacity: 0;border:0px solid rgba(0,0,0,0.7);visibility:hidden;}
至此，代碼編寫完了，現在我們看一下划過的效果吧：
歡迎大家加入互連網技術交流群：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
