[劉陽Java]_CSS鼠標懸停
阿新 • • 發佈：2018-03-05
ica style AC align web 技術 adding pla weight
小白在學習前端技術時候，一定會在剛開始的時候學習CSS2和CSS3的相關知識。這篇內容給大家介紹一個CSS鼠標懸停的效果。大家可以先看下面的效果圖，然後我們在說一下實現的效果要求吧
上圖效果非常簡單和清晰，就是鼠標放上去能夠將圖片進行縮率圖的放小效果。實現要求
- CSS的偽類hover的應用，通過偽類完成CSS樣式的變化
- CSS3中的transform:scale(...)的應用，完成縮放比例的設置
- CSS3中的過渡transition:all 200ms ease-in樣式的的應用，因為縮放效果需要過渡的屬性來觸發效果的實現
- 圖片和文字通過定位來進行位置的設置，圖片會浮動到文字的上方，同時圖片定位是基於父容器來絕對定位的
下面是整個程序的源碼，大家可以復制下來進行測試
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; list-style-type: none; }a,img { border: 0; } body { font: 12px/180% Arial, Helvetica, sans-serif, "新宋體"; } .carre_couleur { width: 200px; height: 200px; display: inline-block; position: relative; margin-top: 0px; } .base_hov .retract { -webkit-transition:all 200ms ease-in; -webkit-transform-origin:50% 20%; -webkit-transform:scale(1); -moz-transition:all 200ms ease-in; -moz-transform-origin:50% 20%; -moz-transform:scale(1); -ms-transition:all 200ms ease-in; -ms-transform-origin:50% 20%; -ms-transform:scale(1); position: absolute; left: 0; width: 200px; height: 200px; z-index: 2; } .base_hov:hover .retract { -webkit-transition:all 200ms ease-in; -webkit-transform:scale(0.6); -moz-transition:all 200ms ease-in; -moz-transform:scale(0.6); -ms-transition:all 200ms ease-in; -ms-transform:scale(0.6); transition:all 200ms ease-in; transform:scale(0.6); } .acced { width: 180px; padding: 10px; bottom: 0; position: absolute; z-index: 1; text-align: left; } .big-acced { color: #FFFFFF; font-size: 25px; font-weight: 400; } .middle_acced { color: #FFFFFF; font-size: 15px; font-weight: 400; } </style> </head> <body> <div align="center"> <div class="carre_couleur base_hov" style="background-color: #f8b334;"> <a href=#""> <div class="retract" style="background-color: #f8b334;"> <img src="img/1.png"/> </div> <div class="acced"> <div class="big-acced">商店</div> <div class="middle_acced">歡迎光臨</div> </div> </a> </div> <div class="carre_couleur base_hov" style="background-color: #2ecc71;"> <a href=#""> <div class="retract" style="background-color: #2ecc71;"> <img src="img/2.png"/> </div> <div class="acced"> <div class="big-acced">影視</div> <div class="middle_acced">歡迎光臨</div> </div> </a> </div> <div class="carre_couleur base_hov" style="background-color: #e74c3c;"> <a href=#""> <div class="retract" style="background-color: #e74c3c;"> <img src="img/3.png"/> </div> <div class="acced"> <div class="big-acced">設備</div> <div class="middle_acced">歡迎光臨</div> </div> </a> </div> </div> </body> </html>
[劉陽Java]_CSS鼠標懸停