为什么在body标签上制作彩虹背景不起作用？

Question

我需要使主体的背景颜色从颜色列表中动态变化。当然，我需要它顺利改变。如果您有任何想法，请帮忙！此外，它必须处于一个循环中，因此颜色将重复。我在想while(1)

我试过到处寻找！

附言 我尝试用DOM更改它，但我无法成功。我尝试了以下JavaScript

while(1){
    document.body.style.backgroundColor = "red";
    document.body.style.backgroundColor = "orange";
    document.body.style.backgroundColor = "green";
    document.body.style.backgroundColor = "blue";
}

这有什么意义吗？我刚刚尝试了一切！如果您有任何想法，请务必分享！

Answer 1

最简单的解决方案实际上根本不涉及javascript，只是普通的CSS：

body {
  animation: rainbow 10s linear infinite;
}
@keyframes rainbow {
  0% {background-color: red;}
  25% {background-color: orange;}
  50% {background-color: green;}
  75% {background-color: blue;}
  100% {background-color: red;}
}

在重复之前，您可以将10s更改为希望动画播放的任何持续时间（以秒为单位）。