3D sphere made with Audio

Memasang Kode 3D sphere made with circles
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 :  Get Blank Template.   edit background warna sesuai keinginan 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 {);color:red;height:100%;overflow:hidden;}
body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at 50% 50%, #24006B 0%, #000000 100%);
}
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:-12px;
  width: 100%;
text-align: center;
font-size:  6px;
background: -moz-linear-gradient(top, #B20000 0%, rgba(53,02,01,1) 100%);
  border-bottom: 3px solid #dad;  
}
.ap {
position: fixed;
right: 0;
bottom:-19px;
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:  #111;
border-top: 2px solid #f0f;
z-index: 9999;
} 
h2 {
padding:15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #B20000 50%, transparent 90%); 
} 
#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;
}

body::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
   background: #CC0099;
  -webkit-animation: overlay infinite 12s;
          animation: overlay infinite 12s;
  content: '';
}
@-webkit-keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}
@keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}
@-webkit-keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@-webkit-keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}
@keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}  
</style>

<h3 class="M2010">
<font size="5" color="rgb(105,105,105)"face="arial">M-2010 CIBEBER CIMAHI</h3>
</div>
</div> 
<div id='gif'>
</div>
<div align="center" style="margin-top:240px">
<div class='container'>
<div class='circle'>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
<div class='face'>
</div>
</div>
</div>

<div class="view-b">
<div class="animation main">
<div class="animation-circle">
</div>
<div class="animation-circle">
</div>
<div class="animation-circle">
</div>
<div class="animation-circle">
</div>
<div class="animation-circle">
</div>
<div class="animation-circle">
</div>
</div>
</div>



<div class="view-c">
<div class="animation main">
<div class="animation-circle">
</div>
<div class="animation-circle">
</div>
<div class="animation-circle">
</div>
<div class="animation-circle">
</div>
<div class="animation-circle">
</div>
<div class="animation-circle">
</div>
</div>
</div>

<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/07/3d-sphere-made-with-circles.html" target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a>  </h2>
</a>  
</div>
</header>

<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"target="_blank" 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" 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/gg1cover/music/Samantha-Mys2010s.mp3"controls="controls"></audio></h2>
</a></div>
</div>

<link href="https://sites.google.com/site/safe50534/code/Text-sphere-M2010.css" rel="stylesheet" type="text/css">
<link href="https://sites.google.com/site/safe50534/code/View-plane-M2010.css" rel="stylesheet" type="text/css">
<ul class="mys2010-list">
<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>   
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>    
<script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'>
</script>  
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js"></script>

<script>
      $(function () {
$('video,audio').mediaelementplayer({
success: function (mediaElement, domObject) {
var audio_src = $('li.current').attr('data-url');
mediaElement.setSrc(audio_src);
mediaElement.addEventListener('ended', function (e) {
mys2010PlayNext(e.target);
}, false);
},
keyActions: []
});
$('.mys2010-list li').click(function () {
$(this).addClass('current').siblings().removeClass('current');
var audio_src = $(this).attr('data-url');
$('audio#mys2010:first').each(function () {
this.player.pause();
this.player.setSrc(audio_src);
this.player.play();
});
});
});
function mys2010PlayNext(currentPlayer) {
if ($('.mys2010-list li.current').length > 0) {
var current_item = $('.mys2010-list li.current:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('if ' + audio_src);
} else {
var current_item = $('.mys2010-list li:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('elseif ' + audio_src);
}
if ($(current_item).is(':last-child')) {
$(current_item).removeClass('current');
} else {
currentPlayer.setSrc(audio_src);
currentPlayer.play();
}}    
</script> 

Audio Code by. Jereme Causing
Dodecahedron Code by. Wontem

3D Sphere Code by. Samir Chahine
Design Code is Edited by. Mys2010 on Codepen

DEMOSHOW

If you want to directly copy  and  paste you canDownload Here 3D sphere with audio

Category: 3D sphere made with circles

Happy Circles

Memasang Kode Happy Circles 
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 :  Get Blank Template.   edit background warna sesuai keinginan 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 {);color:red;height:100%;overflow:hidden;}
body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at 50% 50%, #B20000 0%, #333 100%);
}
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:-8px;
  width: 100%;
text-align: center;
font-size:  6px;
background: -moz-linear-gradient(top, #B20000 0%, rgba(53,02,01,1) 100%);
  border-bottom: 3px solid #dad;  
}
.ap {
position: fixed;
right: 0;
bottom:-12px;
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:  #111;
border-top: 2px solid #f0f;
z-index: 9999;
} 
h2 {
padding:15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #B20000 50%, transparent 90%); 
} 
#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:24px;
} 

#Mys2010 a:hover { background-color: transparent;opacity:0.7; } #Mys2010 img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #Mys2010 img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
body::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
   background: #24006B;
  -webkit-animation: overlay infinite 12s;
          animation: overlay infinite 12s;
  content: '';
}
@-webkit-keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}
@keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}
@-webkit-keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@-webkit-keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}
@keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}

main {
 margin-top:65px;
  padding: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}
main svg {
  width: 20em;
  height: 20em;
}
.circle-0 {
  stroke: #e27dae;
  stroke-dasharray: 283, 300;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: circleInMotion-0 4s 4s linear infinite alternate;
          animation: circleInMotion-0 4s 4s linear infinite alternate;
}
@-webkit-keyframes circleInMotion-0 {
  0%, 40% {
    stroke-dasharray: 283, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -140;
    stroke-linecap: butt;
  }
}
@keyframes circleInMotion-0 {
  0%, 40% {
    stroke-dasharray: 283, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -140;
    stroke-linecap: butt;
  }
}
.circle-1 {
  stroke: #e283a8;
  stroke-dasharray: 258, 300;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: circleInMotion-1 4s 1s linear infinite alternate;
          animation: circleInMotion-1 4s 1s linear infinite alternate;
}
@-webkit-keyframes circleInMotion-1 {
  0%, 40% {
    stroke-dasharray: 258, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -120;
    stroke-linecap: butt;
  }
}
@keyframes circleInMotion-1 {
  0%, 40% {
    stroke-dasharray: 258, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -120;
    stroke-linecap: butt;
  }
}
.circle-2 {
  stroke: #e289a2;
  stroke-dasharray: 233, 300;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: circleInMotion-2 4s 9s linear infinite alternate;
          animation: circleInMotion-2 4s 9s linear infinite alternate;
}
@-webkit-keyframes circleInMotion-2 {
  0%, 40% {
    stroke-dasharray: 233, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -100;
    stroke-linecap: butt;
  }
}
@keyframes circleInMotion-2 {
  0%, 40% {
    stroke-dasharray: 233, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -100;
    stroke-linecap: butt;
  }
}
.circle-3 {
  stroke: #e2909c;
  stroke-dasharray: 208, 300;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: circleInMotion-3 4s 1s linear infinite alternate;
          animation: circleInMotion-3 4s 1s linear infinite alternate;
}
@-webkit-keyframes circleInMotion-3 {
  0%, 40% {
    stroke-dasharray: 208, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -80;
    stroke-linecap: butt;
  }
}
@keyframes circleInMotion-3 {
  0%, 40% {
    stroke-dasharray: 208, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -80;
    stroke-linecap: butt;
  }
}
.circle-4 {
  stroke: #e29696;
  stroke-dasharray: 183, 300;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: circleInMotion-4 4s 2s linear infinite alternate;
          animation: circleInMotion-4 4s 2s linear infinite alternate;
}
@-webkit-keyframes circleInMotion-4 {
  0%, 40% {
    stroke-dasharray: 183, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -60;
    stroke-linecap: butt;
  }
}
@keyframes circleInMotion-4 {
  0%, 40% {
    stroke-dasharray: 183, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -60;
    stroke-linecap: butt;
  }
}
.circle-5 {
  stroke: #e29c90;
  stroke-dasharray: 158, 300;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: circleInMotion-5 4s 6s linear infinite alternate;
          animation: circleInMotion-5 4s 6s linear infinite alternate;
}

@-webkit-keyframes circleInMotion-5 {
  0%, 40% {
    stroke-dasharray: 158, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -40;
    stroke-linecap: butt;
  }
}
@keyframes circleInMotion-5 {
  0%, 40% {
    stroke-dasharray: 158, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -40;
    stroke-linecap: butt;
  }
}
.circle-6 {
  stroke: #e3a289;
  stroke-dasharray: 133, 300;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: circleInMotion-6 4s 9s linear infinite alternate;
          animation: circleInMotion-6 4s 9s linear infinite alternate;
}

@-webkit-keyframes circleInMotion-6 {
  0%, 40% {
    stroke-dasharray: 133, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -20;
    stroke-linecap: butt;
  }
}

@keyframes circleInMotion-6 {
  0%, 40% {
    stroke-dasharray: 133, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: -20;
    stroke-linecap: butt;
  }
}
.circle-7 {
  stroke: #e3a883;
  stroke-dasharray: 108, 300;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: circleInMotion-7 4s 7s linear infinite alternate;
          animation: circleInMotion-7 4s 7s linear infinite alternate;
}
@-webkit-keyframes circleInMotion-7 {
  0%, 40% {
    stroke-dasharray: 108, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: 0;
    stroke-linecap: butt;
  }
}
@keyframes circleInMotion-7 {
  0%, 40% {
    stroke-dasharray: 108, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: 0;
    stroke-linecap: butt;
  }
}
.circle-8 {
  stroke: #e3ae7d;
  stroke-dasharray: 83, 300;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: circleInMotion-8 4s 8s linear infinite alternate;
          animation: circleInMotion-8 4s 8s linear infinite alternate;
}
@-webkit-keyframes circleInMotion-8 {
  0%, 40% {
    stroke-dasharray: 83, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: 20;
    stroke-linecap: butt;
  }
}
@keyframes circleInMotion-8 {
  0%, 40% {
    stroke-dasharray: 83, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: 20;
    stroke-linecap: butt;
  }
}
.circle-9 {
  stroke: #e3b577;
  stroke-dasharray: 58, 300;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: circleInMotion-9 4s 3s linear infinite alternate;
          animation: circleInMotion-9 4s 3s linear infinite alternate;
}
@-webkit-keyframes circleInMotion-9 {
  0%, 40% {
    stroke-dasharray: 58, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: 40;
    stroke-linecap: butt;
  }
}
@keyframes circleInMotion-9 {
  0%, 40% {
    stroke-dasharray: 58, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: 40;
    stroke-linecap: butt;
  }
}
.circle-10 {
  stroke: #e3bb71;
  stroke-dasharray: 33, 300;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: circleInMotion-10 4s 5s linear infinite alternate;
          animation: circleInMotion-10 4s 5s linear infinite alternate;
}
@-webkit-keyframes circleInMotion-10 {
  0%, 40% {
    stroke-dasharray: 33, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: 60;
    stroke-linecap: butt;
  }
}
@keyframes circleInMotion-10 {
  0%, 40% {
    stroke-dasharray: 33, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: 60;
    stroke-linecap: butt;
  }
}
.circle-11 {
  stroke: #e3c16b;
  stroke-dasharray: 8, 300;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  -webkit-animation: circleInMotion-11 4s 4s linear infinite alternate;
          animation: circleInMotion-11 4s 4s linear infinite alternate;
}
@-webkit-keyframes circleInMotion-11 {
  0%, 40% {
    stroke-dasharray: 8, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: 80;
    stroke-linecap: butt;
  }
}
@keyframes circleInMotion-11 {
  0%, 40% {
    stroke-dasharray: 8, 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
  60%, 100% {
    stroke-dasharray: 0, 300;
    stroke-dashoffset: 80;
    stroke-linecap: butt;
  }
}

.circle {
  margin-left: -33px;
    margin-top:48px;
    border-radius: 200px;
  width: 300px;
  height: 300px;
  border: 20px solid #B20000;
  border-radius: 50%;
  position: absolute;
  top: 5%;
  left: 40%;
}
@keyframes circle {
 from {
  transform: scale(0)
 }
 to {
  transform: scale(6)
 }
}
.one {
  animation: circle 4s infinite linear;
}
.two {
  animation: circle 3s infinite linear;
}
.three {
  animation: circle 2s infinite linear;
}
img {
  position: absolute;
  top: 139px;
  left: 575px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #ff0;
  width: 211px;
  height: 212px;
  z-index: 3;
  opacity: 1;
  animation: photo-ani 25s forwards;
}
/* Keyframes */
@keyframes line-ani {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes photo-ani {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style> 

<main rel="main">
  <svg viewBox="0 0 100 100">
    <circle class="circle-0" cx="50" cy="50" r="45" fill="none" stroke-width="3" />
    <circle class="circle-1" cx="50" cy="50" r="41" fill="none" stroke-width="3" />
    <circle class="circle-2" cx="50" cy="50" r="37" fill="none" stroke-width="3" />
    <circle class="circle-3" cx="50" cy="50" r="33" fill="none" stroke-width="3" />
    <circle class="circle-4" cx="50" cy="50" r="29" fill="none" stroke-width="3" />
    <circle class="circle-5" cx="50" cy="50" r="25" fill="none" stroke-width="3" />
    <circle class="circle-6" cx="50" cy="50" r="21" fill="none" stroke-width="3" />
    <circle class="circle-7" cx="50" cy="50" r="17" fill="none" stroke-width="3" />
    <circle class="circle-8" cx="50" cy="50" r="13" fill="none" stroke-width="3" />
    <circle class="circle-9" cx="50" cy="50" r="9" fill="none" stroke-width="3" />
    <circle class="circle-10" cx="50" cy="50" r="5" fill="none" stroke-width="3" />
    <circle class="circle-11" cx="50" cy="50" r="1" fill="none" stroke-width="3" /> 
<div class="circle one"></div>
<div class="circle two"></div>
<div class="circle three"></div>
  </svg>
</main>

<div id="image">
<div id="Mys2010">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcKKeko5hNyHpTLfZmUphk35IxjIZBUCCF3aM8Vm3b7xFt6mXadJATtOqj4eJ-g1DqRiYE3pZdNGjYfWzvMiwWrzBY49tyz-sawDkWpTXw3xr8MahxWx-_jkYXBQXaICWDjPrSs-jXvmrX/s1600-r/Jannine-Mys2010.png"  />
</div>
<div class="loader-2">
<div class="loader-text">
<div class="loader">
</div>
<div id='gif'>
</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"target="_blank" 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" target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; CODEPEN </a> 
</div>
<h2>
<body translate="no" ><div align="center" style="margin-top:5px">
<audio id="mys2010" src="https://sites.google.com/site/gg1cover/music/Jannine-Weigel-Mys2010s.mp3"controls="controls"></audio></h2>
</a></div>
</div>
</div>
<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/07/happy-circles.html" target="_blank" title="Mari Belajar">
<h2>
<span style="color:#f00; font-size: 10pt">LET'S STUDY</a>  </h2>
</a>  
</div>
</header>

<ul class="mys2010-list">
<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>    
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>     
<script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'>
</script>  
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js">
</script>

<script>
      $(function () {
$('video,audio').mediaelementplayer({
success: function (mediaElement, domObject) {
var audio_src = $('li.current').attr('data-url');
mediaElement.setSrc(audio_src);
mediaElement.addEventListener('ended', function (e) {
mys2010PlayNext(e.target);
}, false);
},
keyActions: []
});
$('.mys2010-list li').click(function () {
$(this).addClass('current').siblings().removeClass('current');
var audio_src = $(this).attr('data-url');
$('audio#mys2010:first').each(function () {
this.player.pause();
this.player.setSrc(audio_src);
this.player.play();
});
});
});
function mys2010PlayNext(currentPlayer) {
if ($('.mys2010-list li.current').length > 0) {
var current_item = $('.mys2010-list li.current:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('if ' + audio_src);
} else {
var current_item = $('.mys2010-list li:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('elseif ' + audio_src);
}
if ($(current_item).is(':last-child')) {
$(current_item).removeClass('current');
} else {
currentPlayer.setSrc(audio_src);
currentPlayer.play();
}}    
</script> 

Audio Code by. Jereme Causing
Happy Circles Code by. Jan Reimers

Circles ○ Code by. Radimir Bitsov
Design Code is Edited by. Mys2010 on Codepen

DEMOSHOW

If you want to directly copy  and  paste you canDownload Here Happy Circles   

Category: Happy Circles

Lines Animation

Memasang Kode Lines 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 :  Get Blank Template.   edit background warna sesuai keinginan 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 {);color:red;height:100%;overflow:hidden;}
body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at 50% 50%, #B20000 0%, #333 100%);
}
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:-8px;
  width: 100%;
text-align: center;
font-size:  6px;
background: -moz-linear-gradient(top, #B20000 0%, rgba(53,02,01,1) 100%);
  border-bottom: 3px solid #dad;  
}
.ap {
position: fixed;
right: 0;
bottom:-19px;
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:  #111;
border-top: 2px solid #f0f;
z-index: 9999;
} 
h2 {
padding:15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #B20000 50%, transparent 90%); 
}

#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;
} 
#Mys2010 a:hover { background-color: transparent;opacity:0.7; } #Mys2010 img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #Mys2010 img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }

.center {
  position: absolute;
  width: 40px;
  height: 40px;
  margin-top:220px;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.line {
  box-sizing: border-box;
  position: absolute;
  width: 40px;
  height: 40px;
  top: 0;
  left: 0;
  background:radial-gradient(circle at 50% 50%, #B20000 0%, blue 100%);
}
.line-1 {
  -webkit-animation: line-1 10s ease-in-out infinite;
          animation: line-1 10s ease-in-out infinite;
}
@-webkit-keyframes line-1 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(0deg) translate(0, 0) scale(1);
            transform: rotate(0deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(0deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(0deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(0deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(0deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(0deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(0deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(0deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(0deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(0deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(0deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(0deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(0deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(0deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(0deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(0deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(0deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(0deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(0deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(0deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(0deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(0deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(0deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(0deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(0deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(0deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(0deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(0deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(0deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(0deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(0deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(0deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(0deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(0deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(0deg) translate(0, -300px) scale(0.1, 0.5);
  }
}
@keyframes line-1 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(0deg) translate(0, 0) scale(1);
            transform: rotate(0deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(0deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(0deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(0deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(0deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(0deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(0deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(0deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(0deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(0deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(0deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(0deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(0deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(0deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(0deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(0deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(0deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(0deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(0deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(0deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(0deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(0deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(0deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(0deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(0deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(0deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(0deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(0deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(0deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(0deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(0deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(0deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(0deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(0deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(0deg) translate(0, -300px) scale(0.1, 0.5);
  }
}
.line-2 {
  -webkit-animation: line-2 10s ease-in-out infinite;
          animation: line-2 10s ease-in-out infinite;
}

@-webkit-keyframes line-2 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(36deg) translate(0, 0) scale(1);
            transform: rotate(36deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(36deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(36deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(36deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(36deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(36deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(36deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(36deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(36deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(36deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(36deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(36deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(36deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(36deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(36deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(36deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(36deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(36deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(36deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(36deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(36deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(36deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(36deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(36deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(36deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(36deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(36deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(36deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(36deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(36deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(36deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(36deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(36deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(36deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(36deg) translate(0, -300px) scale(0.1, 0.5);
  }
}
@keyframes line-2 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(36deg) translate(0, 0) scale(1);
            transform: rotate(36deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(36deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(36deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(36deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(36deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(36deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(36deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(36deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(36deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(36deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(36deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(36deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(36deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(36deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(36deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(36deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(36deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(36deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(36deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(36deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(36deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(36deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(36deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(36deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(36deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(36deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(36deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(36deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(36deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(36deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(36deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(36deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(36deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(36deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(36deg) translate(0, -300px) scale(0.1, 0.5);
  }
}
.line-3 {
  -webkit-animation: line-3 10s ease-in-out infinite;
          animation: line-3 10s ease-in-out infinite;
}

@-webkit-keyframes line-3 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(72deg) translate(0, 0) scale(1);
            transform: rotate(72deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(72deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(72deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(72deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(72deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(72deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(72deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(72deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(72deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(72deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(72deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(72deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(72deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(72deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(72deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(72deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(72deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(72deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(72deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(72deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(72deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(72deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(72deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(72deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(72deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(72deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(72deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(72deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(72deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(72deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(72deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(72deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(72deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(72deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(72deg) translate(0, -300px) scale(0.1, 0.5);
  }
}

@keyframes line-3 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(72deg) translate(0, 0) scale(1);
            transform: rotate(72deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(72deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(72deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(72deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(72deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(72deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(72deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(72deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(72deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(72deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(72deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(72deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(72deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(72deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(72deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(72deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(72deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(72deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(72deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(72deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(72deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(72deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(72deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(72deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(72deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(72deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(72deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(72deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(72deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(72deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(72deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(72deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(72deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(72deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(72deg) translate(0, -300px) scale(0.1, 0.5);
  }
}
.line-4 {
  -webkit-animation: line-4 10s ease-in-out infinite;
          animation: line-4 10s ease-in-out infinite;
}

@-webkit-keyframes line-4 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(108deg) translate(0, 0) scale(1);
            transform: rotate(108deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(108deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(108deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(108deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(108deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(108deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(108deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(108deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(108deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(108deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(108deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(108deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(108deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(108deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(108deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(108deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(108deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(108deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(108deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(108deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(108deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(108deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(108deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(108deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(108deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(108deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(108deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(108deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(108deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(108deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(108deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(108deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(108deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(108deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(108deg) translate(0, -300px) scale(0.1, 0.5);
  }
}

@keyframes line-4 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(108deg) translate(0, 0) scale(1);
            transform: rotate(108deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(108deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(108deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(108deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(108deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(108deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(108deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(108deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(108deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(108deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(108deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(108deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(108deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(108deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(108deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(108deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(108deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(108deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(108deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(108deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(108deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(108deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(108deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(108deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(108deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(108deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(108deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(108deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(108deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(108deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(108deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(108deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(108deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(108deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(108deg) translate(0, -300px) scale(0.1, 0.5);
  }
}
.line-5 {
  -webkit-animation: line-5 10s ease-in-out infinite;
          animation: line-5 10s ease-in-out infinite;
}

@-webkit-keyframes line-5 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(144deg) translate(0, 0) scale(1);
            transform: rotate(144deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(144deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(144deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(144deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(144deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(144deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(144deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(144deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(144deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(144deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(144deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(144deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(144deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(144deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(144deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(144deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(144deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(144deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(144deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(144deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(144deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(144deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(144deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(144deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(144deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(144deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(144deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(144deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(144deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(144deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(144deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(144deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(144deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(144deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(144deg) translate(0, -300px) scale(0.1, 0.5);
  }
}

@keyframes line-5 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(144deg) translate(0, 0) scale(1);
            transform: rotate(144deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(144deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(144deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(144deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(144deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(144deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(144deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(144deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(144deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(144deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(144deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(144deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(144deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(144deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(144deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(144deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(144deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(144deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(144deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(144deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(144deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(144deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(144deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(144deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(144deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(144deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(144deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(144deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(144deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(144deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(144deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(144deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(144deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(144deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(144deg) translate(0, -300px) scale(0.1, 0.5);
  }
}
.line-6 {
  -webkit-animation: line-6 10s ease-in-out infinite;
          animation: line-6 10s ease-in-out infinite;
}

@-webkit-keyframes line-6 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(180deg) translate(0, 0) scale(1);
            transform: rotate(180deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(180deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(180deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(180deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(180deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(180deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(180deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(180deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(180deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(180deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(180deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(180deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(180deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(180deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(180deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(180deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(180deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(180deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(180deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(180deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(180deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(180deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(180deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(180deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(180deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(180deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(180deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(180deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(180deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(180deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(180deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(180deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(180deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(180deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(180deg) translate(0, -300px) scale(0.1, 0.5);
  }
}

@keyframes line-6 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(180deg) translate(0, 0) scale(1);
            transform: rotate(180deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(180deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(180deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(180deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(180deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(180deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(180deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(180deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(180deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(180deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(180deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(180deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(180deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(180deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(180deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(180deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(180deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(180deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(180deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(180deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(180deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(180deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(180deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(180deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(180deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(180deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(180deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(180deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(180deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(180deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(180deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(180deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(180deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(180deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(180deg) translate(0, -300px) scale(0.1, 0.5);
  }
}
.line-7 {
  -webkit-animation: line-7 10s ease-in-out infinite;
          animation: line-7 10s ease-in-out infinite;
}

@-webkit-keyframes line-7 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(216deg) translate(0, 0) scale(1);
            transform: rotate(216deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(216deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(216deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(216deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(216deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(216deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(216deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(216deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(216deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(216deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(216deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(216deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(216deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(216deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(216deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(216deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(216deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(216deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(216deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(216deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(216deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(216deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(216deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(216deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(216deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(216deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(216deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(216deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(216deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(216deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(216deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(216deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(216deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(216deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(216deg) translate(0, -300px) scale(0.1, 0.5);
  }
}

@keyframes line-7 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(216deg) translate(0, 0) scale(1);
            transform: rotate(216deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(216deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(216deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(216deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(216deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(216deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(216deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(216deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(216deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(216deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(216deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(216deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(216deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(216deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(216deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(216deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(216deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(216deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(216deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(216deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(216deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(216deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(216deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(216deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(216deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(216deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(216deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(216deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(216deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(216deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(216deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(216deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(216deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(216deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(216deg) translate(0, -300px) scale(0.1, 0.5);
  }
}
.line-8 {
  -webkit-animation: line-8 10s ease-in-out infinite;
          animation: line-8 10s ease-in-out infinite;
}

@-webkit-keyframes line-8 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(252deg) translate(0, 0) scale(1);
            transform: rotate(252deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(252deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(252deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(252deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(252deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(252deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(252deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(252deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(252deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(252deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(252deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(252deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(252deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(252deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(252deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(252deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(252deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(252deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(252deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(252deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(252deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(252deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(252deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(252deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(252deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(252deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(252deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(252deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(252deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(252deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(252deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(252deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(252deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(252deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(252deg) translate(0, -300px) scale(0.1, 0.5);
  }
}

@keyframes line-8 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(252deg) translate(0, 0) scale(1);
            transform: rotate(252deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(252deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(252deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(252deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(252deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(252deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(252deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(252deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(252deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(252deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(252deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(252deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(252deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(252deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(252deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(252deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(252deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(252deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(252deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(252deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(252deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(252deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(252deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(252deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(252deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(252deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(252deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(252deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(252deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(252deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(252deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(252deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(252deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(252deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(252deg) translate(0, -300px) scale(0.1, 0.5);
  }
}
.line-9 {
  -webkit-animation: line-9 10s ease-in-out infinite;
          animation: line-9 10s ease-in-out infinite;
}

@-webkit-keyframes line-9 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(288deg) translate(0, 0) scale(1);
            transform: rotate(288deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(288deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(288deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(288deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(288deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(288deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(288deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(288deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(288deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(288deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(288deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(288deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(288deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(288deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(288deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(288deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(288deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(288deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(288deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(288deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(288deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(288deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(288deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(288deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(288deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(288deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(288deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(288deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(288deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(288deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(288deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(288deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(288deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(288deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(288deg) translate(0, -300px) scale(0.1, 0.5);
  }
}

@keyframes line-9 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(288deg) translate(0, 0) scale(1);
            transform: rotate(288deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(288deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(288deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(288deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(288deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(288deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(288deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(288deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(288deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(288deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(288deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(288deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(288deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(288deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(288deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(288deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(288deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(288deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(288deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(288deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(288deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(288deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(288deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(288deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(288deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(288deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(288deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(288deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(288deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(288deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(288deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(288deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(288deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(288deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(288deg) translate(0, -300px) scale(0.1, 0.5);
  }
}
.line-10 {
  -webkit-animation: line-10 10s ease-in-out infinite;
          animation: line-10 10s ease-in-out infinite;
}

@-webkit-keyframes line-10 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(324deg) translate(0, 0) scale(1);
            transform: rotate(324deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(324deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(324deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(324deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(324deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(324deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(324deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(324deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(324deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(324deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(324deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(324deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(324deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(324deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(324deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(324deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(324deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(324deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(324deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(324deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(324deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(324deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(324deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(324deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(324deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(324deg) translate(0, -50px) scale(0.5, 0.5);
            transform: rotate(324deg) translate(0, -50px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(324deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
            transform: rotate(324deg) translate(0, -50px) scale(0.5, 0.5) rotate(179deg) translate(-50px, 50px);
  }
  90% {
    -webkit-transform: rotate(324deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(324deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(324deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(324deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(324deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(324deg) translate(0, -300px) scale(0.1, 0.5);
  }
}

@keyframes line-10 {
  0% {
    -webkit-transform: rotate(0) translate(0, 0) scale(0.01);
            transform: rotate(0) translate(0, 0) scale(0.01);
  }
  5% {
    -webkit-transform: rotate(0) translate(0, 0) scale(1);
            transform: rotate(0) translate(0, 0) scale(1);
  }
  15% {
    -webkit-transform: rotate(324deg) translate(0, 0) scale(1);
            transform: rotate(324deg) translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: rotate(324deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(324deg) translate(0, -100px) scale(0.25, 1);
  }
  25% {
    -webkit-transform: rotate(324deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
            transform: rotate(324deg) translate(0, -100px) scale(0.25, 0.25) rotate(179deg);
  }
  30% {
    -webkit-transform: rotate(324deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
            transform: rotate(324deg) translate(0, -100px) scale(1, 0.25) rotate(179deg);
  }
  35% {
    -webkit-transform: rotate(324deg) translate(0, -60px) scale(1, 0.1);
            transform: rotate(324deg) translate(0, -60px) scale(1, 0.1);
  }
  40% {
    -webkit-transform: rotate(324deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
            transform: rotate(324deg) translate(0, -60px) scale(1, 0.1) translate(-30px, 0);
  }
  45% {
    -webkit-transform: rotate(324deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
            transform: rotate(324deg) translate(0, -60px) scale(1, 0.1) translate(30px, 0);
  }
  50% {
    -webkit-transform: rotate(324deg) translate(0, -60px) scale(0.1, 1);
            transform: rotate(324deg) translate(0, -60px) scale(0.1, 1);
  }
  55% {
    -webkit-transform: rotate(324deg) translate(0, -60px) scale(0.5, 0.1);
            transform: rotate(324deg) translate(0, -60px) scale(0.5, 0.1);
    border-radius: 0;
  }
  60% {
    -webkit-transform: rotate(324deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
            transform: rotate(324deg) translate(0, -80px) scale(0.5, 0.5) rotate(179deg);
    border-radius: 50%;
  }
  65% {
    -webkit-transform: rotate(324deg) translate(0, 0) scale(0.2, 0.2);
            transform: rotate(324deg) translate(0, 0) scale(0.2, 0.2);
    border-radius: 50%;
  }
  70% {
    -webkit-transform: rotate(324deg) translate(0, -100px) scale(0.25, 1);
            transform: rotate(324deg) translate(0, -100px) scale(0.25, 1);
    border-radius: 0;
  }
  75% {
    -webkit-transform: rotate(324deg) translate(0, -100px) scale(0.25, 0.25);
            transform: rotate(324deg) translate(0, -100px) scale(0.25, 0.25);
  }
  80% {
    -webkit-transform: rotate(324deg) translate(0, -350px) scale(0.5, 0.5);
            transform: rotate(324deg) translate(0, -350px) scale(0.5, 0.5);
  }
  85% {
    -webkit-transform: rotate(344deg) translate(0, -150px) scale(0.5, 0.5) rotate(179deg) translate(-150px, 150px);
            transform: rotate(344deg) translate(0, -150px) scale(0.5, 0.5) rotate(179deg) translate(-150px, 150px);
  }
  90% {
    -webkit-transform: rotate(324deg) translate(0, -30px) scale(0.5, 0.1);
            transform: rotate(324deg) translate(0, -30px) scale(0.5, 0.1);
  }
  95% {
    -webkit-transform: rotate(324deg) translate(0, -10px) scale(0.1, 0.5);
            transform: rotate(324deg) translate(0, -10px) scale(0.1, 0.5);
  }
  100% {
    -webkit-transform: rotate(324deg) translate(0, -300px) scale(0.1, 0.5);
            transform: rotate(324deg) translate(0, -300px) scale(0.1, 0.5);
  }
}

body::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
   background: #24006B;
  -webkit-animation: overlay infinite 12s;
          animation: overlay infinite 12s;
  content: '';
}
@-webkit-keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}
@keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}
@-webkit-keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@-webkit-keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}
@keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}/*end*/
img {
  position: absolute;
  top:137px;
  left: 575px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #24006B;
  width: 211px;
  height: 212px;
  z-index: 3;
  opacity: 1;
  animation: photo-ani 20s forwards;
}
/* Keyframes */
@keyframes line-ani {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes photo-ani {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*end*/
.loader-text,
.loader-text::before,
.loader {
  position: absolute;
  top: 0;
  bottom:59px;
  left:-5px;
  right:-5px;
  margin: auto;
  width: 230px;
  height:230px;
}
.loader {
  border-color: #bd313b transparent;
  border-style: solid;
  border-width: 4px;
  border-radius: 50%;
  transform: rotate(0deg);
  animation: spin 2000ms linear infinite, color 2000ms linear infinite;
}
.loader-text::before {
  text-align: center;
  line-height: 200px;
  content: 'Cibeber Cimahi';
  display: block;
  position: absolute;
  color: #1919B3;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes color {
  0% {
    border-color: #bd313b transparent;
  }
  25% {
    border-color: #6d31bd transparent;
  }
  50% {
    border-color: #31bdb3 transparent;
  }
  75% {
    border-color: #81bd31 transparent;
  }
  100% {
    border-color: #bd313b transparent;
  }
}

#gif:before {
  content: " ";
  position: absolute;
  height:10px;
  width:10px;
  border-radius:50%;
  top: -155px;
  left: 420px;
  background:green;
  border: 5px solid yellow;
  box-shadow:
    0 355px 0 -5px black,
    0 355px 0 0px orange;
  -webkit-animation: reverseRotate 13s linear infinite;
  animation: reverseRotate 18s linear infinite;
}
#gif:after {
  content: " ";
  position: absolute;
  height:10px;
  width:10px;
  border-radius:50%;
  top: -655px;
  left:920px;
  background:red;
  border:5px solid #555;
  box-shadow:
    0 355px 0 -5px green,
    0 355px 0 0px yellow;
  -webkit-animation: reverseRotate 23s linear infinite;
  animation: reverseRotate 66s linear infinite;
}

@keyframes rotate {
  0%   { transform: rotate(  0deg); }  
  10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  { 
    background: black; 
    box-shadow:
      178px 0 0 -25px black,
      178px 0 0 -20px blue,
      -178px 0 0 -25px red,
      -178px 0 0 -20px yellow, 
      0 0 0 20px pink,
      0 0 0 30px white,
      0 0 0 130px black,
      0 0 0 135px green;
  }
  12.5%, 37.5%, 62.5%, 87.5% { 
    background: #f00; 
    box-shadow:
      178px 0 0 -25px blue,
      178px 0 0 -20px green,
      -178px 0 0 -25px blue,
      -178px 0 0 -20px yellow, 
      0 0 0 20px black,
      0 0 0 30px orange,
      0 0 0 130px black,
      0 0 0 135px orange;
  }    
  100% { transform: rotate(360deg); }
}
@keyframes reverseRotate {
  0%   { transform: translateY(378px) rotate(0deg) translateY(-1120px) rotate(0deg); }  
  10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  { 
    background: black; box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white; 
  }
  12.5%, 37.5%, 62.5%, 87.5% { 
    background: white; box-shadow: 0 355px 0 -5px white, 0 355px 0 0px white; 
  }    
  100% { transform: translateY(378px) rotate(-720deg) translateY(-178px) rotate(0deg); }
}
@keyframes segmentRotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(33000deg); }
}


@-webkit-keyframes rotate {
  0%   { -webkit-transform: rotate(  0deg); }  
  10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  { 
    background: black; 
    box-shadow:
      178px 0 0 -25px yellow,
      178px 0 0 -20px #f00,
      -178px 0 0 -25px green,
      -178px 0 0 -20px #ff0, 
      0 0 0 20px black,
      0 0 0 30px #f00,
      0 0 0 130px black,
      0 0 0 135px orange;
  }
  12.5%, 37.5%, 62.5%, 87.5% { 
    background: blue; 
    box-shadow:
      178px 0 0 -25px green,
      178px 0 0 -20px blue,
      -178px 0 0 -25px orange,
      -178px 0 0 -20px blue, 
      0 0 0 20px black,
      0 0 0 30px yellow,
      0 0 0 130px black,
      0 0 0 135px yellow,
  }    
  100% { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes reverseRotate {
  0%   { -webkit-transform: translateY(178px) rotate(0deg) translateY(-178px) rotate(0deg); }  
  10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  { 
    background: black; box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white; 
  }
  12.5%, 37.5%, 62.5%, 87.5% { 
    background: white; box-shadow: 0 355px 0 -5px white, 0 355px 0 0px white; 
  }    
  100% { -webkit-transform: translateY(178px) rotate(-720deg) translateY(-178px) rotate(0deg); }
}
@-webkit-keyframes segmentRotate {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(-32000deg); }
}
</style> 

<div id='gif'>
</div>
  <div class="center">
    <div class="line line-1"></div>
    <div class="line line-2"></div>
    <div class="line line-3"></div>
    <div class="line line-4"></div>
    <div class="line line-5"></div>
    <div class="line line-6"></div>
    <div class="line line-7"></div>
    <div class="line line-8"></div>
    <div class="line line-9"></div>
    <div class="line line-10"></div>
  </div>

<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/07/lines-animation.html" target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a>  </h2>
</a>  
</div>
</header>
<div id="Mys2010">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBS0CarXAaHLTorhnE9BNjfjZeF8zXIICpk6wG7R-WfpXubwQqpAiJ28TrjzFYkDiZRAUcdS3jit1lJg2JQ-wq9fGfMsuPAAFVComGf71cUiQVnc4bBy6zu2R2vY8pNUabaOiUrH4M3Ar_/s1600-r/Samantha-mys2010.jpg"  />
</div>
<div class="loader-2">
<div class="loader-text">
<div class="loader">
</div>

<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:cyan;"> EDITED BY. <a href="https://Link Download"target="_blank" 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:cyan;"> COPYRIGHT <a href="http://codepen.io/Myscript2010" 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/gg1cover/music/Samantha-Mys2010s.mp3"controls="controls"></audio></h2>
</a></div>
</div>

<ul class="mys2010-list">
<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>  
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>   
<script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'>
</script> 
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js"></script>      

<script>
      $(function () {
$('video,audio').mediaelementplayer({
success: function (mediaElement, domObject) {
var audio_src = $('li.current').attr('data-url');
mediaElement.setSrc(audio_src);
mediaElement.addEventListener('ended', function (e) {
mys2010PlayNext(e.target);
}, false);
},
keyActions: []
});
$('.mys2010-list li').click(function () {
$(this).addClass('current').siblings().removeClass('current');
var audio_src = $(this).attr('data-url');
$('audio#mys2010:first').each(function () {
this.player.pause();
this.player.setSrc(audio_src);
this.player.play();
});
});
});
function mys2010PlayNext(currentPlayer) {
if ($('.mys2010-list li.current').length > 0) {
var current_item = $('.mys2010-list li.current:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('if ' + audio_src);
} else {
var current_item = $('.mys2010-list li:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('elseif ' + audio_src);
}
if ($(current_item).is(':last-child')) {
$(current_item).removeClass('current');
} else {
currentPlayer.setSrc(audio_src);
currentPlayer.play();
}}    
</script>

Audio Code by. Jereme Causing
Lines Animation Code by. Matthias Martin

Design Code is Edited by. Mys2010 on Codepen

DEMOSHOW

If you want to directly copy  and  paste you canDownload Here Lines Animation  

Category: Lines Animation