Membuat Animasi Gradient Color

Tutorial Cara membuat Animasi Gradient Color (Warna) background blog dengan css.

Membuat Animasi Gradient Color

Berikut Tutorial untuk membuat Animasi Gradien warna pada Background Blog :

Related Post:

1. Login ke akun Blogger
2. Pilih Edit HTML
3. Letakkan Kode css, Animasi Gradient Color di antara <b:skin> .... </b:skin>
4. Sebaiknya letakkan tepat di atas </b:skin>
NamaElement{
    background: linear-gradient(45deg, #f22613, #f89406, #26a65b, #5868ec, #f54e80, #f7ca18, #d2527f);
    background-size: 500% 500%;
    -webkit-animation: NamaElement 12s ease infinite;
    -moz-animation: NamaElement 12s ease infinite;
    animation: NamaElement 12s ease infinite;
}
@-webkit-keyframes NamaElement {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes NamaElement {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes NamaElement {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

Untuk Warnanya kamu bisa menggantinya dan menambahnya lebih dari 4 warna dengan tanda # seperti contoh di atas

5. Cari Element yang background-nya akan di beri Animasi Gradient
6. Element tersebut biasanya di awali dengan tanda # atau .
7. ganti #NamaElement atau .NamaElement dengan Element yang ingin backgroundnya kamu beri Animasi Gradient.
8. Terakhir, Save dan lihat hasilnya
untuk Contoh hasilnya seperti di bawah.

Contoh
Share: