如何使用純 CSS 創造連續旋轉的動畫？-css教學-PHP中文網

如何使用純 CSS 創造連續旋轉的動畫？

Linda Hamilton

發布： 2024-11-05 10:24:02

原創

500 人瀏覽過

How to create a continuously rotating animation using pure CSS?

使用CSS 無限旋轉動畫

請求：

請求：

使用pure 無限期旋轉圖示使用pure 無限期旋轉圖示CSS.

<code class="css">#test {
    width: 32px;
    height: 32px;
    background: url('refresh.png');
}

.rotating {
    -webkit-transform: rotate(360deg);
    -webkit-transition-duration: 1s;
    -webkit-transition-delay: now;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}</code>

登入後複製

代碼：

問題：

提供的程式碼不會啟動旋轉動畫，因為

解決方案：

要使用CSS 來實現連續旋轉，我們需要使用動畫。在本例中，我們使用 @keyframes 規則來定義動畫並套用動畫 CSS 屬性。

<code class="css">@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}</code>

登入後複製

更新的程式碼：

此更新的程式碼定義旋轉動畫，由持續 2 秒的 360 度旋轉組成。無限迭代計數設定可確保動畫無限重複。

以上是如何使用純 CSS 創造連續旋轉的動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！