بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
LEBAH adalah serangga yang beterbangan dan penghasil madu. Dijelaskan juga dalam sebuah ayat di dalam kitab suci Al Quran, bahwa lebah merupakan serangga penolong umat manusia. Sungguh hebat bukan serangga satu ini. Karena dengan madu yang manis ini kita sehari-hari dapat meminumnya dan efeknya sangat berkhasiat untuk mengembalikan stamina tubuh. Sekarang ini kita akan mempraktekkan tutorial Membuat Serangga Lebah dapat Terbang di Halaman Display Blogspot kalian.
Surat An Nahl (lebah, red) ayat 68 berbunyi "Dan Tuhanmu mengilhamkan kepada lebah: Buatlah sarang-sarang di bukit-bukit, di pohon-pohon kayu, dan di tempat-tempat yang dibikin manusia." Dalam surat itu termaktub bahwa serangga ini memang sangat spesial diantara serangga-serangga lainnya. Maka memang pantaslah dibuat trik CSS3 Membuat Serangga Lebah Beterbangan di Beranda Blog.
Begitu juga tidak hanya dalam kitab suci umat muslim tersebut, tapi dalam keseharian terutama kita (blogger), animasi lebah terbang dapat diterapkan dalam sebuah halaman display blog seperti yang diutarakan diatas. Animasi yang memukau visual tentunya hanya dengan menerapkan property CSS di dalam template blog, maka animasi lebah beterbangan di blog ini akan muncul.
Baca Juga :
Permainan coding CSS3 di era jaman sekarang ini sudah menjanjikan dan memberikan hasil yang fantastis. Dan memang hasil dari ini yaitu animasi lebah terbang dan bergerak naik turun itu. Selain itu saya juga sudah membuat animasi Koala tidur di Ranting Pohon dan juga Animasi anak ayam yang sedang berjalan.
Sekarang kita praktekkan saja ya cara pembuatannya.
Cara Membuat Lebah Beterbangan dengan CSS di Halaman Blog
1. Masuk ke Tema2. Klik Sesuaikan : Edit HTML
3. Kemudian cari kode ]]></b:skin> lalu tempelkan kode dibawah ini diatas kode tadi
*,*:before,*:after{padding:0;margin:0;box-sizing:border-box;}
body{background-color:#49befe;}
.bee{height:100px;width:270px;background-color:rgba(255,255,255,0.4);position:absolute;margin:auto;left:0;right:0;top:0;bottom:-150px;border-radius:50px;animation:fly 4s infinite;}
@keyframes fly{50%{transform:translateY(-150px);}}
.bee:before{position:absolute;content:"";height:200px;width:140px;background:linear-gradient(
#ffec02 70%,#202020 70%,#202020 75%,#ffec02 75%,#ffec02 80%,#202020 80%,#202020 85%,#ffec02 85%,#ffec02 90%,#202020 90%,#202020 95%,#ffec02 95%
);border-radius:70px;left:65px;bottom:-45px;}
.eye,.eye:before{position:absolute;height:13.5px;width:25px;border:7px solid #202020;border-radius:20px 20px 0 0;bottom:95px;border-bottom:none;}
.eye{left:98px;}
.eye:before{content:"";bottom:0;left:40px;}
.antenna,.antenna:before{position:absolute;height:50px;width:8px;background-color:#202020;}
.antenna{left:164px;bottom:130px;transform:rotate(25deg);z-index:-1;}
.antenna:before{content:"";right:55px;top:25px;transform:rotate(-50deg);}
.antenna:after{position:absolute;content:"";height:20px;width:20px;background-color:#202020;border-radius:50%;left:-6px;bottom:40px;box-shadow:-72px 35px #202020;}
.mouth{position:absolute;height:40px;width:80px;background:radial-gradient(circle at 50% 100%,#ff90a3 15px,#202020 16px);top:20px;left:93px;border-radius:0 0 40px 40px;}
.mouth:before{position:absolute;content:"";height:10px;width:50px;background-color:#ffffff;left:14px;top:-0.5px;}4. Masuk ke Tata Letak dan tempelkan juga kode dibawah untuk memanggil CSS yang sudah kita taruh di template
<div class="bee">
<div class="eye"></div>
<div class="antenna"></div>
<div class="mouth"></div>
</div>Nah setelah itu simpan dan publish pekerjaan kalian dan lihat di blog. Sudah jadi khan dan ada lebah terbangnya? pasti sudah ada. Lucu lagi lebahnya. Kelihatan itu lagi senyum-senyum sendiri lebahnya hehe. Okelah, sudah selesai tutorial kali ini dan terima kasih yang sudah mau mampir ke sini di artikel Animasi Lebah Bergerak Terbang Ala Coding CSS. Bergunalah dirimu untuk orang lain, bila tidak bisa paling tidak bergunalah untuk dirimu sendiri. Gunakan masa mudamu sebelum tuamu, gunakan masa sehatmu sebelum sakitmu, dan gunakan masa kayamu sebelum kamu jatuh miskin. Salam.
