当前位置：首页 > JavaScript

js实现转圈圈

2026-02-03 00:20:55JavaScript

使用 CSS 动画实现转圈圈效果

在 JavaScript 中实现转圈圈效果通常结合 CSS 动画来完成。以下是实现方法：

创建一个 HTML 元素作为转圈圈的载体

js实现转圈圈

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

添加 CSS 样式和动画

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: #3498db;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

使用纯 JavaScript 实现旋转动画

如果不使用 CSS 动画，可以用 JavaScript 控制旋转：

js实现转圈圈

const spinner = document.createElement('div');
spinner.style.width = '40px';
spinner.style.height = '40px';
spinner.style.border = '4px solid rgba(0, 0, 0, 0.1)';
spinner.style.borderRadius = '50%';
spinner.style.borderTopColor = '#3498db';
document.body.appendChild(spinner);

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

使用 Canvas 实现更复杂的转圈圈

Canvas 可以实现更丰富的转圈圈效果：

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

const canvas = document.getElementById('spinnerCanvas');
const ctx = canvas.getContext('2d');
let progress = 0;

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

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

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

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

使用第三方库实现转圈圈

使用流行的动画库如 GSAP 可以轻松实现：

import { gsap } from "gsap";

const spinner = document.createElement('div');
spinner.style.width = '40px';
spinner.style.height = '40px';
spinner.style.border = '4px solid rgba(0, 0, 0, 0.1)';
spinner.style.borderRadius = '50%';
spinner.style.borderTopColor = '#3498db';
document.body.appendChild(spinner);

gsap.to(spinner, {
  rotation: 360,
  duration: 1,
  repeat: -1,
  ease: "linear"
});

以上方法提供了从简单到复杂的多种实现方式，可以根据项目需求选择适合的方案。CSS 动画方案性能最佳，纯 JavaScript 方案兼容性最好，Canvas 方案最灵活，第三方库方案最便捷。

标签: js