京東圖片過渡效果—瞭解transition屬性
阿新 • • 發佈：2018-11-01
要點：
1、transition有四個屬性，注意時間曲線和延時可以省略，預設分別是ease和0
2、注意切換的原理類似滑動門，遮住一部分，圖片的寬度比顯示寬度要大
html程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 183px; height: 130px; border: 1px solid red; overflow: hidden; /*高度不怎麼改變，注意變化的10px寬度*/ } div img{ width: 193px; height: 130px; transition: all 0.4s; /*指定變化的物件和執行時間*/ } div:hover img{ margin-left: -10px; /*達到將圖片向左移動10px的效果，類似滑動門的效果*/ } </style> </head> <body> <div> <img src="1.jpg"> </div> </body> </html>
效果：
