Egrets Animation with Audio

Memasang kode Egrets Animation with Audio Player
Code ini menggunakan CSS dan HTML. Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog baru, buat satubuah link baru  kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template  
ganti dengan kode blank template, yang tersedia pada sumber  berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai

Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style class="Mys2010-styles">
body {background-image: url
(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipXINuiF6oTJaOFNQwFduzE2MncUktjr20BScBsLO-NuqNJjv_HwvGM8Rjb8u_VpbmOeXw8V1VyStIG_qUBL2zZGSvo68lIWQBbE7DlIC5ghTKcF9L6DUdoxJsD2lm5ZjvOZ1L3OAah0SY/s1600-r/rumput-mys2010.jpg)
;color:red;height:100%;overflow:hidden;}

header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  0px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #228B22;
  border-bottom: 3px solid #dad;
} 

.contenedor{
  position:relative;
  width:700px;
  height:700px;
  border-radius:100%;   
  margin: -120px auto;
}
.cigu{
  position:absolute;
  margin: 0  0px;
}
.cabeza{
  position:absolute;
  width:95px;
  height:85px;
  
  margin:123px 295px;
  -webkit-animation:rotar 3s alternate infinite;
          animation:rotar 3s alternate infinite;
}
.head{
  position:absolute;
  width:95px;
  height:85px;
  background:white;
  border-radius:100%;
   margin:0px 0px;
  
}
.ojo{
  position:absolute;
  width:21px;
  height:21px;
  border-radius:100%;
  border:2px solid black;
  margin:21px 50px;
  -webkit-animation:cerrar 3s alternate infinite;
          animation:cerrar 3s alternate infinite;
 
}
.iris{
  position:absolute;
  width:19px;
  height:19px;
  border-radius:100%;
  background:black;
  margin:0px 0px;
   -webkit-animation:bajar 3s alternate infinite;
           animation:bajar 3s alternate infinite;
}

.iris::before{
  content:"";
  position:absolute;
  width:9px;
  height:9px;
  border-radius:100%;
  background:white;
  margin:0px 7px
    
}
.boca{
  position:absolute;
  width: 0;
  height: 0;
   width: 0;
  height: 0;
  border-top: 21px solid #FC5800;
  border-right: 172px solid transparent;
  margin:30px 50px;
 
}
.boca3{
  
  position:absolute;
  width: 0;
  height: 0;
   width: 0;
  height: 0;
  border-top: 12px solid  #DD5C00;
  border-right: 172px solid transparent;
  margin:43px 50px;
    -webkit-transform:rotate(-5deg);
            transform:rotate(-5deg);
  -webkit-animation:rotar3 3s alternate infinite;
          animation:rotar3 3s alternate infinite;
}
.cuello{
  position:absolute;
   width: 212px;
  height: 150px;
  border-top: 30px solid white;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
    border-radius: 192px / 100px;
  -webkit-transform:rotate(95deg);
          transform:rotate(95deg);
  margin:182px 121px;
   
}
.body{
  position:absolute;
  width:212px;
  height:112px;
  border-radius:0 0 172px 172px;
  background:white;
  
  margin:330px 112px
}
.ala{
  position:absolute;
  width:192px;
  height:152px;
  border-radius:300px 3000px 300px 3000px;
  background:#212121;
  margin:-60px -12px;
  -webkit-transform:rotate(-40deg);
          transform:rotate(-40deg);
  -webkit-animation:rotar7 3s alternate infinite;
          animation:rotar7 3s alternate infinite;
}
.ala::before{
  content:"";
  position:absolute;
  width:132px;
  height:152px;
  border-radius:300px 3000px 300px 3000px;
  background:white;
  margin:0px 60px;
  
}
.legs{
  position:absolute;
  width:12px;
  height:192px;
  background:#FC5800;
  margin:400px 231px
}
.legs3{
  
  position:absolute;
 width:12px;
  height:172px;
  
   background:#FC5800;
  margin:421px 185px;
   -webkit-transform:rotate(12deg);
           transform:rotate(12deg);
  
}
.legs7{
  
  position:absolute;
  width:50px;
  height:30px;
  border-radius:100%;
  
border-top: 12px groove #FC5800;
 
  margin:180px 0px
}
.legs7::before{
  content:"";
  position:absolute;
  width:50px;
  height:30px;
  border-radius:100%;
  border-top: 12px groove #FC5800;
   margin:-3px 0px;
  -webkit-transform:rotate(12deg);
          transform:rotate(12deg)
}
.legs7::after{
  content:"";
  position:absolute;
  width:50px;
  height:30px;
  border-radius:100%;
  border-top: 12px groove #FC5800;
   margin:0px -5px;
  -webkit-transform:rotate(21deg);
          transform:rotate(21deg)
}

.legs9{
  
  position:absolute;
  width:50px;
  height:30px;
  border-radius:100%;
  
border-top: 12px groove #FC5800;
 
  margin:155px 0px
}
.legs9::before{
  content:"";
  position:absolute;
  width:50px;
  height:30px;
  border-radius:100%;
  border-top: 12px groove #FC5800;
   margin:-3px 0px;
  -webkit-transform:rotate(9deg);
          transform:rotate(9deg)
}
.legs9::after{
  content:"";
  position:absolute;
  width:50px;
  height:30px;
  border-radius:100%;
  border-top: 12px groove #FC5800;
   margin:0px -3px;
  -webkit-transform:rotate(12deg);
          transform:rotate(12deg)
}
.bag, .bag3{
  position:absolute;
  display:block;
  width: 70px;
  height: 102px;
  border-radius: 50%  50%  50%  50%  / 50%   50%   50%  50%;
  
 
}

.bag{
  background:lightblue;
  margin:500px 330px;
}

 
.bag3{
   background:pink;
  margin:500px 421px
}


@-webkit-keyframes rotar{
  0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
  100%{-webkit-transform:rotate(40deg);transform:rotate(40deg)}
}
@keyframes rotar{
  0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
  100%{-webkit-transform:rotate(40deg);transform:rotate(40deg)}
}
@-webkit-keyframes rotar3 {
  0%{margin-top:43px}
  100%{margin-top:40px;-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}
}
@keyframes rotar3 {
  0%{margin-top:43px}
  100%{margin-top:40px;-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}
}
@-webkit-keyframes rotar7{
  0%{-webkit-transform:rotate(-40deg);transform:rotate(-40deg)}
  100%{-webkit-transform:rotate(-50deg);transform:rotate(-50deg)}
}
@keyframes rotar7{
  0%{-webkit-transform:rotate(-40deg);transform:rotate(-40deg)}
  100%{-webkit-transform:rotate(-50deg);transform:rotate(-50deg)}
}
@-webkit-keyframes cerrar{
 0%,25%{opacity:1}
  35%{opacity: 0}
  50%{opacity:1;}
  100%{opacity:1}
}
@keyframes cerrar{
 0%,25%{opacity:1}
  35%{opacity: 0}
  50%{opacity:1;}
  100%{opacity:1}
}
@-webkit-keyframes bajar{
 0%,25%{margin:0 0 }
  35%{margin: 0 0px}
  50%{margin:3px 3px;}
  75%{margin:3px 4px;}
  100%{margin:3px 3px}
}
@keyframes bajar{
 0%,25%{margin:0 0 }
  35%{margin: 0 0px}
  50%{margin:3px 3px;}
  75%{margin:3px 4px;}
  100%{margin:3px 3px}
}
   
/*audio*/
.buttons{
  width:500px;
  margin:0 auto;
  text-align:center;
  font-family: 'Bernard MT Condensed', sans-serif;
  font-size:18px;
  color: #EE82EE
}
.buttons a:hover {
  background-color:#0033CC;}
.buttons a:active, a:focus {
background-color:  #FF6347;
 box-shadow:0 0px 0 rgba(0,0,0,0.4) inset;  
  transition:all 0.1s}
audio{
  display:none
}

<div class="contenedor">
<div class="cigu">
<div class="cuello">
</div>
<div class="cabeza">
<div class="boca">
</div>
<div class="boca3">
</div>
<div class="head">
<div class="ojo">
<div class="iris">
</div>
</div>
</div>
</div>
<div class="legs">
<div class="legs7">
</div>
</div>
<div class="legs3">
<div class="legs9">
</div>
</div>
<div class="body">
<div class="ala">
</div>
</div>
<div class="bag">
</div>
<div class="bag3">
</div>
</div>
</div>

<header> 
<div class="Top Title Header">
<div class="buttons">
<a href="#" data-fx="epic.swf_1"> <font size="3" color="orange"face="arial"><b>♫ PLAY ♫</b></a>
</div>
</header>

<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>$('.buttons a').on('click', function (e) {
    e.preventDefault();
    $('audio').remove();
    var fx = $(this).attr('data-fx');
    $('<audio controls="controls" autobuffer="autobuffer" autoplay="autoplay"> <source src="https://sites.google.com/site/studiedingsongmp3/arcana/egrets-Mys2010s.mp3"  type="audio/mpeg"> </audio>').appendTo('.buttons');
});
 
</script>

Edited by. Myscript2010
bird Code by. Judith Neumann
Code Soundboard Mp3 by. Nodws

DEMOSHOW

If you want to directly copy and paste you canDownload Here Egrets with Audio

Category: Egrets Animation with Audio

Tweet