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