当前位置：首页 > JavaScript

js实现转圈圈

2026-03-16 00:51:52JavaScript

使用CSS动画实现旋转效果

通过CSS的@keyframes和transform属性创建旋转动画，适用于简单的加载指示器。

<div class="spinner"></div>

<style>
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: #09f;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
</style>

使用SVG实现平滑旋转

SVG的<animateTransform>元素可以实现更复杂的路径旋转效果。

<svg width="50" height="50" viewBox="0 0 50 50">
  <circle cx="25" cy="25" r="20" fill="none" stroke="#09f" stroke-width="4">
    <animateTransform 
      attributeName="transform"
      type="rotate"
      from="0 25 25"
      to="360 25 25"
      dur="1s"
      repeatCount="indefinite"/>
  </circle>
</svg>

使用Canvas绘制动态旋转效果

通过JavaScript控制Canvas绘制过程实现可定制的旋转动画。

<canvas id="spinner" width="50" height="50"></canvas>

<script>
const canvas = document.getElementById('spinner');
const ctx = canvas.getContext('2d');
let angle = 0;

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(25, 25, 20, angle, angle + Math.PI * 1.5);
  ctx.strokeStyle = '#09f';
  ctx.lineWidth = 4;
  ctx.stroke();
  angle += 0.1;
  requestAnimationFrame(draw);
}
draw();
</script>

使用第三方库实现高级效果

引入Lottie等动画库可以实现更丰富的旋转效果。

js实现转圈圈

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.4/lottie.min.js"></script>
<div id="lottie-spinner" style="width: 100px; height: 100px;"></div>

<script>
lottie.loadAnimation({
  container: document.getElementById('lottie-spinner'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'https://assets5.lottiefiles.com/packages/lf20_raiw2hpe.json'
});
</script>