滑鼠滑過圖片使圖片尺寸大小改變（帶動畫效果）
阿新 • • 發佈：2018-12-17
下面實現了滑鼠放到圖片上去，圖片慢慢變大，滑鼠移走，圖片慢慢恢復。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>滑鼠滑過圖片效果</title> <style type="text/css"> img{ display:inline-block; width: 200px; height: 200px; } .outer{ width: 200px; height: 200px; overflow: hidden; float: left; } .inner{ transition: linear 0.3s; } .outer .inner:hover{ transform: scale(1.2); } .container{ margin: 0 auto; border:#000 1px solid; width: 800px; height: 200px; } </style> </head> <body> <div class="container"> <div class="outer"> <img class="inner" src="img/1.jpg" /> </div> <div class="outer"> <img class="inner" src="img/2.jpg" /> </div> <div class="outer"> <img class="inner" src="img/3.jpg" /> </div> <div class="outer"> <img class="inner" src="img/4.jpg" /> </div> </div> </body> </html>
語法： transition: property duration timing-function delay;
示例： transition: width 0.6s linear 0.2s;
0.2s 後 width 屬性在 0.6s 中以 勻速 的方式…
如果某些屬性不寫的話，瀏覽器將使用預設值。具體情況可以到瀏覽器中檢視。
