Cara Membuat Body Website Berubah Warna-warni

Hai teman – teman ketemu lagi nih sama saya , gimana kabarnya ?? Semoga Sehat selalu yah aminn, pada kesempatan kali ini saya akan sedikit berbagi ilmu tentang bagaimana membuat body background website anda berubah warna – warni .

Oke sekarang langsung aja yah ke TKP hehe

Ketikan Script HTMLnya seperti ini ,

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Untitled Document</title>

</head>

 

<body>

<div class="content">

            <center>

            <h1>Dumet School Indonesia</h1>

            <p><a href="http://www.dumetschool.com">http://www.dumetschool.com</a></p>

            </center>

</div>

</body>

</html>

Lalu kalau teman – teman sudah membuat Script HTMLnya, sekarang teman – teman buat Script CSS nya seperti ini ..

<style>

body{

                        background-color: #f1c40f;

                        -webkit-animation: color 5s ease-in 0s infinite alternate running;

                        -moz-animation: color 5s linear 0s infinite alternate running;

                        animation: color 5s linear 0s infinite alternate running;

            }

            

                        @-webkit-keyframes color {

               0% { background-color: #FE100E; }

               15% { background-color: #FEC30F; }

               30% { background-color: #FEFF4C; }

               45% { background-color: #10D50C; }

               60% { background-color: #0E16FD; }

                75% { background-color: #800FD9 }

                100% { background-color: #E47BFC; }

            }

            @-moz-keyframes color {

                   0% { background-color: #FE100E; }

               15% { background-color: #FEC30F; }

               30% { background-color: #FEFF4C; }

               45% { background-color: #10D50C; }

               60% { background-color: #0E16FD; }

               75% { background-color: #800FD9 }

               100% { background-color: #E47BFC; }

            }

            @keyframes color {

                 0% { background-color: #FE100E; }

               15% { background-color: #FEC30F; }

               30% { background-color: #FEFF4C; }

               45% { background-color: #10D50C; }

               60% { background-color: #0E16FD; }

                75% { background-color: #800FD9 }

                 100% { background-color: #E47BFC; }

            }

</style>

Sekarang Coba teman – teman lihat webnya di browser , gimana teman-teman baguskan?

oke mungkin sekian dulu untuk hari ini , Semoga bermanfaat ..