بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
ANAK AYAM atau sering kita sebut Kutuk dalam bahasa jawa adalah spesies unggas yang sering diternak oleh manusia. Telurnya dapat dibuat masakan atau sekedar digoreng bentuk mata sapi atau telur dadar. Anak ayam yang masih kecil biasanya dijual dengan cat warna-warni di sekolahan sekolahan yang memang banyak anak kecil sedang menimba ilmu disitu. Keunikan anak ayam ini membuat sedikit perbedaan kali ini, karena kita akan Membuat Gambar Animasi Anak Ayam yang Sedang Berjalan dengan teknik CSS3.
Sungguh aneh bukan, kreasi anak ayam berupa animasi yang ditunjukkan dalam olah kode CSS berikut ini. Tetapi memang faktanya begitu, dalam animasi ini, nanti si ayam dapat berjalan dengan pemakaian property CSS yang atraktif. Backgroundnya berupa awan melayang yang bergerak berlawanan arah dengan arah jalan si ayam. Sehingga menambah cantik visualisasi dari pergerakan animasi anak ayam berjalan ini.
Bagian-bagian tubuh si anak ayam mulai dari jengger, mulut, kepala, badan, sayap, mata dan kaki sengaja tergambar dengan pola dari program koding CSS. Setelah semua digabungkan dalam tag div, maka terbentuklah gambar keseluruhan anak ayam ini. Warna badan berupa warna kuning, seperti warna anak ayam pada umumnya. Warna jenger berupa kuning juga, dan mulut berwarna merah hati. Untuk kaki berwarna orange. Bayangan si anak ayam berwarna hitam. Sedangkan untuk warna awan berupa warna putih.
Baca Juga :
Pemakaian keyframe dalam membentuk sebuah animasi atau pergerakan penting disini. Rotate atau perputaran, Skew dan infinite dalam pergerakan kaki sehingga kaki tidak akan diam dan akan terus bergerak, sama seperti halnya pergerakan awan yang menggunakan property infinite sehingga awanpun juga bergerak tanpa henti. Delay, untuk pergerakan kaki sehingga ketika bergerak maka kaki itu akan silih berganti antara kaki kanan dan kiri. Perpaduan yang apik bukan.
Untuk lebih lengkapnya, silakan lihat tutorial berikut ini untuk dapat menampilkan animasi anak ayam berjalan.
Cara Menggambar Animasi Anak Ayam dengan CSS3
1. Masuk ke Dashboard Blogger
2. Ketika sudah berada di template, segera cari kode ]]></b:skin>. Dan segera tempelkan CSS dibawah ini diatas kode ]]></b:skin> itu.
3. Ini CSSnya.
*,
*:before,
*:after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #22A7F0;
}
.container {
height: 550px;
width: 100vw;
z-index: 1;
overflow: hidden;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.chick {
position: absolute;
height: 300px;
width: 80px;
margin: auto;
left: 0;
right: 0;
top: 260px;
}
.body {
position: absolute;
height: 65px;
width: 100px;
background-color: #ffec02;
border-radius: 100px 100px 0 0;
top: -2px;
animation: body-walk 0.8s infinite;
}
@keyframes body-walk {
50% {
top: 7px;
}
}
.body:before {
content: "";
position: absolute;
height: 80px;
width: 150px;
background-color: #ffec02;
top: 65px;
right: 0;
border-radius: 15px 0 150px 150px;
}
.wing {
height: 37px;
width: 74px;
background-color: #ffce00;
position: absolute;
top: 55px;
left: -40px;
border-radius: 10px 10px 74px 74px;
transform-origin: right;
animation: wing 1s infinite;
}
@keyframes wing {
50% {
transform: rotate(10deg);
}
}
.beak {
position: absolute;
background-color: #CF000F;
height: 40px;
width: 40px;
border-radius: 5px;
top: 30px;
left: 68px;
transform: skewX(30deg) rotate(-25deg);
z-index: -1;
}
.left-leg,
.right-leg {
height: 50px;
width: 13px;
background-color: #f17c00;
position: absolute;
top: 100px;
left: 35px;
transform-origin: top;
transform: rotate(-45deg);
animation: walk 1s infinite;
z-index: -1;
}
.left-leg:before,
.right-leg:before {
content: "";
position: absolute;
height: 13px;
width: 40px;
background-color: #f17c00;
right: -20px;
top: 50px;
border-radius: 40px;
}
.right-leg {
animation-delay: 0.5s;
}
@keyframes walk {
33.33% {
transform: translateY(20px) rotate(0deg);
}
66.66% {
transform: translate(-25px, 10px) rotate(30deg);
}
}
.eye {
background-color: #CF000F;
height: 20px;
width: 20px;
position: absolute;
top: 32px;
left: 65px;
border-radius: 20px;
transform-origin: bottom;
animation: blink 2.5s infinite;
}
@keyframes blink {
30% {
height: 1px;
top: 40px;
}
}
.blush {
background-color: #fff;
position: absolute;
height: 15px;
width: 15px;
border-radius: 50%;
top: 48px;
left: 46px;
}
.feather {
height: 35px;
width: 12px;
border-radius: 35px;
background-color: #ffec02;
position: absolute;
left: 30px;
top: -20px;
transform: rotate(-15deg);
}
.feather:before {
content: "";
position: absolute;
height: 25px;
width: 12px;
background-color: #ffec02;
top: 5px;
left: 10px;
border-radius: 25px;
transform: rotate(25deg);
}
.shadow {
background-color: #000;
height: 12px;
width: 110px;
position: absolute;
bottom: 99px;
margin: auto;
left: 0;
right: 0;
z-index: -2;
border-radius: 25px;
animation: shadow 1s infinite;
}
@keyframes shadow {
50% {
transform: scaleX(1.13);
}
}
.cloud {
background-color: #F0E2C5;
height: 35px;
width: 120px;
border-radius: 120px;
position: absolute;
z-index: -3;
right: -130px;
}
.cloud:before {
position: absolute;
content: "";
background-color: #F0E2C5;
height: 65px;
width: 65px;
border-radius: 50%;
bottom: 10px;
left: 15px;
}
.cloud:after {
position: absolute;
content: "";
background-color: #F0E2C5;
height: 45px;
width: 45px;
border-radius: 50%;
bottom: 10px;
right: 10px;
}
.cloud1 {
top: 240px;
animation: cloud 10s 18px infinite linear;
}
.cloud2 {
top: 160px;
animation: cloud 10s infinite linear;
}
.cloud3 {
top: 60px;
animation: cloud 10s 5s infinite linear;
}
@keyframes cloud {
100% {
transform: translateX(calc(-100vw - 130px));
}
}4. Terakhir tempelkan HTML dibawah ini di : Tata Letak kemudian klik Tambah HTML/Javascript dan tempelkan di konten kosong disitu
<div class="container">
<div class="chick">
<div class="body">
<div class="wing"></div>
<div class="beak"></div>
<div class="eye"></div>
<div class="blush"></div>
<div class="feather"></div>
</div>
<div class="left-leg"></div>
<div class="right-leg"></div>
</div>
<div class="shadow"></div>
<div class="cloud cloud1"></div>
<div class="cloud cloud2"></div>
<div class="cloud cloud3"></div>
</div>Itu dia anak ayamnya sudah bisa berjalan atraktif. Dalam filsafah kehidupan, ayam diibaratkan sebagai semangat mencari rejeki yang menggebu-gebu. "Carilah rejeki dipagi hari jangan sampai dipatok ayam" pernah dengar khan seperti itu. Bener juga, jarang khan lihat ayam bangun kesiangan, ayam akan selalu bangun pagi sebelum mentari belum terbit kemudian membawa anak-anaknya untuk menceker ceker tanah mencari makanan. Filosofi hidup yang sarat makna.
Label Postingan :
CSS
Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Tutorial Menggambar Animasi Anak Ayam dengan CSS3 . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.
