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