Membuat Animasi Gradient Color Dengan CSS3

Membuat Animasi Gradient Color Dengan CSS3 - yo ^^ kemarin ketika saya ingin menjual theme hasil re-design ini saya , Ada yang bilang " Kok theme hasil re-design di jual" hemm menurut saya ada benarnya jugasi hehe.. okedeh saya minta maaf untuk itu saya akan membagikan theme hasil re-design ini secara gratis dan mudah2an sobat sekalian bisa menyukai hasil design mix saya :v hehe.

btw kali ini saya akan membagikan tutorial singkat dan mudah-mudahan sobat bisa dengan mudah menerapkannya di blog sobat.

Membuat Animasi Gradient Color Dengan CSS3 :

1. Buka Halaman Edit Tema Sobat.
2. lalu Masukkan Kode CSS dibawah ini Tepat di atas kode </style> atau </b:skin> .

 @-webkit-keyframes Gradient {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

@-moz-keyframes Gradient {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

@keyframes Gradient {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

    3.Jika kode di atas sudah di copy dan di terapkan maka selanjutnya sobat pilih bagian mana
       yang ingin sobat beri effect Gradient.
    4. Contoh saya ingin menambahkan effect di "Nav-wrapper", maka selanjutnya adalah

5.tanda yang saya lingkari merah adalah object yang akan kita ganti dengan Css di bawah ini.

 color: #fff;
    background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
    background-size: 400% 400%;
    -webkit-animation: Gradient 15s ease infinite;
    -moz-animation: Gradient 15s ease infinite;
    animation: Gradient 15s ease infinite;
} 

   6.Nah ini ketika sudah di tempelkan kode CSS di bawah ini hasilnya akan seperti di bawah ini
       kurang lebih :

Jika Masih belum jilas mari simak video berikut :

Oke sekian Tutorial Singkat ini jika masih bingung silahkan bertanya di kolom komentardisini saya hanya ingin berbagi ilmu yang sudah saya dapatkan semoga manfaat ya.

Baca Artikel Menarik lainnya

Loading...