如何使HTML/CSS/JS颜色更改背景（如Kahoot.it有）

Question

如何使用HTML和CSS和可能的JavaScript类似于waht https://kahoot.it有颜色更改/褪色背景？

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

Answer 2

你真的没有向我们展示任何你想要的东西。但我是一个好人，我知道你会学习的榜样：

body { 
    animation: colorchange 10s infinite; 
} 

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

根据需要修改。显然，将body更改为您的div封套与背景颜色无关。

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