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

26 November 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat