Membuat Animasi Ombak Menggunakan CSS

Hallo teman-teman Dumet School, pada kesempatan kali ini saya akan Membuat Animasi Ombak Menggunakan CSS. Dimana Animasi ombak disini adalah animasi ombak yang terlihat bergerak naik turun. Animasi ombak yang saya buat cukup simpel dan sederhana karena hanya menggunakan css saja dan scriptnyapun tidak banyak. Langkah pertama untuk dapat Membuat Animasi Ombak Menggunakan CSS teman-teman terlebih dahulu membuat struktur html seperti di bawah ini.

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Membuat Animasi Ombak Menggunakan CSS</title>
 </head>
 <body>
    <div class="image">
        <div id="container">
            <svg  
                 x="0px"
                 y="0px"
                 viewBox="0 0 3841 108.5"
                 style="overflow:scroll;enable-background:new 0 0 3841 108.5;"
                 xml:space="preserve">
            <defs>
            </defs>
            <path style="fill:#FFFFFF; stroke-miterlimit:10;" d="M3360.5,97.739c-242,0-480-48.375-480-48.375
                S2647.5,0.5,2400.5,0.5s-480,48.375-480,48.375s-238,48.864-480,48.864s-480-48.375-480-48.375S727.5,0.5,480.5,0.5
                S0.5,48.875,0.5,48.875V108h1920h1920V48.875C3840.5,48.875,3602.5,97.739,3360.5,97.739z"/>
            </svg>

        </div>
    </div>
    <div class="white">
    </div>
 </body>
 </html>

Jika sudah membuat struktur html seperti script di atas maka tahap selanjutnya masih di file yang sama dengan struktur html teman-teman buat style css seperti di bawah ini untuk dapat Membuat Animasi Ombak Menggunakan CSS.

     <style>
     
         body,html{
             margin: 0;
             padding: 0;
             width: 100%;
             height: 100%;
             background: lightblue;
             overflow: hidden;
             
         }
         
         .white{
             width: 100%;
             height: 37%;
             background: white;
             
         }
     
         .image{
             width: 100%;
             background: url(NB.jpeg);
             background-size: cover;
             position: relative;
             display: flex;
             padding: 50px;
             box-sizing: border-box;
             justify-content: center;
             height: 73%;
         }
     
         #container{
             width: 100%;
             position: absolute;
             bottom: -6px;
             overflow: hidden;
          
         }
     
         #container svg{
             width: 200%;
             position: relative;
             animation: move-left 5s linear infinite;
             
         }
         
         @keyframes move-left{
             0%{
                 left: 0%;
             }
             100%{
                 left: -100%;
             }
             
         }
     </style>

 Jika sudah membuat html dan style css selanjutnya teman-teman bisa buka di halaman browser maka jika dilihat maka tampilannya akan seperti pada gambar di bawah ini. Dimana ada warna biru terang untuk background dan warna putih untuk ombaknya.

Demikian artikel tentang cara Membuat Animasi Ombak Menggunakan CSS. Semoga pembahasan artikel ini dapat bermanfaat untuk kalian dan kalian bisa langsung mencobanya. selamat mencoba