Cara Menciptakan Background Animasi Gradasi Warna Dengan Pure Css

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

Dan akhir-akhir ini sudah banyak yang menerapkan dampak animasi pada warna gradasi memakai css yang tentu saja tujuannya yaitu untuk mengubah warna background elemen blog mereka biar tampilan background elemen blog/web terlihat semakin menarik dengan warna yang otomatis berganti. Animasi Gradasi Warna dengan Pure CSS ini juga sanggup di bilang tekhnik Rainbow gradient background animation yang memadukan beberapa warna yang lalu 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 dampak animasi. Misalkan di bab footer, background blog, blockquote dan lain sebagainya.

Kemudian tambahkan css wana gradasi dengan dampak 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 arahan sebelumnya menyerupai 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 jikalau ditambahkan css warna gradasi akan menjadi menyerupai 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 ihwal Cara Membuat Background Animasi Gradasi Warna dengan Pure CSS yang sanggup aku bagikan kali ini semoga bermanfaat dan salam luar biasa.

Share this post