CSS 動畫是一種非常有趣的技術,可以使網站更加生動有趣。 這里將介紹如何使用 CSS 動畫改變大小。
/* 定義動畫 */ @keyframes scale { from { transform: scale(1); } to { transform: scale(2); } } /* 應用動畫 */ div { animation: scale 2s infinite; }
上面代碼中,定義了一個名為scale
的動畫,從scale(1)
(原來大?。┑?code>scale(2)(兩倍大?。H缓髮赢嫅糜谝粋€<div>
元素,使其無限循環。
如果你想讓動畫只播放一次而不是無限循環,則可以使用以下代碼:
div { animation: scale 2s; }
這里省略了infinite
參數,使其只播放一次。
當然,你可以調整動畫的時間長度,如 1s 或 3s。 根據你的需求來調整吧。