css3實現滑鼠移入圖片放大效果
阿新 • • 發佈：2019-02-19
程式碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ width: 200px; height: 138px; border: #000 solid 1px; margin: 50px auto; overflow: hidden; } #div1 img{ cursor: pointer; transition: all 0.6s; } #div1 img:hover{ transform: scale(1.4); } </style> </head> <body> <div id="div1"> <img src="demo.jpg" /> </div> </body> </html>
分析
1、首先知道DIV和IMG的層次關係，IMG是在某DIV裡面，圖片放大後不應該超出DIV的盒子。
2、設定DIV的 overflow: hidden; 屬性，作用是圖片變大後超過DIV區域的部分會自動隱藏。
3、設定 transition: all 0.6s; 屬性和 transform: scale(1.4); 屬性，其中 transition: all 0.6s; 是變化速度，數值越小速度越快，而 transform: scale(1.4); 是變化範圍， scale(1.4) 是放大1.4倍的意思。