使用 CSS 使 div 随机移动

Question

我正在尝试使用 CSS 使红色 div 随机移动（通过一个名为 rando 的变量分配随机坐标）。

CSS

<style> 

div {
  width: 50px;
  height: 50px;
  background-color: red;
  position: relative;
  animation-name: box;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes box {
  0%   {background-color:red; left: rando px; top: rando px;}
  25%  {background-color:red; left: rando px; top: rando px;}
  50%  {background-color:red; left: rando px; top: rando px;}
  75%  {background-color:red; left: rando px; top: rando px;}
  100% {background-color:red; left: rando px; top: rando px;}
}

HTML

<div></div>

我也尝试做类似的事情，但使用包含随机数的 JS function（下面是一个单独的示例）：

CSS

<style> 
//variable is assigned here
:root {
  --rando: Math.floor((Math.random() * 20) + 1);
}
div {
  width: 50px;
  height: 50px;
  background-color: red;
  position: relative;
  animation-name: box;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes box {
  0%   {background-color:red; left: rando px; top: rando px;}
  25%  {background-color:red; left: rando px; top: rando px;}
  50%  {background-color:red; left: rando px; top: rando px;}
  75%  {background-color:red; left: rando px; top: rando px;}
  100% {background-color:red; left: rando px; top: rando px;}
}

HTML

<div></div>

JS

<script>
var rando = Math.floor((Math.random() * 20) + 1);
</script>

到目前为止，这些示例都不起作用（红色框没有移动）。 我对在 CSS 中使用变量还是新手，所以任何帮助或任何信息都将不胜感激。

谢谢

Answer 1

您可以使用 JavaScript 查询根目录，然后调整值。 您不能混合 CSS 和 JS。
除此之外，您需要更好地了解 CSS 变量。 要使用它们，您必须将其放在var function 中，如代码所示。

 const root = document.querySelector(":root"); // we first get the root element root.style.setProperty("--rando", `${Math.floor(Math.random() * 20) + 1}px`); // inject the CSS with JavaScript

 div { width: 50px; height: 50px; background-color: red; position: relative; animation-name: box; animation-duration: 10s; animation-iteration-count: infinite; } @keyframes box { 0% {background-color:red; left: var(--rando); top: var(--rando);} 25% {background-color:red; left: var(--rando); top: var(--rando);} 50% {background-color:red; left: var(--rando); top: var(--rando);} 75% {background-color:red; left: var(--rando); top: var(--rando);} 100% {background-color:red; left: var(--rando); top: var(--rando);} }

 <div></div>

显然，这个 animation 完全没有做任何事情，因为你没有以任何方式移动或改变元素，但我希望你明白这一点。 （如果你多次运行这个例子，你会发现红框中的 position 的变化。）

要回答问题的“随机移动”部分，您可以创建多个“随机”变量并使用它们：

 const root = document.querySelector(":root"); // we first get the root element for(let i = 0; i < 10; i++) { root.style.setProperty(`--rando${i}`, `${Math.floor(Math.random() * 200) + 1}px`); }

 div { width: 50px; height: 50px; background-color: red; position: relative; animation-name: box; animation-duration: 10s; animation-iteration-count: infinite; } @keyframes box { 0% {background-color:red; left: var(--rando0); top: var(--rando1);} 25% {background-color:red; left: var(--rando2); top: var(--rando3);} 50% {background-color:red; left: var(--rando4); top: var(--rando5);} 75% {background-color:red; left: var(--rando6); top: var(--rando7);} 100% {background-color:red; left: var(--rando8); top: var(--rando9);} }

 <div></div>

（我已将 20px 更改为 200px，因此您实际上可以看到 animation 的差异。）

为了下次您的 CSS 变量风险获得更好的运气，我强烈建议您阅读文档以及如何使用 JavaScript 更改它们。

Answer 2

您不能仅使用 CSS 来做到这一点。 您可能需要 Javascript 来编辑 CSS。 在 Javascript 中，重复

<your element>.style.top = Math.random() * (max - min) + min;
<your element>.style.left = Math.random() * (max - min) + min;

随着时间的推移，随机化元素的 position。 确保您有position: absolute; 在元素的 CSS 中设置。