Membuat Background Berubah-Ubah Warna Dengan Keyframe

Berikut ini seocips akan membagikan trik bagaimana cara membuat animasi background berubah-ubah warna. Tutorial ini masih tentang mengganti background blog, seperti di artikel sebelumnya yang juga membahas bagaimana cara membuat background blog tidak bergerak / menempel ketika halaman di scroll dan membuat gambar background blog efek slide.

Background blog yang berubah-ubah bisa menarik perhatian pengunjung, tentunya bisa digunakan untuk menunjang tampilan blog jika digunakan pada blog yang tepat dan dengan penggunaan / penempatan animasi yang menarik.

Untuk membuatnya kita akan menggunakan CSS @ keyframe, jika anda tertarik dengan animasi keyframe coba cek juga artikel disini tentang membuat animasi loading blog dengan keyframe. Nah berikut ini adalah cara membuat background blog berubah-ubah warna dengan waktu yang di tentukan menggunakan animasi CSS keyframe.

Cara membuat background blog/web berubah-ubah warna.

Masukan kode dibawah ini kedalam CSS template Blog. Jadi jika pada Blogger, masuk pada menu edit HTML template kemudian cari kode ]]></b:skin> atau </style> ( untuk mempermudah gunakan ctrl+f ) dan masukan kode dibawah ini kedalamnya.

@-webkit-keyframes color {
   0% { background-color: #f1c40f; }
   32% { background-color: #e74c3c; }
   55% { background-color: #9b59b6; }
   76% { background-color: #16a085; }
   100% { background-color: #2ecc71; }
}
@-moz-keyframes color {
    0% { background-color: #f1c40f; }
   32% { background-color: #e74c3c; }
   55% { background-color: #9b59b6; }
   76% { background-color: #16a085; }
   100% { background-color: #2ecc71; }
}
@keyframes color {
 0% { background-color: #f1c40f; }
   32% { background-color: #e74c3c; }
   55% { background-color: #9b59b6; }
   76% { background-color: #16a085; }
   100% { background-color: #2ecc71; }
}

Kode sesudah background-color adalah kode warna, jika kamu ingin mengganti warna-warna dengan warna yang kamu inginkan coba pilih warnamu di generator warna . Dan untuk penerapannya misalnya:

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;
}

Kode berwarna biru adalah kode yang di tambahkan pada body untuk membuatnya berganti-ganti warna dan anda juga dapat menerpakannya pada bagian lain di blog anda. Disitu juga terlihat bahwa animasi akan dilakukan selama 5 detik dengan membuat perubahan background dalam 5 tahap dan akan diulang terus dengan perintah infinite. Untuk demonya silahkan cek link dibawah ini:

DEMO SHOW

Nah sekian cara membuat background blog berubah-ubah warna sesuai waktu yang di tentukan. Selamat mencoba.

Diposkan oleh

Brando Mewo

You Might Also Like: