web-dev-qa-db-ja.com

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

Htmlとcss、そしておそらくwaht https://kahoot.it hasに似たjavascriptを使用して、色を変更/フェードする背景を作成するにはどうすればよいですか？

htmlcsscolorsbackgroundbackground-color
3
PlanetVaster
/* 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;
}
1
Trenton Telge

あなたは本当にあなたが試みているという点で私たちに何も見せませんでした。しかし、私はナイスガイであり、あなたが例によって学ぶことを私は知っています：

body {
  animation: colorchange 10s infinite; 
}

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

必要に応じて変更します。明らかに、bodyを背景色のdivラッパーに変更します。

1
StefanBob

Bruhはこれを行うだけです：

@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;
}
0
BayMax YT