For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Cara membuat animasi gelombang air di blogger

Hello sobat icloudZer kali ini admin bakalan memberikan informasi mengenai bagaimana caranya membuat animasi efek seperti gelombang di blogger

Info: Oke jika kamu sudah penasaran dengan oemabajasan kita kali ini yuk langsung aja kita bahas bersama sama

Seperti Gelombang

Pernahkah kamu melihat air laut yang diiringi dengan gelombang wah pastinya keren sekali ya kan, nah hal tersebut bisa menjadi inspirasi untuk admin membuat sebuah tampilan di blogger menggunakan efek animasi seperti gelombang air laut, dan pada kode CSS posisi telah di tetapkan pada tampilan bawah footer, jika kamu ingin mengubahnya di oerlukan pemahaman kode CSS untuk membuat nya

Menggunakan Animasi

Pastinya untuk membuat tampilan di blogger bisa bergerak gerak adalah dengan menggunakan animasi, sedangakan animasi yang dimaksud bukanlah animasi atau anime yang ada di film film ya beda lah, tapi yang admin maksud disini adalah penggunaan animasi pada CSS, sama halnya untuk membuat tampilan seperti air bergelombang di blogger kita harus menggunakan animasi CSS

Responsive

Tampilan animasi gelombang di blogger tersebut sagat lah responsive yakni responsive pada tampilan mobile dan responsif juga pada tampilan desktop, dan kamu jagan khawatir jika dengan menggunakan animasi gelombang tersebut membuat blog kamu menjadi lambat, karena 100% pembuatan nya mengunakan kode CSS saja, insya Allah tidak akan membuat blog kamu menadi lambat

Contoh Tampilan

Jika kamu penasaran degan bagaimana contoh tampilan dari animasi air bergelombang tersebut, kamu bisa menggunakan tombol dibawah ini untuk langsung melihatnya

Info: Luar biasa keren kan, ya kan, ya lah

Cara pembuatan

Baiklah sekarang saatnya adin akan membahas mengenai bagaimana caranya membuat tampilan air gelombang di blogger menggunakan animasi kode CSS, perhatikan setiap langkah langakah yang admin Jabarkan sebentar lagi

Kode CSS

Langkah pertama yang bisa kamu lakukan untuk membuat tampilan seperti air bergelombang, kamu bisa menyalin kode CSS dibawah ini kemudian kamu bisa meletakkannya di atas kode ]]></b:skin>

/* Gelombang animasi by Icloudice */.rahnav-co{position:absolute;bottom:0;width:100%;z-index:-1} .rahnav-in{position:relative} .rahnav-in .waves{position:absolute;bottom:0;width:100%;height:53px;min-height:100px;max-height:150px;bottom:-8px} .rahnav-fl{position:relative;height:53px;background:#C6DAFC} .rah > use{fill:#C6DAFC;animation:rahnav-gel 25s cubic-bezier(.55,.5,.45,.5) infinite} .rah > use:nth-child(1){opacity:.7;animation-delay:-2s;animation-duration:7s} .rah > use:nth-child(2){opacity:.5;animation-delay:-3s;animation-duration:10s} .rah > use:nth-child(3){opacity:.3;animation-delay:-4s;animation-duration:13s} .rah > use:nth-child(4){opacity:1;animation-delay:-5s;animation-duration:20s} @media (max-width: 896px){.rahnav-co .rahnav-fl{height:200px}} @keyframes rahnav-gel{0%{transform: translate3d(-90px,0,0)}100%{transform: translate3d(85px,0,0)}} .dark-mode .rahnav-fl{background:} .dark-mode .rah > use{fill:#fefefe}

Info: Atau kamu bisa menggunakan tag kode <style> untuk meletakkan kode CSS di atas

Kode HTML

Langkah selanjutnya untuk membuat tampilan dari animasi gelombang air di blogger salin lagi kode HTML di bawah in kemudian letakkan di atas kode </body>

<div class='rahnav-co' id='rahnav-co'>
<div class='rahnav-in'>
 <svg class='waves' preserveaspectratio='none' shape-rendering='auto' viewbox='0 24 150 28'>
<defs>
 <path d='M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z' id='wave-bh'>
 </path>
</defs>
<g class='rah'>
 <use x='48' xlink:href='#wave-bh' y='0'>
 </use>
 <use x='48' xlink:href='#wave-bg' y='3'>
 </use>
 <use x='48' xlink:href='#wave-bh' y='5'>
 </use>
 <use x='48' xlink:href='#wave-bh' y='7'>
 </use>
</g>
 </svg>
</div>
<div class='rahnav-fl'>
</div>
 </div>

Info: Fungsi dari kode HTML diatas adalah untuk menampilkan tampilan gelombang air tersebut

Penjelasan

Dibutuhkan sedikit penjelasan agar saat kamu memasang dan meng install kode kode yang saya berkan di atas tidak salah alias benar, yag pertama bahwa setiap template itu berbeda mungkin saja tampilan efek animasi CSS air bergelombang tersebut tidak sesuai dengan template blog kamu, jadi uba saja pemgaturan properti width dan height pada kode CSS yang say berikan oke, sesuaikan nilai atau (value) nya samapai pas dengan template blog kamu ok

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
Best Viral Premium Blogger Templates from Icloudice


kami menawarkan berbagai template blogger dan produk istimewa untuk anda, support karya anak bangsa dengan membeli produk yang kami jual

Welcome to my store limited

  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Cookie Consent
    We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
    Oops!
    It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
    AdBlock Detected!
    We have detected that you are using adblocking plugin in your browser.
    The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
    Site is Blocked
    Sorry! This site is not available in your country.