使用CSS動畫來持續旋轉圖像
在建立 React Handbook(https://reacthandbook.com) 的登錄頁面時,我需要搜索如何旋轉圖像。我想要旋轉一個 SVG 圖像,但這個方法適用於任何圖像類型,實際上也適用於任何 HTML 元素。
將以下 CSS 指令添加到您想要旋轉的元素中:
animation: rotation 2s infinite linear;
您也可以選擇將 rotate
類添加到元素中,而不是直接選擇它:
.rotate {
animation: rotation 2s infinite linear;
}
通過調整 2s
的數值,可以減慢或加快旋轉周期。
然後將以下代碼添加到任何選擇器之外:
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
就這樣!您的元素現在應該旋轉起來了。
請查看CSS動畫和CSS過渡指南:
以下是在 Codepen 中展示的結果:
[在 CodePen 上查看 如何使用 CSS 動畫持續旋轉圖像 ](https://codepen.io/flaviocopes/pen/zyyJpL/) - 作者:Flavio Copes