Sebelumnya saya pernah membagikan tutorial bagaimana membuat background website yang berganti-ganti warna yaitu dengan judul Membuat background website berganti warna dengan CSS, tetapi yang perlu kita ketahui ada lagi yang lebih menarik yaitu membuat background seperti lampu disco dengan penggabungan beberapa warna. Bagi anda yang penasaran ikuti langkah-langkahnya. Berikut ini saya akan membagikan cara membuat background pada halaman web seperti lampu disco. Untuk melihat screenshootnya perhatikan pada gambar di bawah ini.
Untuk membuat background seperti lampu disco kita bisa membuatnya dengan menggunakan CSS. Sebagaimana yang kita pahami bahwa CSS merupakan bahasa structural yang di gunakan untuk mengatur tampilan pada halaman website seperti mengatur warna, bentuk dan ukuran. Pada kesempatan ini saya akan membagikan cara membuat background yang berganti-ganti seperti lampu disco. Berikut ini adalah langkah-langkahnya.
1. Buatlah sebuah kode HTML seperti contoh di bawah ini di text editor anda.
<html>
<head>
<title>Background Disco-Disco dengan CSS</title>
</head>
<body>
</body>
</html>
2. Simpan kode di bawah diantara tag <style type=�text/css�> Kode css </style>.
body{
background:white;
background-color: #f1c40f;
-webkit-animation: color 1s ease-in 0s infinite alternate running;
-moz-animation: color 1s linear 0s infinite alternate running;
animation: color 1s linear 0s infinite alternate running;
}
@-webkit-keyframes color {
0% { background-image:-webkit-linear-gradient(top,green,purple,blue); }
32% { background-image:-webkit-linear-gradient(top,green,purple,white); }
55% { background-image:-webkit-linear-gradient(top,white,purple,blue); }
76% { background-image:-webkit-linear-gradient(top,green,white,blue);}
100% { background-image:-webkit-linear-gradient(top,green,white,purple,blue);}
}
@-moz-keyframes color {
0% { background-image:-webkit-linear-gradient(top,green,purple,blue); }
32% { background-image:-webkit-linear-gradient(top,green,purple,white); }
55% { background-image:-webkit-linear-gradient(top,white,purple,blue); }
76% { background-image:-webkit-linear-gradient(top,green,white,blue);}
100% { background-image:-webkit-linear-gradient(top,green,white,purple,blue);}
}
@keyframes color {
0% { background-image:-webkit-linear-gradient(top,green,purple,blue); }
32% { background-image:-webkit-linear-gradient(top,green,purple,white); }
55% { background-image:-webkit-linear-gradient(top,white,purple,blue); }
76% { background-image:-webkit-linear-gradient(top,green,white,blue);}
100% { background-image:-webkit-linear-gradient(top,green,white,purple,blue);}
}
3. Simpan filenya dengan nama file sesuai keinginan teman-teman. Seperti Index.html
Itulah cara membuat background berganti-ganti seperti lampu disco pada halaman web menggunakan bahasa CSS, semoga tutorial ini bisa bermanfaat buat teman-teman yang lagi belajar CSS. Salam Blogger.
Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com
atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :
