CSS動畫：實現(xiàn)一個球轉圈

在CSS中，我們可以使用@keyframes規(guī)則來創(chuàng)建動畫，下面是一個示例，展示如何實現(xiàn)一個球轉圈的動畫效果：

1、HTML結構：

<div class="ball"></div>

2、CSS樣式：

.ball {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #333;
  position: relative;
  animation: rotateBall 5s infinite linear;
}
@keyframes rotateBall {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

在這個示例中，我們創(chuàng)建了一個名為rotateBall的動畫，其中球從0度開始旋轉，到360度結束，動畫持續(xù)時間為5秒，并且會無限次重復。linear關鍵字表示動畫在每個周期中都是勻速進行的。

3、JavaScript（可選）：

如果你需要在JavaScript中控制球的旋轉速度或方向，可以使用以下代碼：

let ball = document.querySelector('.ball');
let rotationSpeed = 1; // 每秒旋轉的度數(shù)
let rotationDirection = 1; // 1表示順時針，-1表示逆時針
function rotateBall() {
  let angle = (Date.now() / 1000) * rotationSpeed * rotationDirection;
  ball.style.transform =rotate(${angle}deg);
  requestAnimationFrame(rotateBall);
}
rotateBall();

這段代碼會每秒更新球的角度，從而實現(xiàn)旋轉效果，通過調(diào)整rotationSpeed和rotationDirection變量，你可以控制球的旋轉速度和方向。