animasi ini tidak memberatkan blog atau web kalian karena Pure CSS "Tidak Pakai Javascript" jadi aman bagi kalian yang suka dengan kecepatan tapi ga lambatin blognya pasti wajib pakai ini supaya terlihat menarik dan kekinian.
Bagaimana animasi nya ? mungkin itu yang ingin diketahui oleh kalian bukan ? daripada penasaran coba di cek dulu "Demo" untuk "Animation Wave Water" tersebut dibawah :#
Bagaimana animasinya ? menarik bukan dan berbeda dengan yang lain :3
Untuk menambahkan ke "Blogger" kalian tinggal ikuti langkah dibawah ini
Cara Membuat Animasi Gelombarng Air di Blog
1. Buka Blogger
2. Klik Tema > Klik "Edit HTML"
3. Tambahkan kode berikut tepat dibawah kode <style> atau <b:skin>
#gelombang{position:relative;width:100%;height:100vh;background:#3586ff;overflow:hidden}#gelombang.air{position:absolute;bottom:0;left:0;width:100%;height:100px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ7Y33Bobd8WEFNOeHRkjgYAU2wazREUZQbVSHBRh5l9rBcz8KP7VlRJ3FmjnGFWP71LvbSaUbHmJrvmH74Xx9JXI4GZLQWsSvrv5B6kQbwIlozPEBkK7Osv2tXxeSfJEk-dlzy8eNQO1R/s1600/wave.png);background-size:1000px 100px}#gelombang .air.air1{animation:wave 30s linear infinite;z-index:1000;opacity:1;animation-delay:0s;bottom:0}#gelombang .air.air2{animation:wave2 15s linear infinite;z-index:999;opacity:0.5;animation-delay:-5s;bottom:10px}#gelombang .air.air3{animation:wave 30s linear infinite;z-index:998;opacity:0.2;animation-delay:-2s;bottom:15px}#gelombang .air.air4{animation:wave2 5s linear infinite;z-index:997;opacity:0.7;animation-delay:-5s;bottom:20px}@keyframes wave{0%{background-position-x:0}100%{background-position-x:1000px}}@keyframes wave2{0%{background-position-x:0}100%{background-position-x:-1000px}}
4. Tambahkan kode berikut tepat dibawah kode <body><div id='gelombang'>
<div class='air air1'></div>
<div class='air air2'></div>
<div class='air air3'></div>
<div class='air air4'></div>
</div>
5. Simpan Tema6. Selesai
Bagaimana hasilnya ? sama bukan dengan yang tampilan "Demo" tampilan nya sederhana tapi menarik mata kalian :3
Sampai disini saja dulu dan artikel pada blog ini akan terus saya update Setiap Hari meskipun cuman Satu atau Dua saja tapi itu lebih baik daripada Tidak :#
Post a Comment