如何用CSS实现红色div随机移动？现有方案失效求帮助

你的代码存在的核心问题 #

• CSS无法直接识别JS变量rando，必须通过**CSS自定义属性（变量）**结合JS传递值
• 直接在:root中写Math.random()无效，CSS不支持JS表达式，得用JS动态设置CSS变量
• 你的@keyframes里所有关键帧位置完全相同，没有属性变化，自然不会产生移动动画

正确实现方式 #

要让红色div随机移动，需要满足两个核心要求：用JS生成随机坐标并传递给CSS，同时在动画中定义有差异的关键帧位置。以下是两种可行方案：

方案1：每次动画循环更新随机位置（自然的随机跳跃移动） #

这个方案会在动画每次结束后，重新生成随机目标位置，让div不断跳到新的随机点：

<div class="moving-box"></div>

<style>
:root {
  --left-pos: 0px;
  --top-pos: 0px;
}

.moving-box {
  width: 50px;
  height: 50px;
  background-color: red;
  position: relative;
  animation: moveToRandom 2s ease-in-out forwards;
  animation-iteration-count: infinite;
}

@keyframes moveToRandom {
  from {
    /* 从当前位置平滑过渡到目标位置 */
  }
  to {
    left: var(--left-pos);
    top: var(--top-pos);
  }
}
</style>

<script>
const box = document.querySelector('.moving-box');

// 生成随机位置并设置CSS变量
function setRandomPosition() {
  // 限制在可视区域内，避免div跑出窗口
  const maxLeft = window.innerWidth - 50;
  const maxTop = window.innerHeight - 50;
  const randomLeft = Math.floor(Math.random() * maxLeft);
  const randomTop = Math.floor(Math.random() * maxTop);
  
  document.documentElement.style.setProperty('--left-pos', `${randomLeft}px`);
  document.documentElement.style.setProperty('--top-pos', `${randomTop}px`);
}

// 初始设置位置
setRandomPosition();
// 每次动画结束后更新目标位置
box.addEventListener('animationend', setRandomPosition);
</script>

方案2：单动画周期内经过多个随机点 #

如果希望div在一次动画周期内经过多个随机路径点，可以提前生成多组随机值，对应不同关键帧：

<div class="moving-box"></div>

<style>
:root {
  --left-1: 0px;
  --top-1: 0px;
  --left-2: 0px;
  --top-2: 0px;
  --left-3: 0px;
  --top-3: 0px;
}

.moving-box {
  width: 50px;
  height: 50px;
  background-color: red;
  position: relative;
  animation: moveThroughRandomPoints 10s ease-in-out infinite;
}

@keyframes moveThroughRandomPoints {
  0% {
    left: var(--left-1);
    top: var(--top-1);
  }
  33% {
    left: var(--left-2);
    top: var(--top-2);
  }
  66% {
    left: var(--left-3);
    top: var(--top-3);
  }
  100% {
    left: var(--left-1);
    top: var(--top-1);
  }
}
</style>

<script>
function setRandomPoints() {
  const maxLeft = window.innerWidth - 50;
  const maxTop = window.innerHeight - 50;
  
  // 生成3组随机坐标
  for(let i=1; i<=3; i++) {
    const randomLeft = Math.floor(Math.random() * maxLeft);
    const randomTop = Math.floor(Math.random() * maxTop);
    document.documentElement.style.setProperty(`--left-${i}`, `${randomLeft}px`);
    document.documentElement.style.setProperty(`--top-${i}`, `${randomTop}px`);
  }
}

// 初始设置随机点
setRandomPoints();
// 可选：每次动画周期结束后更新随机点
document.querySelector('.moving-box').addEventListener('animationend', setRandomPoints);
</script>

关键知识点总结 #

• CSS自定义属性的正确引用格式是var(--变量名)
• 必须通过JS的document.documentElement.style.setProperty()方法动态设置CSS变量的值
• 动画的核心是关键帧之间的属性差异，如果所有关键帧属性一致，不会产生动效
• 生成随机位置时建议限制在可视区域内，避免元素超出窗口

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