使用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函数(下面是一个单独的例子(：

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函数中，如代码所示。

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>

显然，这部动画完全没有任何作用，因为你没有以任何方式移动或更改元素，但我希望你能明白这一点。(如果你运行这个例子几次，你就会意识到红框中的位置发生了变化。(

为了回答"；随机移动"；部分问题，你可以创建多个"；rando"；变量并使用它们：

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，这样你就可以真正看到动画的差异了。(

为了下次在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;

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