当前位置：首页 > JavaScript

js实现箭头旋转

2026-03-15 21:22:49JavaScript

使用 CSS 动画实现箭头旋转

通过 CSS 的 transform 和 @keyframes 实现旋转动画，JavaScript 仅用于触发动画。

<style>
  .arrow {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
  }
  .rotate {
    transform: rotate(180deg);
  }
</style>

<script>
  const arrow = document.querySelector('.arrow');
  arrow.addEventListener('click', () => {
    arrow.classList.toggle('rotate');
  });
</script>

使用 JavaScript 直接控制旋转角度

通过动态修改 style.transform 属性实现逐帧旋转控制。

let rotation = 0;
const arrow = document.getElementById('arrow');

function rotateArrow() {
  rotation += 10;
  if (rotation >= 360) rotation = 0;
  arrow.style.transform = `rotate(${rotation}deg)`;
  requestAnimationFrame(rotateArrow);
}

rotateArrow();

结合 CSS 变量实现可控旋转

利用 CSS 自定义属性实现更灵活的角度控制。

<style>
  :root {
    --arrow-rotation: 0deg;
  }
  .arrow {
    transform: rotate(var(--arrow-rotation));
    transition: transform 0.5s;
  }
</style>

<script>
  document.documentElement.style.setProperty('--arrow-rotation', '45deg');
</script>

使用 GSAP 库实现高级动画

通过专业动画库实现弹性旋转等复杂效果。

gsap.to(".arrow", {
  rotation: 360,
  duration: 2,
  ease: "elastic.out(1, 0.5)",
  repeat: -1
});

实现点击交互旋转效果

综合方案实现点击触发的 180° 旋转效果。

js实现箭头旋转

let rotated = false;
document.querySelector('.arrow').addEventListener('click', () => {
  const deg = rotated ? 0 : 180;
  rotated = !rotated;
  this.style.transform = `rotate(${deg}deg)`;
});