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

Cara membuat animasi CSS bergerak terbaru diblogger

Hello sobat IcloudZer kali ini admin bakalan memberikan informasi mengenai blogger, dan khusus pada pembahasan kita kali ini admin akan membahas bagaiamana caranya membuat animasi keren CSS untuk ditampilkan diblogger

Info: Baiklah jika kamunya sudah penasaran yuk langsung aja kita bahas bersama sama okay, capcus!

Animasi CSS

Sebenarnya admin sudah banyak sih membahas mengenai animasi CSS mulai dari animasi CSS preloader, serta cara pembuatannya, namun kali ini admin hanya akan membahas mengenai animasi CSS saja, seperti bagaiamana cara membuatnya dan sebaginya lah

Penggunaan Animasi CSS

Seperti yang sudah admin katakan sebelumnya bahwa animasi CSS tersebut bisa digunakan untuk berbagi hal, semisal untuk membuat preloader page atau untuk ditampilkan karena animasinya keren, ya bisa dibilang Animasi CSS tersebut bisa digunakan sesuai keinginan yang masang sih menurut ane!!! Asalkan yang masang juga tau dasar kode pemasangannya benar ngak? Kalau nggak gimana tuh 😀 cara masangnya jadi ngelawak kan namanya

Contoh Tampilan

Sebagai pelengkapnya admin bakalan memberikan contoh tampilan atau contoh demo dari animasi CSS tersebut, nah berikut ini adalah contoh Tampilannya

Dibuat menggunakan CSS

Seperti yang sudah admin jelaskan sebelumnya bahwa animasi tersebut dibuat menggunakan kode CSS, jika kamu berfikir bahwa animasi tersebut bisa bergerak gerak dibuat menggunakan javascript apalagi kode pyton maka kamu lagi ngelawak nih!, ya meskipun untuk membuat animasi bisa menggunakan berbagai macam kode program, tapi didalam Blogger cukup menggunakan kode CSS saja

Cara Pembuatan

Baiklah sekarang admin akan mulai membahas bagaiamana sih caranya membuat animasi CSS bergerak untuk ditampilkan diblogger? Baiklah simak dan pelajari artikel kali ini hingga selesai okay

Kode CSS

Seperti biasanya yang bisa kamu lakukan adalah menyalin kode CSS dibawah ini kemudian kamu bisa meletakkannya diata kode <style>

#preloaderByRah{overflow:hidden;background:#f5f6fa;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
#innerByRah{width:50px;height:30px;position:fixed;left:50%;top:50%;margin:-25px 0 0 -15px}
.spinByRah{margin:0 auto;width:50px;height:30px;text-align:center;font-size:10px}
.spinByRah > div{background-color:#f80000;height:100%;width:6px;display:inline-block;-webkit-animation:stretchdelay 1.2s infinite ease-in-out;animation:stretchdelay 1.2s infinite ease-in-out}
.spinByRah .object2ByRah{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}
.spinByRah .object3ByRah{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}
.spinByRah .object4ByRah{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}
.spinByRah .object5ByRah{-webkit-animation-delay:-0.8s;animation-delay:-0.8s}
@-webkit-keyframes stretchdelay{0%,40%,100%{-webkit-transform:scaleY(0.4)}20%{-webkit-transform:scaleY(1.0)}}
@keyframes stretchdelay{0%,40%,100%{transform:scaleY(0.4);-webkit-transform:scaleY(0.4)}20%{transform:scaleY(1.0);-webkit-transform:scaleY(1.0)}}
</style>

Info: Kamu juga bisa menggunakan kode atau tag <style> untuk meletakkan kode CSS diatas

Kode HTML

Langkah selanjutnya yang bisa kamu lakukan adalah menyalin dan menggunakan kode HTML dibawah ini, kemudian kamu bisa meletakkannya sesuai keinginan kamu aja

<div id='preloaderByRah'>
  <div id='innerByRah'>
     <div class='spinByRah'>
      <div class='object1ByRah'></div>
      <div class='object2ByRah'></div>
      <div class='object3ByRah'></div>
      <div class='object4ByRah'></div>
      <div class='object5ByRah'></div>
    </div>
  </div>
</div>

Info: Karena kode html diatas berfungsi untuk menampilkan animasi nya







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.