CSS動畫是向網頁中添加動態效果的一種方法,可以使網頁更具吸引力和互動性。下面將介紹如何使用CSS調用動畫:
/*定義關鍵幀*/ @keyframes anim { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /*調用動畫*/ .element { animation: anim 2s linear infinite; }
首先需要定義一個關鍵幀,使用@keyframes
關鍵字定義。其中from
用于定義動畫起始狀態,to
用于定義動畫結束狀態。可以根據需要定義任意多個關鍵幀。
定義完關鍵幀之后,就可以在CSS樣式中使用animation
屬性調用動畫。使用animation-name
屬性指定調用的關鍵幀名稱,這里是anim
。使用animation-duration
屬性指定動畫持續時間,這里是2秒;animation-timing-function
指定動畫變化速度類型,這里是線性;animation-iteration-count
指定動畫重復次數,這里是無限循環。
還可以使用一些其他的屬性,例如animation-delay
指定動畫延遲時間、animation-fill-mode
指定動畫執行前后的元素狀態等。具體屬性請參考MDN CSS動畫文檔。
總而言之,使用CSS調用動畫需要定義關鍵幀,再通過animation
屬性對元素進行調用,從而實現動態效果。
上一篇css中如何設置文本框
下一篇css中如何過濾標簽