Cara Membuat Background Animasi Gradasi Warna dengan Pure CSS

Gradient text atau warna gradasi menggunakan css ini sudah banyak di gunakan oleh para designer website ataupun template maker di nusantara. Bahkan mereka tidak tanggung-tanggung menggunakan warna gradasi ini untuk mengubah tampilan teks ataupun background web/blog mereka untuk membuatnya terlihat enak di pandang.

Dan akhir-akhir ini sudah banyak yang menerapkan efek animasi pada warna gradasi menggunakan css yang tentu saja tujuannya adalah untuk mengubah warna background elemen blog mereka agar tampilan background elemen blog/web terlihat semakin menarik dengan warna yang otomatis berganti. Animasi Gradasi Warna dengan Pure CSS ini juga bisa di bilang tekhnik Rainbow gradient background animation yang memadukan beberapa warna yang kemudian di tambahkan keyframe yang nantinya akan mengatur animasi pergantian warnanya secara berurutan.

Demo

Background Warna Gradasi Animasi dengan CSS

Login ke Blogger > Theme > Edit HTML

Selanjutnya silahkan cara elemen yang nantinya akan kalian tambahkan warna gradasi dengan efek animasi. Misalkan di bagian footer, background blog, blockquote dan lain sebagainya.

Kemudian tambahkan css wana gradasi dengan efek animasi berikut :

{background: linear-gradient(124deg, #1abc9c, #2ecc71, #3498db, #9b59b6, #34495e, #16a085, #27ae60, #2980b9, #8e44ad, #2c3e50);
background-size: 1800% 1800%;
-webkit-animation: rainbow 70s ease infinite;-z-animation: rainbow 70s ease infinite;-o-animation: rainbow 70s ease infinite;animation: rainbow 70s ease infinite;}

@-webkit-keyframes rainbow {0%{background-position:0% 82%}50%{background-position:100% 19%}100%{background-position:0% 82%}}

@-moz-keyframes rainbow {0%{background-position:0% 82%}50%{background-position:100% 19%}100%{background-position:0% 82%}}

@-o-keyframes rainbow {0%{background-position:0% 82%}50%{background-position:100% 19%}100%{background-position:0% 82%}}

@keyframes rainbow {0%{background-position:0% 82%}50%{background-position:100% 19%}100%{background-position:0% 82%}}

Sebagai contoh, kalian ingin menerapkan di template infinite dari arlina design di bagin footer, dan kode sebelumnya seperti dibawah ini :

#footer-wrapper{text-align:left;overflow:hidden;background:#fff;margin:auto;max-width:970px;padding:10px 20px 20px 20px;border-top:5px solid rgba(0,0,0,0.05)}

Maka jika ditambahkan css warna gradasi akan menjadi seperti ini :

#footer-wrapper{text-align:left;overflow:hidden;margin:auto;max-width:970px;padding:10px 20px 20px 20px;border-top:5px solid rgba(0,0,0,0.05);background: linear-gradient(124deg, #1abc9c, #2ecc71, #3498db, #9b59b6, #34495e, #16a085, #27ae60, #2980b9, #8e44ad, #2c3e50);
background-size: 1800% 1800%;
-webkit-animation: rainbow 70s ease infinite;-z-animation: rainbow 70s ease infinite;-o-animation: rainbow 70s ease infinite;animation: rainbow 70s ease infinite;}

@-webkit-keyframes rainbow {0%{background-position:0% 82%}50%{background-position:100% 19%}100%{background-position:0% 82%}}

@-moz-keyframes rainbow {0%{background-position:0% 82%}50%{background-position:100% 19%}100%{background-position:0% 82%}}

@-o-keyframes rainbow {0%{background-position:0% 82%}50%{background-position:100% 19%}100%{background-position:0% 82%}}

@keyframes rainbow {0%{background-position:0% 82%}50%{background-position:100% 19%}100%{background-position:0% 82%}}

Itulah tutorial css blogger tentang Cara Membuat Background Animasi Gradasi Warna dengan Pure CSS yang dapat saya bagikan kali ini semoga bermanfaat dan salam luar biasa.

Berbagi :