如何制作 HTML/CSS/JS 变色背景（就像 Kahoot.it 有的那样）

Question

如何使用 html 和 css 以及可能类似于 https://kahoot.it 的 javascript 来制作变色/褪色背景？

原文由 PlanetVaster 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你应该学会检查和获取

 @keyframes bgcolor {
    0% {
        background-color: #45a3e5
    }

    30% {
        background-color: #66bf39
    }

    60% {
        background-color: #eb670f
    }

    90% {
        background-color: #f35
    }

    100% {
        background-color: #864cbf
    }
}

body {
    -webkit-animation: bgcolor 20s infinite;
    animation: bgcolor 10s infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

原文由 Dan Philip Bejoy 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

body {
  animation: 10000ms ease-in-out infinite color-change;
}

@keyframes color-change {
  0% {
    background-color: teal;
  }
  20% {
    background-color: gold;
  }
  40% {
    background-color: indianred;
  }
  60% {
    background-color: violet;
  }
  80% {
    background-color: green;
  }
  100% {
    background-color: teal;
  }
}

原文由 hungerstar 发布，翻译遵循 CC BY-SA 3.0 许可协议