Hello sobat ICloudzer kali ini admin bakalan memberikan informasi mengenai bagaimana caranya membuat animasi CSS manusia terbang diblogger
Info: Baiklah jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Manusia Terbang
Dengan kode kode pemrograman apapun bisa kita lakukan untuk membuat tampilan apapun yang kita inginkan asalakan kitabmngetahui bagaimana cara kerja dari setiap tampilan yang ingin kita buat
Contohnya kali ini adalah kita akan membuat seuah tampilan animasi CSS manusia terbang, yang mana Animasi CSS tersebut bisa digunakan untuk membuat preloader blog atapun yang lainnya
Dibuat Menggunakan CSS
Kode dasar dalam membuat animasi CSS manusia terbang tersebut hanya bersumber dari kode CSS, nah setiap elemen didalam tampilan tersebut memang diciptakan melalui unsur kode CSS saja, hal tersebut membuat semakin responsif dan optimal ketika ditampilkan didalam blog
Fungsi
Seperti yang sudah admin jelaskan sebelumnya fungsi dari animasi CSS manusia terbang tersebut, bisa digunakan untuk membuat loading page, atau biasa yagbdikenal dengan preloader blog, nah namun untuk membuat preloader harus menggunakan tambhan kode javascript sebagai pengoptimalan Tampilan dari Animasi CSS tersebut
Contoh Tampilan
Untuk mengurangi rasa penasaran kamu terhadap animasi CSS manusia terbang tersebut kmau bisa melihat contoh tampilan yang telah admin sediakan, gunakn tombol dibawah ini untuk langsung melihat contoh tampilan tersebut
Info: Bagaimana sobat dengan contoh tampilannya keren dan awesome ya 😉
Cara pembuatan
Baiklah sekarang saatnya admin bakalan menjelaskan mengenai cara pembuatan animasi CSS manusia terbang diblogger terbaru
Kode CSS
Langkah pertama seperti biasanya kamu bisa menyalin kode CSS dibawah ini, kemudian kamu bisa meletakkannya diatas kode ]]></b:skin>
.rahfly{position:absolute;top:50%;margin-left:-50px;left:45%;animation:speeder .4s linear infinite;-webkit-animation:slide-down 1s ease-out;animation:slide-down 1s ease-out;}
.rahfly > span{height:5px;width:35px;background:#f80000;position:absolute;top:-19px;left:60px;border-radius:2px 10px 1px 0}
.rahbase span{position:absolute;width:0;height:0;border-top:6px solid transparent;border-right:100px solid #f80000;border-bottom:6px solid transparent}
.rahbase span:before{content:"";height:22px;width:22px;border-radius:50%;background:#f80000;position:absolute;right:-110px;top:-16px}
.rahbase span:after{content:"";position:absolute;width:0;height:0;border-top:0 solid transparent;border-right:55px solid #f80000;border-bottom:16px solid transparent;top:-16px;right:-98px}
.rahface{position:absolute;height:12px;width:20px;background:#f80000;border-radius:20px 20px 0 0;transform:rotate(-40deg);right:-125px;top:-15px}
.rahface:after{content:"";height:12px;width:12px;background:#f80000;right:4px;top:7px;position:absolute;transform:rotate(40deg);transform-origin:50% 50%;border-radius:0 0 0 2px}
.rahfly > span > span:nth-child(1),.rahfly > span > span:nth-child(2),.rahfly > span > span:nth-child(3),.rahfly > span > span:nth-child(4){width:30px;height:1px;background:#f80000;position:absolute;animation:fazer1 .2s linear infinite}
.rahfly > span > span:nth-child(2){top:3px;animation:fazer2 .4s linear infinite}.rahfly > span > span:nth-child(3){top:1px;animation:fazer3 .4s linear infinite;animation-delay:-1s}
.rahfly > span > span:nth-child(4){top:4px;animation:fazer4 1s linear infinite;animation-delay:-1s}@keyframes fazer1{0%{left:0}100%{left:-80px;opacity:0}}@keyframes fazer2{0%{left:0}100%{left:-100px;opacity:0}}@keyframes fazer3{0%{left:0}100%{left:-50px;opacity:0}}@keyframes fazer4{0%{left:0}100%{left:-150px;opacity:0}}@keyframes speeder{0%{transform:translate(2px,1px) rotate(0deg)}10%{transform:translate(-1px,-3px) rotate(-1deg)}20%{transform:translate(-2px,0px) rotate(1deg)}30%{transform:translate(1px,2px) rotate(0deg)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,3px) rotate(-1deg)}60%{transform:translate(-1px,1px) rotate(0deg)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-2px,-1px) rotate(1deg)}90%{transform:translate(2px,1px) rotate(0deg)}100%{transform:translate(1px,-2px) rotate(-1deg)}}
.longfazers{position:absolute;width:100%;height:100%}.longfazers span{position:absolute;height:2px;width:20%;background:#f80000}.longfazers span:nth-child(1){top:20%;animation:lf .6s linear infinite;animation-delay:-5s}.longfazers span:nth-child(2){top:40%;animation:lf2 .8s linear infinite;animation-delay:-1s}.longfazers span:nth-child(3){top:60%;animation:lf3 .6s linear infinite}.longfazers span:nth-child(4){top:80%;animation:lf4 .5s linear infinite;animation-delay:-3s}@keyframes lf{0%{left:200%}100%{left:-200%;opacity:0}}@keyframes lf2{0%{left:200%}100%{left:-200%;opacity:0}}@keyframes lf3{0%{left:200%}100%{left:-100%;opacity:0}}@keyframes lf4{0%{left:200%}100%{left:-100%;opacity:0}}Info: Atau kamu bisa menggunakan Tag <style> untuk meletakkan kode CSS diatas
Kode HTML
Lagkah selanjutnya yang bisa kamu lakukan adalah menyin lagi kode HTML dibawah ini, kemudian kamu bisa meletakkan atau menggunakan kode HTML berikut ini sesuai keinginan kamu aja
<div class='rahfly'>
<span><span/><span/><span/><span/></span>
<div class='rahbase'>
<span/>
<div class='rahface'/>
</div></div>
<div class='longfazers'>
<span/><span/><span/><span/>
</div>Info: Kode HTML diatas berfungsi untuk menampilkan animasi CSS manusia terbang tersebut