Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make an HTML/CSS/JS color changing background (like Kahoot.it has)

How do I make a color changing/fading background using html and css and possibly javascript similar to waht https://kahoot.it has?

like image 827
PlanetVaster Avatar asked Dec 03 '22 13:12

PlanetVaster


1 Answers

You should learn to inspect and obtain

@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;
}
like image 159
Dan Philip Avatar answered Dec 23 '22 14:12

Dan Philip