Home Tools Contact Us Disclaimer Privacy

بسم الله الرحمن الرحيم

Beranda  ›  Blog  ›  Blogger  ›  SEO  ›  Tips  ›  Widget

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

Membuat Animasi Gradient Color


Author : Hendra Wijaya

datePublished : 12/04/2019 01:09:00 AM

Organization : TIRINFO.COM

logo TIRINFO

Url : https://www.tirinfo.com/2019/12/membuat-animasi-gradient-color.html

Share: