Membuat Animasi Gradient Color

Diposting pada

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

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

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *