Cara Membuat Animasi Burung Dengan CSS

Animasi dengan format png sekarang sudah ketinggalan jaman, banyak animasi yang bisa dibuat menggunakan CSS3. Untuk membuatnya sendiri tentu tidak mudah, Anda harus bisa mempelajari CSS3 terlebih dahulu. Pada kesempatan ini, saya ingin share Animasi burung yang saya buat menggunakan CSS3. Cara pemasangannya sangat mudah, silahkan ikuti tutorialnya.

1. Masukkan CSS terlebih dahulu.

#burung-terbang {
  padding-top:15px;
  background:#fff;
  overflow:hidden;
  position:relative;
  height:100px;
  width:690px;
  margin-bottom:15px;
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  border-radius:6px;
}

#air {
  position:relative;
  left:140px;
  -webkit-animation:'hover' 4s ease-in-out;
  -webkit-animation-iteration-count:infinite;
  -o-transition-property:top;
  -o-transition-duration:4s;
}

@-webkit-keyframes hover {
  0% {
    top:0;
  }
  50% {
    top:-10px;
  }
  100% {
    top:0;
  }
}

#eye1 {
  background:#fff !important;
  width:20px;
  height:20px;
  top:204px;
  left:137px;
  -webkit-border-radius:60px;
  -moz-border-radius:60px;
  border-radius:60px;
}

#eye2 {
  width:30px;
  height:30px;
  top:191px;
  left:133px;
  -webkit-border-radius:60px;
  -moz-border-radius:60px;
  border-radius:60px;
}

#whale6 {
  width:91px;
  height:52px;
  top:219px;
  left:200px;
  -webkit-border-bottom-left-radius:40px 10px;
  -moz-border-radius-bottomleft:40px 10px;
  border-bottom-left-radius:40px 10px;
  -webkit-border-bottom-right-radius:80px 80px;
  -moz-border-radius-bottomright:80px 80px;
  border-bottom-right-radius:80px 80px;
}

#whale7 {
  background:#fff !important;
  width:60px;
  height:30px;
  top:219px;
  left:222px;
  -webkit-border-bottom-left-radius:80px 80px;
  -moz-border-radius-bottomleft:80px 80px;
  border-bottom-left-radius:80px 80px;
  -webkit-border-bottom-right-radius:70px 70px;
  -moz-border-radius-bottomright:70px 70px;
  border-bottom-right-radius:70px 70px;
  -webkit-border-top-right-radius:15px 15px;
  -moz-border-radius-topright:15px 15px;
  border-top-right-radius:15px 15px;
}

.right div,
.left div {
  position:absolute;
  opacity:1;
  z-index:20;
  background:#f15a22;
}

.right,
.left {
  position:absolute;
  background:transparent !important;
  width:33px;
  height:30px;
}

.right .body1 {
  top:10px;
  left:1px;
  width:16px;
  height:19px;
  -webkit-border-bottom-left-radius:50px 60px;
  -moz-border-radius-bottomleft:50px 60px;
  border-bottom-left-radius:50px 60px;
}

.right .body2 {
  top:17px;
  left:17px;
  width:12px;
  height:12px;
  -webkit-border-bottom-right-radius:50px 50px;
  -moz-border-radius-bottomright:50px 50px;
  border-bottom-right-radius:50px 50px;
}

.right .body3 {
  top:12px;
  left:19px;
  width:13px;
  height:9px;
  -webkit-border-top-right-radius:50px 50px;
  -moz-border-radius-topright:50px 50px;
  border-top-right-radius:50px 50px;
  -webkit-border-top-left-radius:50px 50px;
  -moz-border-radius-topleft:50px 50px;
  border-top-left-radius:50px 50px;
}

.right .body4 {
  background:#fff !important;
  z-index:21 !important;
  top:1px;
  left:0;
  width:26px;
  height:16px;
  -webkit-border-bottom-right-radius:50px 50px;
  -moz-border-radius-bottomright:50px 50px;
  border-bottom-right-radius:50px 50px;
  -webkit-border-bottom-left-radius:50px 50px;
  -moz-border-radius-bottomleft:50px 50px;
  border-bottom-left-radius:50px 50px;
}

.right .body5 {
  background:transparent !important;
  top:12px;
  left:22px;
  width:4px;
  height:1px;
  border:4px solid transparent;
  border-bottom:4px solid #f15a22;
}

.right .eye {
  background:#fff !important;
  top:15px;
  left:26px;
  width:3px;
  height:3px;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  border-radius:2px;
}

@-webkit-keyframes flutter1 {
  0% {
    -webkit-transform:rotate(0deg);
  }
  50% {
    -webkit-transform:rotate(-25deg);
  }
  100% {
    -webkit-transform:rotate(0deg);
  }
}

@-webkit-keyframes flutter2 {
  0% {
    -webkit-transform:rotate(0deg);
  }
  50% {
    -webkit-transform:rotate(25deg);
  }
  100% {
    -webkit-transform:rotate(0deg);
  }
}

.right .wing {
  background:transparent !important;
  z-index:22 !important;
  width:15px;
  height:18px;
  bottom:4px;
  left:8px;
  -webkit-animation:'flutter1' 0.1s linear;
  -webkit-animation-iteration-count:infinite;
}

.right .wing1 {
  width:12px;
  height:12px;
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  border-radius:6px;
}

.right .wing2 {
  width:4px;
  height:12px;
  margin-top:-6px;
  -webkit-border-top-left-radius:5px 15px;
  -moz-border-radius-topleft:5px 15px;
  border-top-left-radius:5px 15px;
}

.right .wing3crop {
  background:transparent !important;
  overflow:hidden;
  width:4px;
  height:8px;
  margin-top:-6px;
  margin-left:4px;
}

.right .wing3 {
  background:transparent !important;
  width:10px;
  height:10px;
  margin-top:-8px;
  margin-left:-4px;
  border:4px solid #f15a22;
  -webkit-border-radius:12px;
  -moz-border-radius:12px;
  border-radius:12px;
}

.right .wing4 {
  background:#fff;
  width:6px;
  height:7px;
  margin-left:3px;
  margin-top:3px;
  -webkit-border-radius:2px 6px;
  -moz-border-radius:2px 6px;
  border-radius:2px 6px;
}

/* Bird other way */

  .left .body1 {
  top:10px;
  right:1px;
  width:16px;
  height:19px;
  -webkit-border-bottom-right-radius:50px 60px;
  -moz-border-radius-bottomright:50px 60px;
  border-bottom-right-radius:50px 60px;
}

.left .body2 {
  top:17px;
  right:17px;
  width:12px;
  height:12px;
  -webkit-border-bottom-left-radius:50px 50px;
  -moz-border-radius-bottomleft:50px 50px;
  border-bottom-left-radius:50px 50px;
}

.left .body3 {
  top:12px;
  right:19px;
  width:13px;
  height:9px;
  -webkit-border-top-left-radius:50px 50px;
  -moz-border-radius-topleft:50px 50px;
  border-top-left-radius:50px 50px;
  -webkit-border-top-right-radius:50px 50px;
  -moz-border-radius-topright:50px 50px;
  border-top-right-radius:50px 50px;
}

.left .body4 {
  background:#fff !important;
  z-index:21 !important;
  top:1px;
  right:0;
  width:26px;
  height:16px;
  -webkit-border-bottom-left-radius:50px 50px;
  -moz-border-radius-bottomleft:50px 50px;
  border-bottom-left-radius:50px 50px;
  -webkit-border-bottom-right-radius:50px 50px;
  -moz-border-radius-bottomright:50px 50px;
  border-bottom-right-radius:50px 50px;
}

.left .body5 {
  background:transparent !important;
  top:12px;
  right:22px;
  width:4px;
  height:1px;
  border:4px solid transparent;
  border-bottom:4px solid #f15a22;
}

.left .eye {
  background:#fff !important;
  top:15px;
  right:26px;
  width:3px;
  height:3px;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  border-radius:2px;
}

.left .wing {
  background:transparent !important;
  z-index:22 !important;
  width:15px;
  height:18px;
  bottom:4px;
  right:5px;
  -webkit-animation:'flutter2' 0.1s linear;
  -webkit-animation-iteration-count:infinite;
}

.left .wing1 {
  width:12px;
  height:12px;
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  border-radius:6px;
}

.left .wing2 {
  width:4px;
  height:12px;
  margin-top:-6px;
  margin-left:8px;
  -webkit-border-top-right-radius:5px 15px;
  -moz-border-radius-topright:5px 15px;
  border-top-right-radius:5px 15px;
}

.left .wing3crop {
  background:transparent !important;
  overflow:hidden;
  width:4px;
  height:8px;
  margin-top:-6px;
  margin-left:4px;
}

.left .wing3 {
  background:transparent !important;
  width:10px;
  height:10px;
  margin-top:-8px;
  margin-left:-10px;
  border:4px solid #f15a22;
  -webkit-border-radius:12px;
  -moz-border-radius:12px;
  border-radius:12px;
}

.left .wing4 {
  background:#fff;
  width:6px;
  height:7px;
  margin-left:3px;
  margin-top:3px;
  -webkit-border-radius:6px 2px;
  -moz-border-radius:6px 2px;
  border-radius:6px 2px;
}

2. Setelah itu, masukkan code pemanggilnya. Anda dapat meletakkannya didalam template atau postingan sesuai keinginan Anda.

<center>
<div id="burung-terbang">
<div id="air">
<div class="bird right" style="top: 5px; left: 112px;">
<div class="body1">
</div>
<div class="body2">
</div>
<div class="body3">
</div>
<div class="body4">
</div>
<div class="body5">
</div>

<div class="wing">
<div class="wing1">
</div>
<div class="wing2">
</div>
<div class="wing3crop">
<div class="wing3">
</div>
</div>
<div class="wing4">
</div>
</div>

<div class="eye">
</div>
</div>

<div class="bird right" style="top: 31px; left: 72px;">
<div class="body1">
</div>
<div class="body2">
</div>
<div class="body3">
</div>
<div class="body4">
</div>
<div class="body5">
</div>

<div class="wing">
<div class="wing1">
</div>
<div class="wing2">
</div>
<div class="wing3crop">
<div class="wing3">
</div>
</div>
<div class="wing4">
</div>
</div>

<div class="eye">
</div>
</div>

<div class="bird right" style="top: 66px; left: 176px;">
<div class="body1">
</div>
<div class="body2">
</div>
<div class="body3">
</div>
<div class="body4">
</div>
<div class="body5">
</div>

<div class="wing">
<div class="wing1">
</div>
<div class="wing2">
</div>
<div class="wing3crop">
<div class="wing3">
</div>
</div>
<div class="wing4">
</div>
</div>

<div class="eye">
</div>
</div>

<div class="bird right" style="top: 35px; left: 262px;">
<div class="body1">
</div>
<div class="body2">
</div>
<div class="body3">
</div>
<div class="body4">
</div>
<div class="body5">
</div>

<div class="wing">
<div class="wing1">
</div>
<div class="wing2">
</div>
<div class="wing3crop">
<div class="wing3">
</div>
</div>
<div class="wing4">
</div>
</div>

<div class="eye">
</div>
</div>

<div class="bird left" style="top: 17px; left: 173px;">
<div class="body1">
</div>
<div class="body2">
</div>
<div class="body3">
</div>
<div class="body4">
</div>
<div class="body5">
</div>

<div class="wing">
<div class="wing1">
</div>
<div class="wing2">
</div>
<div class="wing3crop">
<div class="wing3">
</div>
</div>
<div class="wing4">
</div>
</div>

<div class="eye">
</div>
</div>

<div class="bird left" style="top: 47px; left: 230px;">
<div class="body1">
</div>
<div class="body2">
</div>
<div class="body3">
</div>
<div class="body4">
</div>
<div class="body5">
</div>

<div class="wing">
<div class="wing1">
</div>
<div class="wing2">
</div>
<div class="wing3crop">
<div class="wing3">
</div>
</div>
<div class="wing4">
</div>
</div>

<div class="eye">
</div>
</div>
</div>
</div>
</center>

Berikut Demo Tampilannya

Cara Membuat Animasi Burung Dengan CSS

Belum ada Komentar untuk "Cara Membuat Animasi Burung Dengan CSS"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel