如何通过JavaScript根据变量x修改@keyframes的0%和100%的top值？

嘿，我完全懂你卡在哪了——平时改元素的行内样式顺手得很，但要动@keyframes里的关键帧属性，确实得换个思路！下面给你两种实用的解决方案，你可以根据自己的场景选：

方法一：用CSSOM直接操作现有@keyframes规则 #

这种方法适合你不想重新写整个动画，只想修改0%和100%的top值的情况。核心是找到页面里对应的样式表和@keyframes规则，然后直接修改关键帧的样式：

// 替换成你的@keyframes名称
const targetAnimation = "yourAnimationName";
// 假设x是你已经定义好的变量，比如let x = 20;
const topValue = `${x}px`;

// 遍历页面所有样式表
for (const sheet of document.styleSheets) {
  try {
    // 有些外部样式表可能有跨域限制，用try-catch避免报错
    for (const rule of sheet.cssRules) {
      // 找到目标@keyframes规则
      if (rule.type === CSSRule.KEYFRAMES_RULE && rule.name === targetAnimation) {
        // 遍历关键帧，修改0%和100%的top
        for (const keyframe of rule.cssRules) {
          if (keyframe.keyText === "0%" || keyframe.keyText === "100%") {
            keyframe.style.top = topValue;
          }
        }
        // 找到后就跳出循环，不用继续找了
        break;
      }
    }
  } catch (err) {
    console.log("跳过跨域样式表:", err.message);
  }
}

方法二：动态创建