如何制作 HTML/CSS/JS 变色背景（如 Kahoot.it 有）

Question

如何使用 html 和 css 并可能 javascript 制作与 https://kahoot.it 相似的颜色 changing/fading 背景？

Answer 1

你真的没有向我们展示你的努力。但我是一个好人，我知道你会通过例子学习：

div {
  animation: colorchange 10s infinite; 
}

@keyframes colorchange {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  75%  {background-color: green;}
  100% {background-color: red;}
}

根据需要修改。

Answer 2

你应该学会检查和获取

@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;
}

Answer 3

/* The animation code */
@keyframes example {
    0%   {background-color: red;}
    33%  {background-color: yellow;}
    66%  {background-color: blue;}
    100%   {background-color: red;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

Answer 4

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;
  }
}

Answer 5

兄弟，就这样做吧：

@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;
}