Hai, lama tidak berjumpa lagi dengan kalian Blogger Indonesia. So pada kesempatan kali ini saya akan share Tutorial Membuat Animasi Air Bergelombang agar terlihat menarik pada tema-tema yang sedang kalian pakai. Kalau temanya gitu-gitu aja terus mah ngak bakal seru donk karena penampilan yang dibuat itu aja terus ikutin tutorial yang sudah ada dan dipakai lagi dan lagi jadinya kayak monoton gitu ngak ada IDE lain lagi apa ?
Dengan adanya tutorial ini dapat membuat kalian untuk mendapatkan Ide desain yang bagus dan berbeda tentunya dengan yang lain. Tapi tergantung kitanya sih mau dibuat apa itu tampilan blog.
Cara Membuat Animasi Air Bergelombang
Pertama buka Blog > klik Tema > klik Edit HTML
Kedua tambahkan kode berikut tepat dibawah kode </header>
<section>
<div class='air air1'></div>
<div class='air air2'></div>
<div class='air air3'></div>
<div class='air air4'></div>
</section>Selanjutnya tambahkan kode css tepat diatas kode </style> or </b:skin>
section{
position: relative;
width: 100%;
height: 100vh;
background: #3586ff; // Change If You Added New Background Color
overflow: hidden;
}
section .air{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background: url(https://1.bp.blogspot.com/-xQUc-TovqDk/XdxogmMqIRI/AAAAAAAACvI/AizpnE509UMGBcTiLJ58BC6iViPYGYQfQCLcBGAsYHQ/s1600/wave.png);
background-size: 1000px 100px
}
section .air.air1{
animation: wave 30s linear infinite;
z-index: 1000px;
opacity: 1;
animation-delay: 0s;
bottom: 0;
}
section .air.air2{
animation: wave2 15s linear infinite;
z-index: 999;
opacity: 0.5;
animation-delay: -5s;
bottom: 10px;
}
section .air.air3{
animation: wave 30s linear infinite;
z-index: 998;
opacity: 0.2;
animation-delay: -2s;
bottom: 15px;
}
section .air.air4{
animation: wave2 5s linear infinite;
z-index: 997;
opacity: 0.7;
animation-delay: -5s;
bottom: 20px;
}
@keyframes wave{
0%{
background-position-x: 0px;
}
100%{
background-position-x: 1000px;
}
}
@keyframes wave2{
0%{
background-position-x: 0px;
}
100%{
background-position-x: -1000px;
}
}Terakhir simpan Tema
Bagi kalian yang ingin melihat tampilannya bisa klik tombol berikut
Semoga artikel ini bermanfaat bagi kalian semua 😀
