CSS3是一種使用廣泛的樣式表語言,它可以為網頁添加很多動畫效果。其中之一就是圖片下移動畫。下面是該效果的代碼:
img { transition: all 0.2s ease-in-out; } img:hover { transform: translate3d(0, 10px, 0); }
這里我們首先使用了transition屬性,它用來定義元素的過渡效果。all表示對所有屬性進行過渡,0.2s表示過渡的時間長度,而ease-in-out則是緩動函數,決定了過渡的速度和變化率。
接下來,我們定義了當鼠標懸浮在圖片上時需要產生的變化。這里使用了transform屬性,它可用于旋轉、縮放、移動和傾斜元素。translate3d函數表示元素需要沿著X軸移動0,Y軸移動10px,Z軸不移動。
總的來說,這段代碼的作用是為圖片添加了一個下移動畫的效果。當鼠標懸浮在圖片上時,圖片會下移10px。