CSS實現圖片動態效果的相關屬性介紹

css實現圖片動態效果。

使用方法 利用hover偽類

操作流程 首先確定要實現的效果 設定初始表示狀態

動畫用到的css屬性

transition 屬性

transition-property 規定設定過渡效果的 CSS 屬性的名稱。

(

none 沒有屬性會獲得過渡效果。

all 所有屬性都將獲得過渡效果。

property 定義應用過渡效果的 CSS 屬性名稱列表，列表以逗號分隔。

)

transition-duration 規定完成過渡效果需要多少秒或毫秒。

transition-timing-function 規定速度效果的速度曲線。

(

linear 規定以相同速度開始至結束的過渡效果(等於 cubic-bezier(0,0,1,1))。

ease 規定慢速開始，然後變快，然後慢速結束的過渡效果(cubic-bezier(0.25,0.1,0.25,1))。

ease-in 規定以慢速開始的過渡效果(等於 cubic-bezier(0.42,0,1,1))。

ease-out 規定以慢速結束的過渡效果(等於 cubic-bezier(0,0,0.58,1))。

ease-in-out 規定以慢速開始和結束的過渡效果(等於 cubic-bezier(0.42,0,0.58,1))。

cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。

)

transition-delay 定義過渡效果何時開始。

transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。

translateX(x) 定義轉換，只是用 X 軸的值。

translateY(y) 定義轉換，只是用 Y 軸的值。

scale(x,y) 定義 2D 縮放轉換。

scaleX(x) 通過設定 X 軸的值來定義縮放轉換。

scaleY(y) 通過設定 Y 軸的值來定義縮放轉換。

rotate3d(x,y,z,angle) 定義 3D 旋轉。

rotateX(angle) 定義沿著 X 軸的 3D 旋轉

rotateY(angle) 定義沿著 Y 軸的 3D 旋轉

rotateZ(angle) 定義沿著 Z 軸的 3D 旋轉

rotate(angle) 定義 2D 旋轉，在參數中規定角度。設定transform-origin (旋轉中心點)

skew(x-angle,y-angle) 定義沿著 X 和 Y 軸的 2D 傾斜轉換。

skewX(angle) 定義沿著 X 軸的 2D 傾斜轉換。

skewY(angle) 定義沿著 Y 軸的 2D 傾斜轉換。