Cara Membuat Warna Background Berubah-Ubah Pure Css

Membuat sebuah warna background  menjadi bergerak atau berubah-ubah, dengan memanfaatkan css memang saat ini sedang ramai diperbincangkan.
Adapun beberapa blog dari teman-teman lainnya yang telah terlebih dahulu membuatnya.

Memang cukup unik dan menarik, tidak membosankan bila melihatnya. Bagaimana cara membuatnya, apakah sulit atau memerlukan waktu yang cukup lama?
Tidak sulit, disini kita tidak memerlukan javascript sedikitpun,melainkan dengan css.

Apakah ada efeknya apabila memasangnya di website atau blog kita,
Seperti loading menjadi berat atau lambat?

Jawabannya adalah, tidak ada efek sama sekali yang bisa menyebabkan loading menjadi berat. Karena disini kita hanya memanfaatkan css nya saja tidak dengan javascriptnya. Sebab yang memicu terjadinnya loading disebuah blog terasa berat yaitu adanya javascript atau widget-widget yang terlalu banyak terpasang, sehingga loading terasa berat atau menjadi lambat.

Hindari pemasangan javascript yang terlalu banyak dan hapus widget yang tidak penting, agar tidak terjadinnya penghambatan loading.

Untuk proses pembuatannya cukup mudah.
Simak dengan seksama dan perhatikan kode css dibawah ini:

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;
}
/* Animasi + Prefix untuk browser */
@-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; }
}

Lihat pada bagian background body terlihat kode warna dari #f1c40f (warna kuning), itu adalah warna inti dari background tersebut. Jika kalian ingin mengubahnya, silahkan bisa kalian kreasikan dengan kode-kode warna lainnya.
Dan untuk mesin penggeraknya adalah animation, bisa kalian lihat lagi pada bagian body.

Pada kode css diatas kalian lihat kembali ada kode tertentu. Dalam artian bisa berjalan pada browser yang ada pada bagian css itu saja.
Misalkan kita hanya ingin kode tersebut berjalan diopera, cukup kalian tambahkan seperti ini:

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

Untuk link demonya dibawah ini:

Live Demo

Setelah selesai semuanya bisa kalian coba jalankan dan buka dibrowser kalian, apakah bekerja atau tidak.
Kemungkinan kecil bila css tersebut tidak berjalan, karena saya sudah mempraktekannya sendiri.

Nah bagaimana jika kita ingin merubah background tersebut dengan gambar? Bisa kalian ubah pada bagian background-color sehingga menjadi background-image:url(url-gambar.jpg).

Bagaimana menurut kalian, mudah bukan? Hanya beberapa menit saja tidak memerlukan banyak waktu. Jika ingin memasangnya di webs kalian, silahkan kalian copy paste css diatas.

Demikian cara membuat warna background berubah-ubah pure css.
Akhir kata saya ucapkan terimakasih.

Virm Aditya

Berita teknologi informasi terkini

Share this post