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

Bila ingin copas silahkan lapor & cantumkan link berikut.
Source : https://wajahilmu.blogspot.com/2015/05/cara-membuat-animasi-burung-dengan-css.html

9 komentar

Tuliskan komentar

Unknown

author

8 May 2015, 13:37:00 delete

Keren, terima kasih infonya :)

Balas

8 May 2015, 13:48:00 delete

thanks share gan.

Admin

8 May 2015, 15:47:00 delete

nice info ... :) bermanfaat

10 May 2015, 01:59:00 delete

ijin comot gan thx :)

10 May 2015, 05:40:00 delete

Izin,pelajari gan,thx infonya :)

Anonymous

11 Aug 2015, 07:48:00 delete

lucu gan kalau dikasih burung-burung gitu . . . . .

hauzan

11 Aug 2015, 11:16:00 delete

Izin comot gan :D

Erenka

11 Aug 2015, 13:26:00 delete

thanks gan sudah berbagi ilmu :D

fladykeren

6 May 2016, 17:02:00 delete This comment has been removed by a blog administrator.

✖ Komentar dengan isi Link Aktif, Promosi, atau mengandung unsur Sara akan dihapus.
✔ Bila ingin riquest, bertanya, atau sekedar say hi aja, silahkan ke halaman OOT
✔ Untuk menyisipkan kode, silahkan parse lalu copy dan paste hasil parse ke kolom komentar.

EmoticonEmoticon OOT

Cara Membuat Animasi Burung Dengan CSS

Share this :

9 komentar