birds animation

Memasang kode Birds Animation 
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 {font-family:"vivaldi";font-size: 1px;left: 130px;color: #000;margin-top:19px;height:100%;overflow:hidden;}
body {
background:#000;} 
body {      
  text-shadow: 
    0 0 .4em currentcolor, 
    0 0 .35em yellow,
    0 0 .5em orange,
    0 0 1em red,
    0 0 2em white;
} 
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:-4px;
  width: 100%;
text-align: center;
font-size:  6px;
background: linear-gradient(270deg,  #333, #660099, rgba(255, 0, 0, 0.60), #660099,#660, #B20000, #660, #660099, rgba(255, 0, 0, 0.60), #660099, rgba(255, 0, 0, 0.60));
  border-bottom: 3px solid #333;  
-webkit-animation: shadow 6s ease-in-out infinite;
          animation: shadow 6s ease-in-out infinite;
}
.ap {
position: fixed;
right: 0;
bottom:-5px;
left: 0;
height: 70px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
font-size:  11px;
background: linear-gradient(270deg,  rgba(255, 0, 0, 0.60), #660099, rgba(255, 0, 0, 0.60), #660099,#660, #B20000, #660, #660099, rgba(255, 0, 0, 0.60), #660099,  rgba(255, 0, 0, 0.60));
border-top: 2px solid rgba(46, 56, 79, 0.85);
z-index: 9999;
} 
h2 {
padding:15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #333 50%, transparent 90%); 
-webkit-animation: shadow 1s ease-in-out infinite;
          animation: shadow 1s ease-in-out infinite;
} 
/*Text Bawah1*/  
M-2010, #teks, #posisi, #dibawah, span {
  font: 900 15vw Raleway;
  position: relative;
  display: inline-block;
}
#M-2010, #teks, #posisi, #dibawah  {
    position: absolute;
    font-size: 11px;
    margin: 2px
}
#M-2010, #teks div {
    text-decoration: underline;
    cursor: pointer
}
#teks, #posisi {
    text-align: right;
    right:  50px;
}
#teks, #dibawah {
    text-align: left;
    left:  50px;
}
 #dibawah, #posisi {
    bottom:28px;
 -webkit-animation: shadow 6s ease-in-out infinite;
          animation: shadow 6s ease-in-out infinite;
}
@keyframes shadow {
  0% {
    text-shadow: 0 0 2px  #B0E0E6 , 
0 0 8px  #B0E0E6  , 0 0 10px  #B0E0E6 , 
0 0 20px  #B0E0E6 , 0 0 30px  #B0E0E6 , 
0 0 40px  #B0E0E6, 0 0 50px  #B0E0E6 , 
0 0 80px  #B0E0E6;
  }
  50% {
      text-shadow: 0 12px 7px rgba(255, 0, 0, 0.8),
 0 5px 15px rgba(0, 0, 0, 0.90), 0 0 50px rgba(0, 0, 0, 0.90),
 0 -10px 2px rgba(255, 0, 0, 0.8);
  }
 100% {
    text-shadow: 0 0 2px     #800080  , 
0 0 8px     #800080  , 0 0 10px     #800080  , 
0 0 20px     #800080  , 0 0 30px     #800080  , 
0 0 40px     #800080  , 0 0 50px     #800080  , 
0 0 80px     #800080  ;
  } 
}
/*end*/ 
.shadow-top:after { 
    content: " ";
    box-shadow: 0 0 200px 200px #111;  
  
}
.shadow-top:before {  
    content: " ";
    box-shadow: 0 0 200px 20px rgba(255, 0, 0, 0.90);    
}
#M2010-shadow  { 
margin:-110px;
box-shadow: 0 0 150px 25px  #Ff0;  
}
.shadow1:before,.shadow1:after {
    z-index:-1;
    position:absolute;
    content: " ";
    bottom:25px;
    left:10px;
    width:50%;     
    max-width:110px;
    box-shadow: 0 0 200px 90px rgba(255, 0, 0, 0.90);  
    -webkit-transform:rotate(-8deg);
    -moz-transform:rotate(-8deg);
    -o-transform:rotate(-8deg);
    -ms-transform:rotate(-8deg);
    transform:rotate(-8deg);
}
.shadow1:after {
    -webkit-transform:rotate(8deg);
    -moz-transform:rotate(8deg);
    -o-transform:rotate(8deg);
    -ms-transform:rotate(8deg);
    transform:rotate(8deg);
    right:10px;
    left:auto;
} 

.b-nav, body:after {
  position: absolute;
  right: 0;
}
.b-brand, .b-link { 
  font-size: 18px;
  font-weight: 700;
  margin-left: 0;
  text-decoration: none;
color: #dad;
  font-family: "Roboto Slab", serif;
  text-transform: capitalize;
  ;
}
@-webkit-keyframes slideInLeft {
  0% {
    -webkit-transform: translate3d(345px, 0, 0);
    transform: translate3d(345px, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}
@keyframes slideInLeft {
  0% {
    -webkit-transform: translate3d(345px, 0, 0);
    transform: translate3d(345px, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}
* {
  box-sizing: border-box
}
body:after {
  background: #000;
  content: '';
  height: 100%;
  left: 0;
  opacity: 0;
  padding: 0;
  top: 0;
  visibility: hidden;
  -webkit-transition: all .6s ease;
  transition: all .6s ease;
  width: 100%;
}
body.open:after {
  z-index: 10;
  opacity: 0.65;
  height: 100000%;
  visibility: visible
}
.b-nav {
  background: #000 none repeat scroll 0 0;
  position: absolute;
  top: 0;
  width: 320px;
  z-index: 12;
}
.b-nav:not(.open) {
  animation-duration: 0.4s;
  animation-fill-mode: both;
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft
}
.b-nav {
  animation-duration: .4s;
  animation-fill-mode: both;
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft
}
.b-nav ul {
  padding-left: 0px;
}
.b-nav li {
  color: #fff;
  list-style-type: none;
  padding: 10px 10px 10px 0;
  text-align: left;
  -webkit-transform: translateX(345px);
  -ms-transform: translateX(345px);
  transform: translateX(345px)
}
.b-nav li:not(.open) {
  animation-duration: 0.4s;
  animation-fill-mode: both;
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft
}
.b-nav li:not(.open), .b-nav.open li {
  -webkit-animation-duration: 0.4s;
  -webkit-animation-fill-mode: both
}
.b-nav li:first-child {
  margin-top: 0px
}
.b-nav.open {
  visibility: visible;
  animation-duration: 0.4s;
  animation-fill-mode: both;
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}
.b-nav:not(.open) {
  visibility: hidden;
  animation-duration: 0.4s;
  animation-fill-mode: backwards;
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft
}
.b-nav.open li {
  padding-left: 30px;
  animation-duration: 0.2s;
  animation-fill-mode: both;
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft
}
.b-link {
  background: 0 0;
  border-left: rgba(255, 255, 255, 0)solid 2px;
  color: #fff;
  transition: all .4s ease;
  width: auto
}
.b-link, .b-menu {
  -webkit-transition: all .4s ease;
}
.b-nav li {
  border-left: 5px solid #e00a12;
}
/*.b-link--active,
.b-link:hover {
    border-left: #e00a12 solid 5px;
    padding-left: 30px
}*/
.b-menu {
  cursor: pointer;
  display: block;
  height: 66px;
  padding-top: 20px;
  position: relative;
  top: -20px;
  transition: all 0.4s ease 0s;
  width: 43px;
  z-index: 12;
  right: 10px;
}
.b-bun--bottom, .b-bun--mid, .b-bun--top {
  height: 2px;
  width: 25px
}
.b-container.open .b-main, .b-menu:hover {}
.b-bun {
  background: #fff;
  transition: all .4s ease
}
.b-brand, .b-bun {
  position: relative;
  -webkit-transition: all .4s ease
}
.b-bun--top {
  top: 0
}
.b-bun--mid {
  top: 8px
}
.b-bun--bottom {
  top: 16px
}
.b-brand {
  color: #2196f3;
  top: -21.43px;
  transition: all .4s ease;
  z-index: 13
}
.b-container {
  position: absolute;
  right: 0;
  top: 20px;
}
.b-container:hover:not(.open) .bun-bottom, .b-container:hover:not(.open) .bun-mid, .b-container:hover:not(.open) .bun-top {
  background: #2196f3
}
.b-container.open .b-bun--top {
  background: #e00a12;
  top: 9px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg)
}
.b-container.open .b-bun--mid {
  opacity: 0
}
.b-container.open .b-bun--bottom {
  background: #e00a12;
  top: 5px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg)
}
.b-container.open .b-brand {
  color: #fff;
}
.mobile-search-btn {
     background-color: #e00a12;
    border-radius: 4px;
    color: #fff;
    margin-bottom: 25px;
    margin-left: 30px;
    padding: 10px 20px;
    text-transform: uppercase;
  border:none;
}
.mobile-search {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #fff;
    color: #949494;
    font-size: 14px;
    margin-bottom: 20px;
    margin-left: 30px;
    padding: 10px;
    width: 80%;
}

#gradient { 
position: fixed; 
bottom:-119px; 
width: 600%;
height: 600%;
left:-20px;
position: absolute;
background: linear-gradient(270deg, #9400D3, #003366, #b27000, #06617d, #CC0099, #A10048, #067370, #B0E0E6, #009999, #330099, #B20000, #8E006B,  #8B4513, #CC0099, #87CEEB, #0066B3,  #DC143C, #4B0082 ,  #8B008B, #FF7F50, #DDA0DD, #6B006B, #B0E0E6 , #990099 ,   #D8BFD8, #40E0D0 ,   #DA70D6, #FF69B4, #9400D3  );
background-size: 800% 800%; 
-webkit-animation: colors 160s ease infinite;
-moz-animation: colors 160s ease infinite;
animation: colors 160s ease infinite;
}
@-webkit-keyframes colors {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes colors {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes colors { 
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}

.svg {
  position: absolute;
  top: 1px;
  right: 0;
  left: 0;
  bottom: 0 ;
  margin: auto;
}
.svg--rays {
  width: 100%;
  height: 100%;
}
.svg--bird {
  top: -300px;
  left: -30px;
  width: 220px;
  height: 300px;
  /* mix-blend-mode: difference */
}
.c-rays {
  fill: none;
  stroke:#003366;
  stroke-width: 100%;
  stroke-dasharray: 7%;
  -webkit-animation: rotate 20s linear infinite;
          animation: rotate 20s linear infinite;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}
@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.svg--bird {
  -webkit-animation: up-down 1.68s infinite ease-out;
          animation: up-down 1.68s infinite ease-out;
}
@-webkit-keyframes up-down {
  50% {
    -webkit-transform: translate(0, 30px);
            transform: translate(0, 30px);}}
@keyframes up-down {
  50% {
    -webkit-transform: translate(0, 30px);
            transform: translate(0, 30px);}}

.container {
  position: fixed;
  bottom: 1em;
  right: 1em;
}

.spinning {
color: #8E006B;
text-align: center;
margin-top: 30px;
font-size:52px;
font-family: 'agency fb', cursive;
text-shadow: 0px 3px 0px #dad,  0px 14px 10px rgba(0,0,0,0.15),  0px 24px 2px rgba(0,0,0,0.1),  0px 34px 30px rgba(0,0,0,0.1);
 -webkit-animation: spinaround 38s infinite linear;
 animation: spinaround 38s infinite linear;
}
 @-webkit-keyframes spinaround {
 to {
-webkit-transform:rotateY(360deg)
}
}
@keyframes spinaround {
 to {
transform:rotateY(360deg);
-ms-transform:rotateY(360deg);
}
}
/*Pop Up*/
.wrapper {
  position: relative;
  max-width: 1024px;
  height: 100%;
  margin: 0 auto;
}

.popup {
  position: absolute;
  top: 470px;
  left: 50%;
  width: 50%;
  height: 300px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);

}
.popup__close {
  position: absolute;
background: -webkit-linear-gradient(transparent 210%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 210%, #dad 50%, transparent 90%); 
-webkit-animation: shadow 1s ease-in-out infinite;
          animation: shadow 1s ease-in-out infinite;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
.popup.is-moved {
  -webkit-animation: slide-down 0.125s ease-in-out forwards;
          animation: slide-down 0.125s ease-in-out forwards;
}

@-webkit-keyframes slide-down {
  0% {
    top: 50%;
    -webkit-transform: translate( -50%,  -50%);
            transform: translate( -50%,  -50%);
    box-shadow: 0 0 0px 999px rgba(0, 0, 0, 0.7);
  }
  5% {
    box-shadow: none;
  }
  40% {
    width: 50%;
    height: 300px;
  }
  80% {
    top: 100%;
    width: 100%;
    height: 60px;
    -webkit-transform: translate(-50%, -100%);
            transform: translate(-50%, -100%);
    box-shadow: none;
    opacity: 1;
  }
  100% {
    top: 100%;
    width: 100%;
    height: 60px;
    -webkit-transform: translate(-50%, -100%);
            transform: translate(-50%, -100%);
    box-shadow: none;
    opacity: 0;
  }
}
@keyframes slide-down {
  0% {
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    box-shadow: 0 0 0px 999px rgba(0, 0, 0, 0.7);
  }
 5% {
    box-shadow: none;
  }
  40% {
    width: 50%;
    height: 300px;
  }
  80% {
    top: 100%;
    width: 100%;
    height: 60px;
    -webkit-transform: translate(-50%, -100%);
            transform: translate(-50%, -100%);
    box-shadow: none;
    opacity: 1;
  }
  100% {
    top: 100%;
    width: 100%;
    height: 60px;
    -webkit-transform: translate(-50%, -100%);
            transform: translate(-50%, -100%);
    box-shadow: none;
    opacity: 0;
  }
}
 </style>

<div id="gradient">
</div>

<svg class="svg svg--bird" viewBox="0 0 280 450">
    <defs>
        <mask id="mask" maskunits="userSpaceOnUse"
              maskcontentunits="userSpaceOnUse"> 
            <image xlink:href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHbvHHPXvRXQ6RfqcyZ1HqCRe2PdDULzLRn-eoI7r6KLl6cyF8N-ly69kHXHFgBKxZ0-bCDpPFFgA9aN9A6KR3Qb6o34aIEkqE_l7-J3ezlzipbLVQeEtBHlsWY-WTQE8vutXU9XhHQaM/s1600/Bird-M2010.gif" 
                   width="277" height="293"></image>
        </mask>        
        <filter id="drop-shadow">
          <feGaussianBlur stdDeviation="5"  in="SourceAlpha" />
          <feOffset dx="4" dy="140"           result="offsetblur"/>
          <feFlood flood-color="rgba(555, 0, 0, 0.10)"/>
          <feComposite operator="in"        in2="offsetblur"/>
          <feMerge>
            <feMergeNode/>
            <feMergeNode                    in="SourceGraphic"/>
          </feMerge>
        </filter>
    </defs>
    
    <g  filter="url(#drop-shadow)">
        <g mask="url(#mask)">
            <circle r="50%" cx="60%" cy="35%" class="c-rays" ></circle>
        </g>
    </g>
</svg>

<div class="mobile-nav">
<div class="b-nav">
<ul>
<li><a class="b-link b-link--active" href="#">Song title</a></li>
<li><a class="b-link" href="http://Link Title">1-Title</a></li>
<li><a class="b-link" href="http://Link Title">2-Title</a></li>
<li><a class="b-link" href="http://Link Title">3-Title</a></li> 
<li><a class="b-link" href="http://Link Title">4-Title</a></li>
<li><a class="b-link" href="http://Link Title">5-Title</a></li>
</ul>
</div>
<!-- Burger-Icon -->
<div class="b-container">
<div class="b-menu">
<div class="b-bun b-bun--top">
</div>
<div class="b-bun b-bun--mid">
</div>
<div class="b-bun b-bun--bottom">
</div>
</div>
<!-- Burger-Brand -->
<a class="b-brand" href="https://www.blogger.com/blogger.g?blogID=8117147133408636052#"></a>
</div>
</div>



<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> EDITED BY. <a href="https://Link Download"title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> COPYRIGHT <a href="http://codepen.io/Myscript2010/pen/eBVEqv"target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; CODEPEN </a> </div>
<h2> <audio id="mys2010" src="https://sites.google.com/site/codesule/lagu/Guns-N-Roses-Knockin-M2010s.mp3"controls="controls"></audio></h2>
</a></div>
</div>
<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/12/birds-animation.html"target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a>  </h2>
</a>  
</div>
</header>
  
 
 <h3 class="spinning">M2010 </h3>
</div>      
<div class="wrapper">
  <div class="popup">
 <font size="5" color="#dad"face="arial">
    <div class="popup__close"> &#10086;</div></font>
<div id="opening_screen" class="animated">
<div class="spinning">Guns N Roses<br>Knockin On Heavens Door</h3>
</div>
  </div> 
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout-53beeb1a007ec32040abaf4c9385ebfc.js'>
</script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
$('.popup__close').on('click', function () {
    $('.popup').toggleClass('is-moved');
    window.setTimeout(function () {
        $('.sticky').css('opacity', 1);
    }, 500);
}); 
</script>



<script src="https://sites.google.com/site/codesule/lagu/Menu-M2010.js">
</script> 
<music> 
<script src="https://sites.google.com/site/codesule/lagu/stopExecutionOnTimeout-M2010.js">
</script>    
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>   
<script src="http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js">
</script>  
 <link href="http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css" rel="stylesheet prefetch"></link>                        
 <script src="https://sites.google.com/site/codesule/lagu/Musik-Mys2010.js">
</script> 

* If you want to directly copy and paste you canDownload Here Birds Animation

Birds Code by. Yoksel
Audio Code by. Jereme Causing
Design Code is Edited by. Mys2010 on Codepen

DEMOSHOW

* M-2010 

Category: birds animation

Tweet