Cara Membuat Animasi Air Bergelombang di Blog

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbhzTDFrlzv2qFV1h1335P9oWKmOBArj5xzLdRSGFkYLH-OphiOMRcI-T-E0oXBK1kVBZStANPx6z6cT01szUCjYmcJ5ywHVzsYXDpsiYlywR3fDu5Dtm0aJZVPrxoyRv7DCEWXR8_c6FU/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

Demo

Semoga artikel ini bermanfaat bagi kalian semua :D