Cara Membuat Animation Gradient Bergerak

cara membuat warna gradient bergerak pada menu navigasi blog - mungkin anda pernah melihat blog atau website menggunakan fitu css 3 yaitu animation yang termasuk gradient alias warna berganti-ganti otomatis.

mungkin anda tertarik memasangnya seperti blog surya pero ini. anda melihat itu keren bukan ? tetapi menurut saya memang bagus tapi tidak enak di lihat oleh pengunjung.

warna gradient adalah element pada css yang berfungsi untuk memberi warna untuk blog/website oleh programmer. tidak semua programmer memasang gradient ini. anda mau melihat warna gradient yang banyak, silahkan kunjungi website W3School disana anda bisa melihat lebih banyak fitur yang keren dan sekalian belajar sedikit.

Cara Memasang Gradient Bergerak Di Menu Navigasi
1. Buka Blogger > Theme > Edit HTML.
2. Cari <div id='header'>.
3. Tambahkan class, sehingga <div id='header' class='suryagradient'>

Sebelum

<div id='header'>

Sesudah Menambahkan class

<div id='header' class='suryagradient'>

4. Jika sudah ada class yang terbuat. anda bisa menambahkan class selanjutnya, seperti dibawah.

Sebelum

<div id='header' class='header'>

Sesudah

<div id='header' class='header suryagradient'>

5. Tambahkan script css di bawah di atas </style>.

.suryagradient {
    background: linear-gradient(45deg, #f22613, #f89406, #26a65b, #5868ec, #f54e80, #f7ca18, #d2527f);
    background-size: 500% 500%;
    -webkit-animation: suryapelangi 12s ease infinite;
    -moz-animation: suryapelangi 12s ease infinite;
    animation: suryapelangi 12s ease infinite;
}
@-webkit-keyframes suryapelangi {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes suryapelangi {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes suryapelangi {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

Apabila gradient warnanya tidak jalan, berarti #header atau .header sudah ada element background. contoh.
solusinya, anda bisa menghapus element background-colornya.

#header {
background-color : #888;
display: inline-block:
border-radius: 30px;
}

.header {
background-color : #888;
display: inline-block:
border-radius: 30px;
}

Demikianlah cara memasang gradient warna bergerak di menu navigasi. semoga bermanfaat untuk anda

Berbagi :