CSS動畫是網頁設計中常用的動態效果,它能夠使網頁更加生動,吸引人的注意力。而CSS自帶的“animation”屬性可以實現持續不斷的動畫效果。
/* 定義一個無限循環的動畫 */ @keyframes spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } /* 將動畫應用在某個元素上 */ .element { animation: spin 2s linear infinite; }
這段代碼將使“element”類的元素持續不斷地旋轉,直到頁面被關閉或者動畫屬性被移除。
在上面的代碼中,“animation”屬性有四個值:動畫名稱、“動畫時長”、“動畫緩動函數”和“動畫次數”。值得注意的是,最后一個值可以設置如“infinite”來讓動畫無限次地循環播放。
需要注意的是,CSS動畫過多過于繁瑣會對性能造成影響,因此在使用時應當控制其數量和頻率。如果使用動畫效果需要占用較多系統資源,可以使用JavaScript來實現動畫效果,以避免過多的渲染與內存消耗。
上一篇css 動態載入效果
下一篇css 動畫 做一個表白