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

Cara membuat Animasi CSS keren diblogger

Hello sobat IcloudZer kali ini admin bakalan membahas mengenai sebuah animasi yang dibuat menggunakan kode CSS, dan admin nantinya akan menyertakan contoh tampilan dari animasi CSS tersebut

Info: Baiklah sekarang langsung aja kita bahas bersama sama yak

Animasi CSS

Animasi CSS merupakan suatu tampilan atau element yang dikombinasikan dengan animasi sehingga membuat element tersebut seperti hidup dan bergerak, nah hal tersebut lah mengapa element tersebut disebut sebagai animasi, dan lagi karena pembuatannya menggunakan kode CSS, maka animasi tersebut disebut sebagai animasi CSS

Penggunaan Animasi CSS

Penggunaan animasi CSS biasanya sih dipakai untuk membuat animasi preloader didalam blog, bisa juga hanya untuk ditampilkan di blog tanpa menjadikannya sebagai preloader, dan hal tersebut sesuai keinginan para pemasangnya

Contoh Tampilan

Untuk memperlengkap artikel kali ini admin bakalan memberikan contoh demo atau contoh tampilan dari animasi CSS tersebut, berikut ini adalah contoh tampilannya

Info: Bagaiamana sobat keren bukan contoh Tampilannya

Cara penggunaan

Baiklah admin akan menjelaskan bagaiamana caranya membuat animasi CSS atau untuk menampilkan animasi CSS nya

Kode CSS

Langkah pertama yang bisa kamu lakukan adalah menyalin kode CSS dibawah ini kemudian kamu bisa meletakkannya diatas kode ]]>>b:skin>

#preloadByRah{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinnerByRah{list-style:none;margin:0;padding:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.loaderByRah{display:inline-block;width:30px;height:30px;position:relative;border:4px solid #f80000;top:50%;animation:loaderByRah 2s infinite ease}
.loader-innerByRah{vertical-align:top;display:inline-block;width:100%;background-color:#f80000;animation:loader-innerByRah 2s infinite ease-in}
@keyframes loaderByRah{0%{transform:rotate(0deg)}
25%{transform:rotate(180deg)}50%{transform:rotate(180deg)}
76%{transform:rotate(350deg)}100%{transform:rotate(350deg)}}
@keyframes loader-innerByRah{0%{height:0%}
25%{height:0%}50%{height:100%}76%{height:100%}100%{height:0%}}

Info: Atau kamu bisa juga menggunakannya didalam artikel blog yaitu dengan menggunakan tag kode <style>

Kode HTML

Langkah selanjutnya untuk menampilkan animasi CSS tersebut, kamu bisa menyalin kode HTML dibawah ini, dan kemudian kamu bisa meletakkannya sesuai keinginan kamu aja

<div id='preloadByRah'>
<div class='spinnerByRah'>
<span class='loaderByRah'>
<span class='loader-innerByRah'>
</span>
</span>
</div>
</div>

Info: Nah sobat kamu bisa menampilkan animasi CSS tersebut dimana pun asalkan masih didalam body blog







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.