当前位置：首页 > JavaScript

js 实现转圈

2026-04-06 22:17:59JavaScript

使用 CSS 动画实现转圈效果

通过 CSS 的 @keyframes 和 transform 属性可以轻松实现转圈动画。以下是一个完整的示例：

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

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

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

使用 SVG 实现平滑转圈

SVG 的路径动画可以实现更复杂的转圈效果：

js 实现转圈

<svg class="spinner" viewBox="0 0 50 50">
  <circle cx="25" cy="25" r="20" fill="none" stroke="#3498db" stroke-width="5"></circle>
</svg>

<style>
.spinner {
  animation: rotate 2s linear infinite;
  width: 50px;
  height: 50px;
}

@keyframes rotate {
  100% { transform: rotate(360deg); }
}

.spinner circle {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  animation: dash 1.5s ease-in-out infinite;
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}
</style>

使用 JavaScript 控制动画

通过 JavaScript 动态控制旋转角度可以实现更灵活的转圈效果：

js 实现转圈

<div id="jsSpinner" style="width:50px;height:50px;background:#3498db;border-radius:50%;"></div>

<script>
let angle = 0;
const spinner = document.getElementById('jsSpinner');

function rotate() {
  angle = (angle + 2) % 360;
  spinner.style.transform = `rotate(${angle}deg)`;
  requestAnimationFrame(rotate);
}

rotate();
</script>

使用 Canvas 绘制动态转圈

Canvas API 可以创建更复杂的转圈动画效果：

<canvas id="canvasSpinner" width="100" height="100"></canvas>

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

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.beginPath();
  ctx.arc(50, 50, 40, 0, Math.PI * 2);
  ctx.strokeStyle = '#ddd';
  ctx.lineWidth = 5;
  ctx.stroke();

  ctx.beginPath();
  ctx.arc(50, 50, 40, -Math.PI/2, -Math.PI/2 + (progress * Math.PI * 2));
  ctx.strokeStyle = '#3498db';
  ctx.lineWidth = 5;
  ctx.stroke();

  progress = (progress + 0.01) % 1;
  requestAnimationFrame(draw);
}

draw();
</script>

使用第三方库实现高级转圈

流行的动画库如 GSAP 可以实现更丰富的转圈效果：

<div id="gsapSpinner" style="width:50px;height:50px;background:#3498db;border-radius:50%;"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script>
gsap.to("#gsapSpinner", {
  rotation: 360,
  duration: 2,
  repeat: -1,
  ease: "linear"
});
</script>

以上方法提供了从简单到复杂的多种实现方式，可以根据项目需求选择最适合的方案。CSS 方案性能最佳，适合大多数场景；JavaScript 方案提供更多控制；Canvas 和 SVG 适合需要定制化视觉效果的情况；第三方库则简化了复杂动画的实现。

标签: js