如何在CSS中使用JavaScript变量？实现图片点击旋转调速需求

嘿，我来帮你搞定这个旋转动画的需求～首先明确告诉你：完全不需要jQuery，原生JavaScript结合CSS就能完美实现，而且CSS里虽然不能直接用JS变量，但有灵活的替代方式，下面一步步给你讲清楚：

核心疑问解答 #

• CSS能直接用JS变量吗？：不行，但你可以通过JavaScript动态设置CSS自定义属性（也就是CSS变量），比如先在CSS里定义--rotate-angle: 0deg，然后用JS修改这个变量的值，CSS就能实时响应。不过对于这个旋转需求，其实直接用JS操作元素的transform属性会更直接高效。
• 有没有其他旋转方法？：除了CSS transform: rotate()，还有Canvas绘制图片后旋转的方式，但显然CSS transform是最简单、性能最好的方案，没必要舍近求远。
• 必须用jQuery吗？：绝对不用！原生JS的API已经足够强大，我们用getElementById、addEventListener、requestAnimationFrame就能搞定所有逻辑。

完整实现代码示例 #

HTML部分 #

<img id="spinner" src="你的图片地址" alt="旋转图片" style="width: 200px; cursor: pointer;">

JavaScript部分 #

const spinner = document.getElementById("spinner");
let speed = 0; // 当前旋转速度（角度/帧）
const addSpeed = 10; // 每次点击增加的速度值
let angle = 0; // 当前旋转角度
let animationId = null; // 动画帧ID，用来控制动画启停

// 点击事件：增加速度
spinner.addEventListener('click', () => {
  speed += addSpeed;
  // 如果动画没在运行，启动动画
  if (!animationId) {
    startAnimation();
  }
});

// 动画循环函数
function startAnimation() {
  animationId = requestAnimationFrame(updateRotation);
}

function updateRotation() {
  // 更新旋转角度
  angle += speed;
  spinner.style.transform = `rotate(${angle}deg)`;

  // 停止点击后逐渐减速
  if (speed > 0) {
    speed -= 0.5; // 减速速率，可调整
  } else {
    speed = 0;
    // 速度为0时停止动画
    cancelAnimationFrame(animationId);
    animationId = null;
    return;
  }

  // 继续下一帧动画
  animationId = requestAnimationFrame(updateRotation);
}

代码逻辑解释 #

1. 状态变量：我们维护三个核心变量：speed（当前旋转速度，每帧增加的角度）、angle（累计旋转角度）、animationId（用来控制动画的启停）。
2. 点击加速：每次点击图片，就给speed加上设定的addSpeed值，如果动画没在运行，就启动requestAnimationFrame循环。
3. 动画循环：用requestAnimationFrame实现流畅的动画，每一帧更新angle并应用到元素的transform上；同时如果speed大于0，就逐渐减小它，直到speed为0时停止动画。
4. 减速控制：speed -= 0.5这一行是减速的速率，你可以根据需求调整这个值，数值越大减速越快，越小则减速越平缓。

这样实现的效果就是：点击图片次数越多，旋转速度越快；停止点击后，图片会慢慢减速直到停止，完全符合你的需求～

内容的提问来源于stack exchange，提问作者nan