Cara Menciptakan Animasi Burung Dengan Css

Cara Membuat Animasi Burung Dengan CSS

Animasi dengan format png kini sudah ketinggalan jaman, banyak animasi yang sanggup dibentuk memakai CSS3. Untuk membuatnya sendiri tentu tidak mudah, Anda harus sanggup mempelajari CSS3 terlebih dahulu. Pada kesempatan ini, aku ingin share Animasi burung yang aku buat memakai 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 sanggup meletakkannya didalam template atau postingan sesuai impian 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