Merubah Background Template Blog Dengan Animasi Warna

Hari ini saya akan membagikan tutorial bagaimana anda dapat merubah background blog anda untuk warna yang berbeda dengan animasi menggunakan keyframes CSS. Animasi ini menggunakan gambar yang besar tapi telah dipadukan menggunakan kode CSS dengan loading sangat cepat dan pengunjung blog anda akan melihat beberapa interaksi berbeda di latar belakang.



Live Demo desain ini dapat lihat dengan klik link demo di bawah ini.

DEMO

Demo yang tentu saja terlihat mengagumkan sehingga untuk menambahkan latar belakang animasi ini ke blog ikuti langkah-langkah di bawah ini.

Menghapus Kode Yang Ada

Pertama-tama anda harus menghapus kode latar belakang yang ada untuk menghindari konflik di antara keduanya dan meminimalkan kode yang berlebihan. Untuk ini cari kode body pada kode CSS dalam template blog. Hapus kode di bawah kode body yang menyangkut dengan kode background. Ingat ! Jangan sampai salah hapus.

Menambahkan Kode Animasi

Sekarang anda harus menambahkan kode animasi di template blog. Untuk ini paste kode di bawah ini dan letakkan tepat di atas ]]></b:skin> <

body {
    animation: colorBackground 20s infinite; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */
     -webkit-animation: colorBackground 20s infinite; /* Chrome, Safari 5+ */
      -moz-animation: colorBackground 20s infinite; /* Firefox 5-15 */
        -o-animation: colorBackground 20s infinite; /* Opera 12.00 */
}
@keyframes colorBackground {
      0% { background-color: #fbcf61; color: #fbcf61; }
     20% { background-color: #6bd57e; color: #6bd57e; }
     40% { background-color: #ff6f6f; color: #ff6f6f; }
     60% { background-color: #57cff4; color: #57cff4; }
     80% { background-color: #0ed4c8; color: #0ed4c8; }
    100% { background-color: #fbcf61; color: #fbcf61; }
}
@-webkit-keyframes colorBackground {
      0% { background-color: #fbcf61; color: #fbcf61; }
     20% { background-color: #6bd57e; color: #6bd57e; }
     40% { background-color: #ff6f6f; color: #ff6f6f; }
     60% { background-color: #57cff4; color: #57cff4; }
     80% { background-color: #0ed4c8; color: #0ed4c8; }
    100% { background-color: #fbcf61; color: #fbcf61; }
}
@-moz-keyframes colorBackground {
      0% { background-color: #fbcf61; color: #fbcf61; }
     20% { background-color: #6bd57e; color: #6bd57e; }
     40% { background-color: #ff6f6f; color: #ff6f6f; }
     60% { background-color: #57cff4; color: #57cff4; }
     80% { background-color: #0ed4c8; color: #0ed4c8; }
    100% { background-color: #fbcf61; color: #fbcf61; }
}
@-o-keyframes colorBackground {
      0% { background-color: #fbcf61; color: #fbcf61; }
     20% { background-color: #6bd57e; color: #6bd57e; }
     40% { background-color: #ff6f6f; color: #ff6f6f; }
     60% { background-color: #57cff4; color: #57cff4; }
     80% { background-color: #0ed4c8; color: #0ed4c8; }
    100% { background-color: #fbcf61; color: #fbcf61; }
}

Sumber Kode : Imman Vel

Setelah menambahkan kode tersebut, simpan template anda dan selesai. Sekarang anda dan pengunjung blog anda dapat melihat animasi keren pada blog anda.

Semoga Bermanfaat.