HTML/CSS/JSの色を背景に変える方法（Kahoot.itのように）

Question

htmlとcssを使って色を変える/退色する背景を作るにはどうすればよいでしょうか？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; 
 
    } 
 
}