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

Cara membuat animasi CSS manusia terbang diblogger

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







About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
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.