Mys2010 on Codepen: css spirals with audio | SEO Friendly Responsive Blogger Myscript2010s

Memasang Kode css spirals with audio
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:#12127D;height:100%;overflow:hidden;}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  0px 0;
  position: fixed;
  top:-9px;
  width: 100%;
text-align: center;
font-size:  6px; 
}
.ap {
position: fixed;
right: 0;
bottom:-3px;
left: 0;
height: 60px;
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; 
 border-bottom:#1bdde4;
 background: #660099;
z-index: 9999;
} 
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #12127D 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: 17px;
}

body::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:#B24700 ;
  -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;
  }
}

html {
  overflow-X: hidden;
  height: 100%;
}
html body {
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #12127D), color-stop(100%, #000000));
  background-image: -moz-linear-gradient(top, #12127D 0%, #000000 100%);
  background-image: -webkit-linear-gradient(top, #12127D 0%, #000000 100%);
  background-image: linear-gradient(to bottom, #12127D 0%, #000000 100%);
  position: relative;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  margin: auto;
  overflow: hidden;
}
html body h1 {
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 100;
  letter-spacing: 0.5px;
  color: #FFFFFF;
  font-size: 40px;
  text-align: center;
}
html body .sand {
  position: absolute;
  top: 10%;
  left: -10%;
  width: 120%;
  height: 1000px;
  -moz-border-radius: 50% 50% 0 0/3% 3% 0 0;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 0 0/3% 3% 0 0;
  background:  rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0 20px 30px 0 rgba(0, 0, 0, 0.3), 0 -20px 30px 0 rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 20px 30px 0 rgba(0, 0, 0, 0.3), 0 -20px 30px 0 rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 20px 30px 0 rgba(0, 0, 0, 0.3), 0 -20px 30px 0 rgba(0, 0, 0, 0.3);
}

img {
  position: absolute;
  top:200px;
  left:575px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #FFFF00;
  width: 211px;
  height: 212px;
  z-index: 3;
  opacity: 1;
  animation: photo-ani 22s forwards;
}
/* Keyframes */
@keyframes line-ani {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes photo-ani {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.loader-text,
.loader-text::before,
.loader {
  position: absolute;
  top: 0;
  bottom:-4px;
  left:-5px;
  right: 0;
  margin: auto;
  width: 290px;
  height:290px;
}
.loader {
  border-color: #f00 transparent;
  border-style: solid;
  border-width:8px;
  border-radius: 50%;
  transform: rotate(0deg);
  animation: spin 200ms linear infinite, color 200ms linear infinite;
}
.loader-text::before {
  text-align: center;
  left:11px;
  font-family: "agency fb" ;
  font-size: 24px;
  line-height:320px;
  content: 'Cibeber Cimahi';
  display: block;
  position: absolute;
  color: #ff0;
  text-transform: uppercase;
  letter-spacing: 1.em;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes color {
  0% {
    border-color: #FF0000 transparent;
  }
  25% {
    border-color: #C8C8FE transparent;
  }
  50% {
    border-color: #12127D transparent;
  }
  75% {
    border-color: #81bd31 transparent;
  }
  100% {
    border-color: #FFFF00 transparent;
  }
}

@-webkit-keyframes back1 {
  100% {
    -ms-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
@-moz-keyframes back1 {
  100% {
    -ms-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
@-o-keyframes back1 {
  100% {
    -ms-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
@keyframes back1 {
  100% {
    -ms-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
@-webkit-keyframes move2 {
  100% {
    -ms-transform: rotate(720deg);
    -webkit-transform: rotate(720deg);
    transform: rotate(720deg);
  }
}
@-moz-keyframes move2 {
  100% {
    -ms-transform: rotate(720deg);
    -webkit-transform: rotate(720deg);
    transform: rotate(720deg);
  }
}
@-o-keyframes move2 {
  100% {
    -ms-transform: rotate(720deg);
    -webkit-transform: rotate(720deg);
    transform: rotate(720deg);
  }
}
@keyframes move2 {
  100% {
    -ms-transform: rotate(720deg);
    -webkit-transform: rotate(720deg);
    transform: rotate(720deg);
  }
}
@-webkit-keyframes back3 {
  100% {
    -ms-transform: rotate(-1080deg);
    -webkit-transform: rotate(-1080deg);
    transform: rotate(-1080deg);
  }
}
@-moz-keyframes back3 {
  100% {
    -ms-transform: rotate(-1080deg);
    -webkit-transform: rotate(-1080deg);
    transform: rotate(-1080deg);
  }
}
@-o-keyframes back3 {
  100% {
    -ms-transform: rotate(-1080deg);
    -webkit-transform: rotate(-1080deg);
    transform: rotate(-1080deg);
  }
}
@keyframes back3 {
  100% {
    -ms-transform: rotate(-1080deg);
    -webkit-transform: rotate(-1080deg);
    transform: rotate(-1080deg);
  }
}
@-webkit-keyframes move4 {
  100% {
    -ms-transform: rotate(1440deg);
    -webkit-transform: rotate(1440deg);
    transform: rotate(1440deg);
  }
}
@-moz-keyframes move4 {
  100% {
    -ms-transform: rotate(1440deg);
    -webkit-transform: rotate(1440deg);
    transform: rotate(1440deg);
  }
}
@-o-keyframes move4 {
  100% {
    -ms-transform: rotate(1440deg);
    -webkit-transform: rotate(1440deg);
    transform: rotate(1440deg);
  }
}
@keyframes move4 {
  100% {
    -ms-transform: rotate(1440deg);
    -webkit-transform: rotate(1440deg);
    transform: rotate(1440deg);
  }
}
@-webkit-keyframes back5 {
  100% {
    -ms-transform: rotate(-1800deg);
    -webkit-transform: rotate(-1800deg);
    transform: rotate(-1800deg);
  }
}
@-moz-keyframes back5 {
  100% {
    -ms-transform: rotate(-1800deg);
    -webkit-transform: rotate(-1800deg);
    transform: rotate(-1800deg);
  }
}
@-o-keyframes back5 {
  100% {
    -ms-transform: rotate(-1800deg);
    -webkit-transform: rotate(-1800deg);
    transform: rotate(-1800deg);
  }
}
@keyframes back5 {
  100% {
    -ms-transform: rotate(-1800deg);
    -webkit-transform: rotate(-1800deg);
    transform: rotate(-1800deg);
  }
}
@-webkit-keyframes move6 {
  100% {
    -ms-transform: rotate(2160deg);
    -webkit-transform: rotate(2160deg);
    transform: rotate(2160deg);
  }
}
@-moz-keyframes move6 {
  100% {
    -ms-transform: rotate(2160deg);
    -webkit-transform: rotate(2160deg);
    transform: rotate(2160deg);
  }
}
@-o-keyframes move6 {
  100% {
    -ms-transform: rotate(2160deg);
    -webkit-transform: rotate(2160deg);
    transform: rotate(2160deg);
  }
}
@keyframes move6 {
  100% {
    -ms-transform: rotate(2160deg);
    -webkit-transform: rotate(2160deg);
    transform: rotate(2160deg);
  }
}
@-webkit-keyframes back7 {
  100% {
    -ms-transform: rotate(-2520deg);
    -webkit-transform: rotate(-2520deg);
    transform: rotate(-2520deg);
  }
}
@-moz-keyframes back7 {
  100% {
    -ms-transform: rotate(-2520deg);
    -webkit-transform: rotate(-2520deg);
    transform: rotate(-2520deg);
  }
}
@-o-keyframes back7 {
  100% {
    -ms-transform: rotate(-2520deg);
    -webkit-transform: rotate(-2520deg);
    transform: rotate(-2520deg);
  }
}
@keyframes back7 {
  100% {
    -ms-transform: rotate(-2520deg);
    -webkit-transform: rotate(-2520deg);
    transform: rotate(-2520deg);
  }
}
@-webkit-keyframes move8 {
  100% {
    -ms-transform: rotate(2880deg);
    -webkit-transform: rotate(2880deg);
    transform: rotate(2880deg);
  }
}
@-moz-keyframes move8 {
  100% {
    -ms-transform: rotate(2880deg);
    -webkit-transform: rotate(2880deg);
    transform: rotate(2880deg);
  }
}
@-o-keyframes move8 {
  100% {
    -ms-transform: rotate(2880deg);
    -webkit-transform: rotate(2880deg);
    transform: rotate(2880deg);
  }
}
@keyframes move8 {
  100% {
    -ms-transform: rotate(2880deg);
    -webkit-transform: rotate(2880deg);
    transform: rotate(2880deg);
  }
}
@-webkit-keyframes back9 {
  100% {
    -ms-transform: rotate(-3240deg);
    -webkit-transform: rotate(-3240deg);
    transform: rotate(-3240deg);
  }
}
@-moz-keyframes back9 {
  100% {
    -ms-transform: rotate(-3240deg);
    -webkit-transform: rotate(-3240deg);
    transform: rotate(-3240deg);
  }
}
@-o-keyframes back9 {
  100% {
    -ms-transform: rotate(-3240deg);
    -webkit-transform: rotate(-3240deg);
    transform: rotate(-3240deg);
  }
}
@keyframes back9 {
  100% {
    -ms-transform: rotate(-3240deg);
    -webkit-transform: rotate(-3240deg);
    transform: rotate(-3240deg);
  }
}
@-webkit-keyframes move10 {
  100% {
    -ms-transform: rotate(3600deg);
    -webkit-transform: rotate(3600deg);
    transform: rotate(3600deg);
  }
}
@-moz-keyframes move10 {
  100% {
    -ms-transform: rotate(3600deg);
    -webkit-transform: rotate(3600deg);
    transform: rotate(3600deg);
  }
}
@-o-keyframes move10 {
  100% {
    -ms-transform: rotate(3600deg);
    -webkit-transform: rotate(3600deg);
    transform: rotate(3600deg);
  }
}
@keyframes move10 {
  100% {
    -ms-transform: rotate(3600deg);
    -webkit-transform: rotate(3600deg);
    transform: rotate(3600deg);
  }
}
@-webkit-keyframes back11 {
  100% {
    -ms-transform: rotate(-3960deg);
    -webkit-transform: rotate(-3960deg);
    transform: rotate(-3960deg);
  }
}
@-moz-keyframes back11 {
  100% {
    -ms-transform: rotate(-3960deg);
    -webkit-transform: rotate(-3960deg);
    transform: rotate(-3960deg);
  }
}
@-o-keyframes back11 {
  100% {
    -ms-transform: rotate(-3960deg);
    -webkit-transform: rotate(-3960deg);
    transform: rotate(-3960deg);
  }
}
@keyframes back11 {
  100% {
    -ms-transform: rotate(-3960deg);
    -webkit-transform: rotate(-3960deg);
    transform: rotate(-3960deg);
  }
}
@-webkit-keyframes move12 {
  100% {
    -ms-transform: rotate(4320deg);
    -webkit-transform: rotate(4320deg);
    transform: rotate(4320deg);
  }
}
@-moz-keyframes move12 {
  100% {
    -ms-transform: rotate(4320deg);
    -webkit-transform: rotate(4320deg);
    transform: rotate(4320deg);
  }
}
@-o-keyframes move12 {
  100% {
    -ms-transform: rotate(4320deg);
    -webkit-transform: rotate(4320deg);
    transform: rotate(4320deg);
  }
}
@keyframes move12 {
  100% {
    -ms-transform: rotate(4320deg);
    -webkit-transform: rotate(4320deg);
    transform: rotate(4320deg);
  }
}
@-webkit-keyframes back13 {
  100% {
    -ms-transform: rotate(-4680deg);
    -webkit-transform: rotate(-4680deg);
    transform: rotate(-4680deg);
  }
}
@-moz-keyframes back13 {
  100% {
    -ms-transform: rotate(-4680deg);
    -webkit-transform: rotate(-4680deg);
    transform: rotate(-4680deg);
  }
}
@-o-keyframes back13 {
  100% {
    -ms-transform: rotate(-4680deg);
    -webkit-transform: rotate(-4680deg);
    transform: rotate(-4680deg);
  }
}
@keyframes back13 {
  100% {
    -ms-transform: rotate(-4680deg);
    -webkit-transform: rotate(-4680deg);
    transform: rotate(-4680deg);
  }
}
@-webkit-keyframes move14 {
  100% {
    -ms-transform: rotate(5040deg);
    -webkit-transform: rotate(5040deg);
    transform: rotate(5040deg);
  }
}
@-moz-keyframes move14 {
  100% {
    -ms-transform: rotate(5040deg);
    -webkit-transform: rotate(5040deg);
    transform: rotate(5040deg);
  }
}
@-o-keyframes move14 {
  100% {
    -ms-transform: rotate(5040deg);
    -webkit-transform: rotate(5040deg);
    transform: rotate(5040deg);
  }
}
@keyframes move14 {
  100% {
    -ms-transform: rotate(5040deg);
    -webkit-transform: rotate(5040deg);
    transform: rotate(5040deg);
  }
}
@-webkit-keyframes back15 {
  100% {
    -ms-transform: rotate(-5400deg);
    -webkit-transform: rotate(-5400deg);
    transform: rotate(-5400deg);
  }
}
@-moz-keyframes back15 {
  100% {
    -ms-transform: rotate(-5400deg);
    -webkit-transform: rotate(-5400deg);
    transform: rotate(-5400deg);
  }
}
@-o-keyframes back15 {
  100% {
    -ms-transform: rotate(-5400deg);
    -webkit-transform: rotate(-5400deg);
    transform: rotate(-5400deg);
  }
}
@keyframes back15 {
  100% {
    -ms-transform: rotate(-5400deg);
    -webkit-transform: rotate(-5400deg);
    transform: rotate(-5400deg);
  }
}
@-webkit-keyframes move16 {
  100% {
    -ms-transform: rotate(5760deg);
    -webkit-transform: rotate(5760deg);
    transform: rotate(5760deg);
  }
}
@-moz-keyframes move16 {
  100% {
    -ms-transform: rotate(5760deg);
    -webkit-transform: rotate(5760deg);
    transform: rotate(5760deg);
  }
}
@-o-keyframes move16 {
  100% {
    -ms-transform: rotate(5760deg);
    -webkit-transform: rotate(5760deg);
    transform: rotate(5760deg);
  }
}
@keyframes move16 {
  100% {
    -ms-transform: rotate(5760deg);
    -webkit-transform: rotate(5760deg);
    transform: rotate(5760deg);
  }
}
@-webkit-keyframes back17 {
  100% {
    -ms-transform: rotate(-6120deg);
    -webkit-transform: rotate(-6120deg);
    transform: rotate(-6120deg);
  }
}
@-moz-keyframes back17 {
  100% {
    -ms-transform: rotate(-6120deg);
    -webkit-transform: rotate(-6120deg);
    transform: rotate(-6120deg);
  }
}
@-o-keyframes back17 {
  100% {
    -ms-transform: rotate(-6120deg);
    -webkit-transform: rotate(-6120deg);
    transform: rotate(-6120deg);
  }
}
@keyframes back17 {
  100% {
    -ms-transform: rotate(-6120deg);
    -webkit-transform: rotate(-6120deg);
    transform: rotate(-6120deg);
  }
}
@-webkit-keyframes move18 {
  100% {
    -ms-transform: rotate(6480deg);
    -webkit-transform: rotate(6480deg);
    transform: rotate(6480deg);
  }
}
@-moz-keyframes move18 {
  100% {
    -ms-transform: rotate(6480deg);
    -webkit-transform: rotate(6480deg);
    transform: rotate(6480deg);
  }
}
@-o-keyframes move18 {
  100% {
    -ms-transform: rotate(6480deg);
    -webkit-transform: rotate(6480deg);
    transform: rotate(6480deg);
  }
}
@keyframes move18 {
  100% {
    -ms-transform: rotate(6480deg);
    -webkit-transform: rotate(6480deg);
    transform: rotate(6480deg);
  }
}
@-webkit-keyframes back19 {
  100% {
    -ms-transform: rotate(-6840deg);
    -webkit-transform: rotate(-6840deg);
    transform: rotate(-6840deg);
  }
}
@-moz-keyframes back19 {
  100% {
    -ms-transform: rotate(-6840deg);
    -webkit-transform: rotate(-6840deg);
    transform: rotate(-6840deg);
  }
}
@-o-keyframes back19 {
  100% {
    -ms-transform: rotate(-6840deg);
    -webkit-transform: rotate(-6840deg);
    transform: rotate(-6840deg);
  }
}
@keyframes back19 {
  100% {
    -ms-transform: rotate(-6840deg);
    -webkit-transform: rotate(-6840deg);
    transform: rotate(-6840deg);
  }
}
@-webkit-keyframes move20 {
  100% {
    -ms-transform: rotate(7200deg);
    -webkit-transform: rotate(7200deg);
    transform: rotate(7200deg);
  }
}
@-moz-keyframes move20 {
  100% {
    -ms-transform: rotate(7200deg);
    -webkit-transform: rotate(7200deg);
    transform: rotate(7200deg);
  }
}
@-o-keyframes move20 {
  100% {
    -ms-transform: rotate(7200deg);
    -webkit-transform: rotate(7200deg);
    transform: rotate(7200deg);
  }
}
@keyframes move20 {
  100% {
    -ms-transform: rotate(7200deg);
    -webkit-transform: rotate(7200deg);
    transform: rotate(7200deg);
  }
}
@-webkit-keyframes back21 {
  100% {
    -ms-transform: rotate(-7560deg);
    -webkit-transform: rotate(-7560deg);
    transform: rotate(-7560deg);
  }
}
@-moz-keyframes back21 {
  100% {
    -ms-transform: rotate(-7560deg);
    -webkit-transform: rotate(-7560deg);
    transform: rotate(-7560deg);
  }
}
@-o-keyframes back21 {
  100% {
    -ms-transform: rotate(-7560deg);
    -webkit-transform: rotate(-7560deg);
    transform: rotate(-7560deg);
  }
}
@keyframes back21 {
  100% {
    -ms-transform: rotate(-7560deg);
    -webkit-transform: rotate(-7560deg);
    transform: rotate(-7560deg);
  }
}
@-webkit-keyframes move22 {
  100% {
    -ms-transform: rotate(7920deg);
    -webkit-transform: rotate(7920deg);
    transform: rotate(7920deg);
  }
}
@-moz-keyframes move22 {
  100% {
    -ms-transform: rotate(7920deg);
    -webkit-transform: rotate(7920deg);
    transform: rotate(7920deg);
  }
}
@-o-keyframes move22 {
  100% {
    -ms-transform: rotate(7920deg);
    -webkit-transform: rotate(7920deg);
    transform: rotate(7920deg);
  }
}
@keyframes move22 {
  100% {
    -ms-transform: rotate(7920deg);
    -webkit-transform: rotate(7920deg);
    transform: rotate(7920deg);
  }
}
@-webkit-keyframes back23 {
  100% {
    -ms-transform: rotate(-8280deg);
    -webkit-transform: rotate(-8280deg);
    transform: rotate(-8280deg);
  }
}
@-moz-keyframes back23 {
  100% {
    -ms-transform: rotate(-8280deg);
    -webkit-transform: rotate(-8280deg);
    transform: rotate(-8280deg);
  }
}
@-o-keyframes back23 {
  100% {
    -ms-transform: rotate(-8280deg);
    -webkit-transform: rotate(-8280deg);
    transform: rotate(-8280deg);
  }
}
@keyframes back23 {
  100% {
    -ms-transform: rotate(-8280deg);
    -webkit-transform: rotate(-8280deg);
    transform: rotate(-8280deg);
  }
}
@-webkit-keyframes move24 {
  100% {
    -ms-transform: rotate(8640deg);
    -webkit-transform: rotate(8640deg);
    transform: rotate(8640deg);
  }
}
@-moz-keyframes move24 {
  100% {
    -ms-transform: rotate(8640deg);
    -webkit-transform: rotate(8640deg);
    transform: rotate(8640deg);
  }
}
@-o-keyframes move24 {
  100% {
    -ms-transform: rotate(8640deg);
    -webkit-transform: rotate(8640deg);
    transform: rotate(8640deg);
  }
}
@keyframes move24 {
  100% {
    -ms-transform: rotate(8640deg);
    -webkit-transform: rotate(8640deg);
    transform: rotate(8640deg);
  }
}
@-webkit-keyframes back25 {
  100% {
    -ms-transform: rotate(-9000deg);
    -webkit-transform: rotate(-9000deg);
    transform: rotate(-9000deg);
  }
}
@-moz-keyframes back25 {
  100% {
    -ms-transform: rotate(-9000deg);
    -webkit-transform: rotate(-9000deg);
    transform: rotate(-9000deg);
  }
}
@-o-keyframes back25 {
  100% {
    -ms-transform: rotate(-9000deg);
    -webkit-transform: rotate(-9000deg);
    transform: rotate(-9000deg);
  }
}
@keyframes back25 {
  100% {
    -ms-transform: rotate(-9000deg);
    -webkit-transform: rotate(-9000deg);
    transform: rotate(-9000deg);
  }
}
@-webkit-keyframes move26 {
  100% {
    -ms-transform: rotate(9360deg);
    -webkit-transform: rotate(9360deg);
    transform: rotate(9360deg);
  }
}
@-moz-keyframes move26 {
  100% {
    -ms-transform: rotate(9360deg);
    -webkit-transform: rotate(9360deg);
    transform: rotate(9360deg);
  }
}
@-o-keyframes move26 {
  100% {
    -ms-transform: rotate(9360deg);
    -webkit-transform: rotate(9360deg);
    transform: rotate(9360deg);
  }
}
@keyframes move26 {
  100% {
    -ms-transform: rotate(9360deg);
    -webkit-transform: rotate(9360deg);
    transform: rotate(9360deg);
  }
}
@-webkit-keyframes back27 {
  100% {
    -ms-transform: rotate(-9720deg);
    -webkit-transform: rotate(-9720deg);
    transform: rotate(-9720deg);
  }
}
@-moz-keyframes back27 {
  100% {
    -ms-transform: rotate(-9720deg);
    -webkit-transform: rotate(-9720deg);
    transform: rotate(-9720deg);
  }
}
@-o-keyframes back27 {
  100% {
    -ms-transform: rotate(-9720deg);
    -webkit-transform: rotate(-9720deg);
    transform: rotate(-9720deg);
  }
}
@keyframes back27 {
  100% {
    -ms-transform: rotate(-9720deg);
    -webkit-transform: rotate(-9720deg);
    transform: rotate(-9720deg);
  }
}
@-webkit-keyframes move28 {
  100% {
    -ms-transform: rotate(10080deg);
    -webkit-transform: rotate(10080deg);
    transform: rotate(10080deg);
  }
}
@-moz-keyframes move28 {
  100% {
    -ms-transform: rotate(10080deg);
    -webkit-transform: rotate(10080deg);
    transform: rotate(10080deg);
  }
}
@-o-keyframes move28 {
  100% {
    -ms-transform: rotate(10080deg);
    -webkit-transform: rotate(10080deg);
    transform: rotate(10080deg);
  }
}
@keyframes move28 {
  100% {
    -ms-transform: rotate(10080deg);
    -webkit-transform: rotate(10080deg);
    transform: rotate(10080deg);
  }
}
@-webkit-keyframes back29 {
  100% {
    -ms-transform: rotate(-10440deg);
    -webkit-transform: rotate(-10440deg);
    transform: rotate(-10440deg);
  }
}
@-moz-keyframes back29 {
  100% {
    -ms-transform: rotate(-10440deg);
    -webkit-transform: rotate(-10440deg);
    transform: rotate(-10440deg);
  }
}
@-o-keyframes back29 {
  100% {
    -ms-transform: rotate(-10440deg);
    -webkit-transform: rotate(-10440deg);
    transform: rotate(-10440deg);
  }
}
@keyframes back29 {
  100% {
    -ms-transform: rotate(-10440deg);
    -webkit-transform: rotate(-10440deg);
    transform: rotate(-10440deg);
  }
}
@-webkit-keyframes move30 {
  100% {
    -ms-transform: rotate(10800deg);
    -webkit-transform: rotate(10800deg);
    transform: rotate(10800deg);
  }
}
@-moz-keyframes move30 {
  100% {
    -ms-transform: rotate(10800deg);
    -webkit-transform: rotate(10800deg);
    transform: rotate(10800deg);
  }
}
@-o-keyframes move30 {
  100% {
    -ms-transform: rotate(10800deg);
    -webkit-transform: rotate(10800deg);
    transform: rotate(10800deg);
  }
}
@keyframes move30 {
  100% {
    -ms-transform: rotate(10800deg);
    -webkit-transform: rotate(10800deg);
    transform: rotate(10800deg);
  }
}
@-webkit-keyframes back31 {
  100% {
    -ms-transform: rotate(-11160deg);
    -webkit-transform: rotate(-11160deg);
    transform: rotate(-11160deg);
  }
}
@-moz-keyframes back31 {
  100% {
    -ms-transform: rotate(-11160deg);
    -webkit-transform: rotate(-11160deg);
    transform: rotate(-11160deg);
  }
}
@-o-keyframes back31 {
  100% {
    -ms-transform: rotate(-11160deg);
    -webkit-transform: rotate(-11160deg);
    transform: rotate(-11160deg);
  }
}
@keyframes back31 {
  100% {
    -ms-transform: rotate(-11160deg);
    -webkit-transform: rotate(-11160deg);
    transform: rotate(-11160deg);
  }
}
@-webkit-keyframes move32 {
  100% {
    -ms-transform: rotate(11520deg);
    -webkit-transform: rotate(11520deg);
    transform: rotate(11520deg);
  }
}
@-moz-keyframes move32 {
  100% {
    -ms-transform: rotate(11520deg);
    -webkit-transform: rotate(11520deg);
    transform: rotate(11520deg);
  }
}
@-o-keyframes move32 {
  100% {
    -ms-transform: rotate(11520deg);
    -webkit-transform: rotate(11520deg);
    transform: rotate(11520deg);
  }
}
@keyframes move32 {
  100% {
    -ms-transform: rotate(11520deg);
    -webkit-transform: rotate(11520deg);
    transform: rotate(11520deg);
  }
}
@-webkit-keyframes back33 {
  100% {
    -ms-transform: rotate(-11880deg);
    -webkit-transform: rotate(-11880deg);
    transform: rotate(-11880deg);
  }
}
@-moz-keyframes back33 {
  100% {
    -ms-transform: rotate(-11880deg);
    -webkit-transform: rotate(-11880deg);
    transform: rotate(-11880deg);
  }
}
@-o-keyframes back33 {
  100% {
    -ms-transform: rotate(-11880deg);
    -webkit-transform: rotate(-11880deg);
    transform: rotate(-11880deg);
  }
}
@keyframes back33 {
  100% {
    -ms-transform: rotate(-11880deg);
    -webkit-transform: rotate(-11880deg);
    transform: rotate(-11880deg);
  }
}
@-webkit-keyframes move34 {
  100% {
    -ms-transform: rotate(12240deg);
    -webkit-transform: rotate(12240deg);
    transform: rotate(12240deg);
  }
}
@-moz-keyframes move34 {
  100% {
    -ms-transform: rotate(12240deg);
    -webkit-transform: rotate(12240deg);
    transform: rotate(12240deg);
  }
}
@-o-keyframes move34 {
  100% {
    -ms-transform: rotate(12240deg);
    -webkit-transform: rotate(12240deg);
    transform: rotate(12240deg);
  }
}
@keyframes move34 {
  100% {
    -ms-transform: rotate(12240deg);
    -webkit-transform: rotate(12240deg);
    transform: rotate(12240deg);
  }
}
@-webkit-keyframes back35 {
  100% {
    -ms-transform: rotate(-12600deg);
    -webkit-transform: rotate(-12600deg);
    transform: rotate(-12600deg);
  }
}
@-moz-keyframes back35 {
  100% {
    -ms-transform: rotate(-12600deg);
    -webkit-transform: rotate(-12600deg);
    transform: rotate(-12600deg);
  }
}
@-o-keyframes back35 {
  100% {
    -ms-transform: rotate(-12600deg);
    -webkit-transform: rotate(-12600deg);
    transform: rotate(-12600deg);
  }
}
@keyframes back35 {
  100% {
    -ms-transform: rotate(-12600deg);
    -webkit-transform: rotate(-12600deg);
    transform: rotate(-12600deg);
  }
}
@-webkit-keyframes move36 {
  100% {
    -ms-transform: rotate(12960deg);
    -webkit-transform: rotate(12960deg);
    transform: rotate(12960deg);
  }
}
@-moz-keyframes move36 {
  100% {
    -ms-transform: rotate(12960deg);
    -webkit-transform: rotate(12960deg);
    transform: rotate(12960deg);
  }
}
@-o-keyframes move36 {
  100% {
    -ms-transform: rotate(12960deg);
    -webkit-transform: rotate(12960deg);
    transform: rotate(12960deg);
  }
}
@keyframes move36 {
  100% {
    -ms-transform: rotate(12960deg);
    -webkit-transform: rotate(12960deg);
    transform: rotate(12960deg);
  }
}
@-webkit-keyframes back37 {
  100% {
    -ms-transform: rotate(-13320deg);
    -webkit-transform: rotate(-13320deg);
    transform: rotate(-13320deg);
  }
}
@-moz-keyframes back37 {
  100% {
    -ms-transform: rotate(-13320deg);
    -webkit-transform: rotate(-13320deg);
    transform: rotate(-13320deg);
  }
}
@-o-keyframes back37 {
  100% {
    -ms-transform: rotate(-13320deg);
    -webkit-transform: rotate(-13320deg);
    transform: rotate(-13320deg);
  }
}
@keyframes back37 {
  100% {
    -ms-transform: rotate(-13320deg);
    -webkit-transform: rotate(-13320deg);
    transform: rotate(-13320deg);
  }
}
@-webkit-keyframes move38 {
  100% {
    -ms-transform: rotate(13680deg);
    -webkit-transform: rotate(13680deg);
    transform: rotate(13680deg);
  }
}
@-moz-keyframes move38 {
  100% {
    -ms-transform: rotate(13680deg);
    -webkit-transform: rotate(13680deg);
    transform: rotate(13680deg);
  }
}
@-o-keyframes move38 {
  100% {
    -ms-transform: rotate(13680deg);
    -webkit-transform: rotate(13680deg);
    transform: rotate(13680deg);
  }
}
@keyframes move38 {
  100% {
    -ms-transform: rotate(13680deg);
    -webkit-transform: rotate(13680deg);
    transform: rotate(13680deg);
  }
}
@-webkit-keyframes back39 {
  100% {
    -ms-transform: rotate(-14040deg);
    -webkit-transform: rotate(-14040deg);
    transform: rotate(-14040deg);
  }
}
@-moz-keyframes back39 {
  100% {
    -ms-transform: rotate(-14040deg);
    -webkit-transform: rotate(-14040deg);
    transform: rotate(-14040deg);
  }
}
@-o-keyframes back39 {
  100% {
    -ms-transform: rotate(-14040deg);
    -webkit-transform: rotate(-14040deg);
    transform: rotate(-14040deg);
  }
}
@keyframes back39 {
  100% {
    -ms-transform: rotate(-14040deg);
    -webkit-transform: rotate(-14040deg);
    transform: rotate(-14040deg);
  }
}
@-webkit-keyframes move40 {
  100% {
    -ms-transform: rotate(14400deg);
    -webkit-transform: rotate(14400deg);
    transform: rotate(14400deg);
  }
}
@-moz-keyframes move40 {
  100% {
    -ms-transform: rotate(14400deg);
    -webkit-transform: rotate(14400deg);
    transform: rotate(14400deg);
  }
}
@-o-keyframes move40 {
  100% {
    -ms-transform: rotate(14400deg);
    -webkit-transform: rotate(14400deg);
    transform: rotate(14400deg);
  }
}
@keyframes move40 {
  100% {
    -ms-transform: rotate(14400deg);
    -webkit-transform: rotate(14400deg);
    transform: rotate(14400deg);
  }
}
@-webkit-keyframes back41 {
  100% {
    -ms-transform: rotate(-14760deg);
    -webkit-transform: rotate(-14760deg);
    transform: rotate(-14760deg);
  }
}
@-moz-keyframes back41 {
  100% {
    -ms-transform: rotate(-14760deg);
    -webkit-transform: rotate(-14760deg);
    transform: rotate(-14760deg);
  }
}
@-o-keyframes back41 {
  100% {
    -ms-transform: rotate(-14760deg);
    -webkit-transform: rotate(-14760deg);
    transform: rotate(-14760deg);
  }
}
@keyframes back41 {
  100% {
    -ms-transform: rotate(-14760deg);
    -webkit-transform: rotate(-14760deg);
    transform: rotate(-14760deg);
  }
}
@-webkit-keyframes move42 {
  100% {
    -ms-transform: rotate(15120deg);
    -webkit-transform: rotate(15120deg);
    transform: rotate(15120deg);
  }
}
@-moz-keyframes move42 {
  100% {
    -ms-transform: rotate(15120deg);
    -webkit-transform: rotate(15120deg);
    transform: rotate(15120deg);
  }
}
@-o-keyframes move42 {
  100% {
    -ms-transform: rotate(15120deg);
    -webkit-transform: rotate(15120deg);
    transform: rotate(15120deg);
  }
}
@keyframes move42 {
  100% {
    -ms-transform: rotate(15120deg);
    -webkit-transform: rotate(15120deg);
    transform: rotate(15120deg);
  }
}
@-webkit-keyframes back43 {
  100% {
    -ms-transform: rotate(-15480deg);
    -webkit-transform: rotate(-15480deg);
    transform: rotate(-15480deg);
  }
}
@-moz-keyframes back43 {
  100% {
    -ms-transform: rotate(-15480deg);
    -webkit-transform: rotate(-15480deg);
    transform: rotate(-15480deg);
  }
}
@-o-keyframes back43 {
  100% {
    -ms-transform: rotate(-15480deg);
    -webkit-transform: rotate(-15480deg);
    transform: rotate(-15480deg);
  }
}
@keyframes back43 {
  100% {
    -ms-transform: rotate(-15480deg);
    -webkit-transform: rotate(-15480deg);
    transform: rotate(-15480deg);
  }
}
@-webkit-keyframes move44 {
  100% {
    -ms-transform: rotate(15840deg);
    -webkit-transform: rotate(15840deg);
    transform: rotate(15840deg);
  }
}
@-moz-keyframes move44 {
  100% {
    -ms-transform: rotate(15840deg);
    -webkit-transform: rotate(15840deg);
    transform: rotate(15840deg);
  }
}
@-o-keyframes move44 {
  100% {
    -ms-transform: rotate(15840deg);
    -webkit-transform: rotate(15840deg);
    transform: rotate(15840deg);
  }
}
@keyframes move44 {
  100% {
    -ms-transform: rotate(15840deg);
    -webkit-transform: rotate(15840deg);
    transform: rotate(15840deg);
  }
}
@-webkit-keyframes back45 {
  100% {
    -ms-transform: rotate(-16200deg);
    -webkit-transform: rotate(-16200deg);
    transform: rotate(-16200deg);
  }
}
@-moz-keyframes back45 {
  100% {
    -ms-transform: rotate(-16200deg);
    -webkit-transform: rotate(-16200deg);
    transform: rotate(-16200deg);
  }
}
@-o-keyframes back45 {
  100% {
    -ms-transform: rotate(-16200deg);
    -webkit-transform: rotate(-16200deg);
    transform: rotate(-16200deg);
  }
}
@keyframes back45 {
  100% {
    -ms-transform: rotate(-16200deg);
    -webkit-transform: rotate(-16200deg);
    transform: rotate(-16200deg);
  }
}
@-webkit-keyframes move46 {
  100% {
    -ms-transform: rotate(16560deg);
    -webkit-transform: rotate(16560deg);
    transform: rotate(16560deg);
  }
}
@-moz-keyframes move46 {
  100% {
    -ms-transform: rotate(16560deg);
    -webkit-transform: rotate(16560deg);
    transform: rotate(16560deg);
  }
}
@-o-keyframes move46 {
  100% {
    -ms-transform: rotate(16560deg);
    -webkit-transform: rotate(16560deg);
    transform: rotate(16560deg);
  }
}
@keyframes move46 {
  100% {
    -ms-transform: rotate(16560deg);
    -webkit-transform: rotate(16560deg);
    transform: rotate(16560deg);
  }
}
@-webkit-keyframes back47 {
  100% {
    -ms-transform: rotate(-16920deg);
    -webkit-transform: rotate(-16920deg);
    transform: rotate(-16920deg);
  }
}
@-moz-keyframes back47 {
  100% {
    -ms-transform: rotate(-16920deg);
    -webkit-transform: rotate(-16920deg);
    transform: rotate(-16920deg);
  }
}
@-o-keyframes back47 {
  100% {
    -ms-transform: rotate(-16920deg);
    -webkit-transform: rotate(-16920deg);
    transform: rotate(-16920deg);
  }
}
@keyframes back47 {
  100% {
    -ms-transform: rotate(-16920deg);
    -webkit-transform: rotate(-16920deg);
    transform: rotate(-16920deg);
  }
}
@-webkit-keyframes move48 {
  100% {
    -ms-transform: rotate(17280deg);
    -webkit-transform: rotate(17280deg);
    transform: rotate(17280deg);
  }
}
@-moz-keyframes move48 {
  100% {
    -ms-transform: rotate(17280deg);
    -webkit-transform: rotate(17280deg);
    transform: rotate(17280deg);
  }
}
@-o-keyframes move48 {
  100% {
    -ms-transform: rotate(17280deg);
    -webkit-transform: rotate(17280deg);
    transform: rotate(17280deg);
  }
}
@keyframes move48 {
  100% {
    -ms-transform: rotate(17280deg);
    -webkit-transform: rotate(17280deg);
    transform: rotate(17280deg);
  }
}
@-webkit-keyframes back49 {
  100% {
    -ms-transform: rotate(-17640deg);
    -webkit-transform: rotate(-17640deg);
    transform: rotate(-17640deg);
  }
}
@-moz-keyframes back49 {
  100% {
    -ms-transform: rotate(-17640deg);
    -webkit-transform: rotate(-17640deg);
    transform: rotate(-17640deg);
  }
}
@-o-keyframes back49 {
  100% {
    -ms-transform: rotate(-17640deg);
    -webkit-transform: rotate(-17640deg);
    transform: rotate(-17640deg);
  }
}
@keyframes back49 {
  100% {
    -ms-transform: rotate(-17640deg);
    -webkit-transform: rotate(-17640deg);
    transform: rotate(-17640deg);
  }
}
@-webkit-keyframes move50 {
  100% {
    -ms-transform: rotate(18000deg);
    -webkit-transform: rotate(18000deg);
    transform: rotate(18000deg);
  }
}
@-moz-keyframes move50 {
  100% {
    -ms-transform: rotate(18000deg);
    -webkit-transform: rotate(18000deg);
    transform: rotate(18000deg);
  }
}
@-o-keyframes move50 {
  100% {
    -ms-transform: rotate(18000deg);
    -webkit-transform: rotate(18000deg);
    transform: rotate(18000deg);
  }
}
@keyframes move50 {
  100% {
    -ms-transform: rotate(18000deg);
    -webkit-transform: rotate(18000deg);
    transform: rotate(18000deg);
  }
}
.circle:nth-child(1) {
  width: 300px;
  height: 300px;
  margin-left: -150px;
  margin-top: -150px;
  border-bottom-color: #00E5FF;
  -webkit-animation: back1 100s infinite;
  -moz-animation: back1 100s infinite;
  -o-animation: back1 100s infinite;
  animation: back1 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(2) {
  width: 294px;
  height: 294px;
  margin-left: -147px;
  margin-top: -147px;
  border-bottom-color: #6200EA;
  -webkit-animation: move2 100s infinite;
  -moz-animation: move2 100s infinite;
  -o-animation: move2 100s infinite;
  animation: move2 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(3) {
  width: 288px;
  height: 288px;
  margin-left: -144px;
  margin-top: -144px;
  border-bottom-color: #00E5FF;
  -webkit-animation: back3 100s infinite;
  -moz-animation: back3 100s infinite;
  -o-animation: back3 100s infinite;
  animation: back3 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(4) {
  width: 282px;
  height: 282px;
  margin-left: -141px;
  margin-top: -141px;
  border-bottom-color: #6200EA;
  -webkit-animation: move4 100s infinite;
  -moz-animation: move4 100s infinite;
  -o-animation: move4 100s infinite;
  animation: move4 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(5) {
  width: 276px;
  height: 276px;
  margin-left: -138px;
  margin-top: -138px;
  border-bottom-color: #00E5FF;
  -webkit-animation: back5 100s infinite;
  -moz-animation: back5 100s infinite;
  -o-animation: back5 100s infinite;
  animation: back5 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(6) {
  width: 270px;
  height: 270px;
  margin-left: -135px;
  margin-top: -135px;
  border-bottom-color: #6200EA;
  -webkit-animation: move6 100s infinite;
  -moz-animation: move6 100s infinite;
  -o-animation: move6 100s infinite;
  animation: move6 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(7) {
  width: 264px;
  height: 264px;
  margin-left: -132px;
  margin-top: -132px;
  border-bottom-color: #00E5FF;
  -webkit-animation: back7 100s infinite;
  -moz-animation: back7 100s infinite;
  -o-animation: back7 100s infinite;
  animation: back7 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(8) {
  width: 258px;
  height: 258px;
  margin-left: -129px;
  margin-top: -129px;
  border-bottom-color: #6200EA;
  -webkit-animation: move8 100s infinite;
  -moz-animation: move8 100s infinite;
  -o-animation: move8 100s infinite;
  animation: move8 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(9) {
  width: 252px;
  height: 252px;
  margin-left: -126px;
  margin-top: -126px;
  border-bottom-color: #00E5FF;
  -webkit-animation: back9 100s infinite;
  -moz-animation: back9 100s infinite;
  -o-animation: back9 100s infinite;
  animation: back9 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(10) {
  width: 246px;
  height: 246px;
  margin-left: -123px;
  margin-top: -123px;
  border-bottom-color: #6200EA;
  -webkit-animation: move10 100s infinite;
  -moz-animation: move10 100s infinite;
  -o-animation: move10 100s infinite;
  animation: move10 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(11) {
  width: 240px;
  height: 240px;
  margin-left: -120px;
  margin-top: -120px;
  border-bottom-color: #00E5FF;
  -webkit-animation: back11 100s infinite;
  -moz-animation: back11 100s infinite;
  -o-animation: back11 100s infinite;
  animation: back11 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(12) {
  width: 234px;
  height: 234px;
  margin-left: -117px;
  margin-top: -117px;
  border-bottom-color: #6200EA;
  -webkit-animation: move12 100s infinite;
  -moz-animation: move12 100s infinite;
  -o-animation: move12 100s infinite;
  animation: move12 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(13) {
  width: 228px;
  height: 228px;
  margin-left: -114px;
  margin-top: -114px;
  border-bottom-color: #00E5FF;
  -webkit-animation: back13 100s infinite;
  -moz-animation: back13 100s infinite;
  -o-animation: back13 100s infinite;
  animation: back13 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(14) {
  width: 222px;
  height: 222px;
  margin-left: -111px;
  margin-top: -111px;
  border-bottom-color: #6200EA;
  -webkit-animation: move14 100s infinite;
  -moz-animation: move14 100s infinite;
  -o-animation: move14 100s infinite;
  animation: move14 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(15) {
  width: 216px;
  height: 216px;
  margin-left: -108px;
  margin-top: -108px;
  border-bottom-color: #00E5FF;
  -webkit-animation: back15 100s infinite;
  -moz-animation: back15 100s infinite;
  -o-animation: back15 100s infinite;
  animation: back15 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(16) {
  width: 210px;
  height: 210px;
  margin-left: -105px;
  margin-top: -105px;
  border-bottom-color: #6200EA;
  -webkit-animation: move16 100s infinite;
  -moz-animation: move16 100s infinite;
  -o-animation: move16 100s infinite;
  animation: move16 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(17) {
  width: 204px;
  height: 204px;
  margin-left: -102px;
  margin-top: -102px;
  border-bottom-color: #00E5FF;
  -webkit-animation: back17 100s infinite;
  -moz-animation: back17 100s infinite;
  -o-animation: back17 100s infinite;
  animation: back17 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(18) {
  width: 198px;
  height: 198px;
  margin-left: -99px;
  margin-top: -99px;
  border-bottom-color: #6200EA;
  -webkit-animation: move18 100s infinite;
  -moz-animation: move18 100s infinite;
  -o-animation: move18 100s infinite;
  animation: move18 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(19) {
  width: 192px;
  height: 192px;
  margin-left: -96px;
  margin-top: -96px;
  border-bottom-color: #00E5FF;
  -webkit-animation: back19 100s infinite;
  -moz-animation: back19 100s infinite;
  -o-animation: back19 100s infinite;
  animation: back19 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(20) {
  width: 186px;
  height: 186px;
  margin-left: -93px;
  margin-top: -93px;
  border-bottom-color: #6200EA;
  -webkit-animation: move20 100s infinite;
  -moz-animation: move20 100s infinite;
  -o-animation: move20 100s infinite;
  animation: move20 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(21) {
  width: 180px;
  height: 180px;
  margin-left: -90px;
  margin-top: -90px;
  border-bottom-color: #00E5FF;
  -webkit-animation: back21 100s infinite;
  -moz-animation: back21 100s infinite;
  -o-animation: back21 100s infinite;
  animation: back21 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(22) {
  width: 174px;
  height: 174px;
  margin-left: -87px;
  margin-top: -87px;
  border-bottom-color: #6200EA;
  -webkit-animation: move22 100s infinite;
  -moz-animation: move22 100s infinite;
  -o-animation: move22 100s infinite;
  animation: move22 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(23) {
  width: 168px;
  height: 168px;
  margin-left: -84px;
  margin-top: -84px;
  border-bottom-color: #00E5FF;
  -webkit-animation: back23 100s infinite;
  -moz-animation: back23 100s infinite;
  -o-animation: back23 100s infinite;
  animation: back23 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(24) {
  width: 162px;
  height: 162px;
  margin-left: -81px;
  margin-top: -81px;
  border-bottom-color: #6200EA;
  -webkit-animation: move24 100s infinite;
  -moz-animation: move24 100s infinite;
  -o-animation: move24 100s infinite;
  animation: move24 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(25) {
  width: 156px;
  height: 156px;
  margin-left: -78px;
  margin-top: -78px;
  border-bottom-color: #00E5FF;
  -webkit-animation: back25 100s infinite;
  -moz-animation: back25 100s infinite;
  -o-animation: back25 100s infinite;
  animation: back25 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(26) {
  width: 150px;
  height: 150px;
  margin-left: -75px;
  margin-top: -75px;
  border-bottom-color: #6200EA;
  -webkit-animation: move26 100s infinite;
  -moz-animation: move26 100s infinite;
  -o-animation: move26 100s infinite;
  animation: move26 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(27) {
  width: 144px;
  height: 144px;
  margin-left: -72px;
  margin-top: -72px;
  border-bottom-color: #00E5FF;
  -webkit-animation: back27 100s infinite;
  -moz-animation: back27 100s infinite;
  -o-animation: back27 100s infinite;
  animation: back27 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(28) {
  width: 138px;
  height: 138px;
  margin-left: -69px;
  margin-top: -69px;
  border-bottom-color: #6200EA;
  -webkit-animation: move28 100s infinite;
  -moz-animation: move28 100s infinite;
  -o-animation: move28 100s infinite;
  animation: move28 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(29) {
  width: 132px;
  height: 132px;
  margin-left: -66px;
  margin-top: -66px;
  border-bottom-color: #00E5FF;
  -webkit-animation: back29 100s infinite;
  -moz-animation: back29 100s infinite;
  -o-animation: back29 100s infinite;
  animation: back29 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(30) {
  width: 126px;
  height: 126px;
  margin-left: -63px;
  margin-top: -63px;
  border-bottom-color: #6200EA;
  -webkit-animation: move30 100s infinite;
  -moz-animation: move30 100s infinite;
  -o-animation: move30 100s infinite;
  animation: move30 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(31) {
  width: 120px;
  height: 120px;
  margin-left: -60px;
  margin-top: -60px;
  border-bottom-color: #00E5FF;
  -webkit-animation: back31 100s infinite;
  -moz-animation: back31 100s infinite;
  -o-animation: back31 100s infinite;
  animation: back31 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(32) {
  width: 114px;
  height: 114px;
  margin-left: -57px;
  margin-top: -57px;
  border-bottom-color: #6200EA;
  -webkit-animation: move32 100s infinite;
  -moz-animation: move32 100s infinite;
  -o-animation: move32 100s infinite;
  animation: move32 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(33) {
  width: 108px;
  height: 108px;
  margin-left: -54px;
  margin-top: -54px;
  border-bottom-color: #00E5FF;
  -webkit-animation: back33 100s infinite;
  -moz-animation: back33 100s infinite;
  -o-animation: back33 100s infinite;
  animation: back33 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(34) {
  width: 102px;
  height: 102px;
  margin-left: -51px;
  margin-top: -51px;
  border-bottom-color: #6200EA;
  -webkit-animation: move34 100s infinite;
  -moz-animation: move34 100s infinite;
  -o-animation: move34 100s infinite;
  animation: move34 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(35) {
  width: 96px;
  height: 96px;
  margin-left: -48px;
  margin-top: -48px;
  border-bottom-color: #00E5FF;
  -webkit-animation: back35 100s infinite;
  -moz-animation: back35 100s infinite;
  -o-animation: back35 100s infinite;
  animation: back35 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(36) {
  width: 90px;
  height: 90px;
  margin-left: -45px;
  margin-top: -45px;
  border-bottom-color: #6200EA;
  -webkit-animation: move36 100s infinite;
  -moz-animation: move36 100s infinite;
  -o-animation: move36 100s infinite;
  animation: move36 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(37) {
  width: 84px;
  height: 84px;
  margin-left: -42px;
  margin-top: -42px;
  border-bottom-color: #00E5FF;
  -webkit-animation: back37 100s infinite;
  -moz-animation: back37 100s infinite;
  -o-animation: back37 100s infinite;
  animation: back37 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(38) {
  width: 78px;
  height: 78px;
  margin-left: -39px;
  margin-top: -39px;
  border-bottom-color: #6200EA;
  -webkit-animation: move38 100s infinite;
  -moz-animation: move38 100s infinite;
  -o-animation: move38 100s infinite;
  animation: move38 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(39) {
  width: 72px;
  height: 72px;
  margin-left: -36px;
  margin-top: -36px;
  border-bottom-color: #00E5FF;
  -webkit-animation: back39 100s infinite;
  -moz-animation: back39 100s infinite;
  -o-animation: back39 100s infinite;
  animation: back39 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(40) {
  width: 66px;
  height: 66px;
  margin-left: -33px;
  margin-top: -33px;
  border-bottom-color: #6200EA;
  -webkit-animation: move40 100s infinite;
  -moz-animation: move40 100s infinite;
  -o-animation: move40 100s infinite;
  animation: move40 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(41) {
  width: 60px;
  height: 60px;
  margin-left: -30px;
  margin-top: -30px;
  border-bottom-color: #00E5FF;
  -webkit-animation: back41 100s infinite;
  -moz-animation: back41 100s infinite;
  -o-animation: back41 100s infinite;
  animation: back41 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(42) {
  width: 54px;
  height: 54px;
  margin-left: -27px;
  margin-top: -27px;
  border-bottom-color: #6200EA;
  -webkit-animation: move42 100s infinite;
  -moz-animation: move42 100s infinite;
  -o-animation: move42 100s infinite;
  animation: move42 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(43) {
  width: 48px;
  height: 48px;
  margin-left: -24px;
  margin-top: -24px;
  border-bottom-color: #00E5FF;
  -webkit-animation: back43 100s infinite;
  -moz-animation: back43 100s infinite;
  -o-animation: back43 100s infinite;
  animation: back43 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(44) {
  width: 42px;
  height: 42px;
  margin-left: -21px;
  margin-top: -21px;
  border-bottom-color: #6200EA;
  -webkit-animation: move44 100s infinite;
  -moz-animation: move44 100s infinite;
  -o-animation: move44 100s infinite;
  animation: move44 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(45) {
  width: 36px;
  height: 36px;
  margin-left: -18px;
  margin-top: -18px;
  border-bottom-color: #00E5FF;
  -webkit-animation: back45 100s infinite;
  -moz-animation: back45 100s infinite;
  -o-animation: back45 100s infinite;
  animation: back45 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(46) {
  width: 30px;
  height: 30px;
  margin-left: -15px;
  margin-top: -15px;
  border-bottom-color: #6200EA;
  -webkit-animation: move46 100s infinite;
  -moz-animation: move46 100s infinite;
  -o-animation: move46 100s infinite;
  animation: move46 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(47) {
  width: 24px;
  height: 24px;
  margin-left: -12px;
  margin-top: -12px;
  border-bottom-color: #00E5FF;
  -webkit-animation: back47 100s infinite;
  -moz-animation: back47 100s infinite;
  -o-animation: back47 100s infinite;
  animation: back47 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(48) {
  width: 18px;
  height: 18px;
  margin-left: -9px;
  margin-top: -9px;
  border-bottom-color: #6200EA;
  -webkit-animation: move48 100s infinite;
  -moz-animation: move48 100s infinite;
  -o-animation: move48 100s infinite;
  animation: move48 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(49) {
  width: 12px;
  height: 12px;
  margin-left: -6px;
  margin-top: -6px;
  border-bottom-color: #00E5FF;
  -webkit-animation: back49 100s infinite;
  -moz-animation: back49 100s infinite;
  -o-animation: back49 100s infinite;
  animation: back49 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle:nth-child(50) {
  width: 6px;
  height: 6px;
  margin-left: -3px;
  margin-top: -3px;
  border-bottom-color: #6200EA;
  -webkit-animation: move50 100s infinite;
  -moz-animation: move50 100s infinite;
  -o-animation: move50 100s infinite;
  animation: move50 100s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 2px solid transparent;
  border-radius: 50%;
}

.M2010 {  
  text-shadow: 0 1px 0 #24006B,
               0 2px 0 #c9c9c9,
               0 3px 0 #000,
               0 4px 0 #b9b9b9,
               0 5px 0 #000,
               0 6px 1px #ff0,
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);}</style>

<div class="loader-loading-2">
<div class="loader-text">
<div class="loader">
</div>
</div>
</div>
</div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHgPGu1UXjDU1ql59zijaJ8JtNKxH5mi4pXRqV1xuiMGbErMYbqMpOXO1VuQ-CdpySjLvakyMj86lo-T5etAWHrRxaMZZGkf8_358AEw9Vj2-VNLqf9vyO9HywD2Z9PxKhpNQ54kOeNLM/s1600/kina-grannis-mys2010.jpg"/>

<div class="circle">
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
</div>
</div>
</div>
</div>

<div align="center" style="margin-top:-30px">
<canvas id="animation" width="400" height="400"></canvas>
<h3 class="M2010">
<div align="center" style="margin-top:390px">
<font size="5" color="#24006B"face="arial">M-2010 CIBEBER CIMAHI</h3>
</div>
<div class='sand'>
</div>
<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#809FFE;"> EDITED BY. <a href="https://Link Download"title="Download Full Code"><span style="color: #B20000; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#809FFE;"> COPYRIGHT <a href="http://myscript2010s.blogspot.co.id/p/statistik-home-page.html" title="Mari Belajar"><span style="color: #B20000; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; WEBSITE</a> 
</div>
<h2>
<audio id="mys2010" src="https://sites.google.com/site/pelajaranku1/mp3ku/Kinna-Gone-Mys2010.mp3"controls="controls"></audio></h2>
</a></div>
</div>

<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/07/css-spirals-with-audio.html" target="_blank" title="Mari Belajar">
<span style="color:#f00; font-size: 10pt">LET'S STUDY</a>  
</a>  
</div>
</header>

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>
<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> 
 /**
Rotating_M2010
*/ 
window.requestAnimFrame = (function(){
  return window.requestAnimationFrame    ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame    ||
    function( callback ){
    window.setTimeout(callback, 1000 / 60);
  };
})();
var rad = function(deg) {
  return (deg * (Math.PI / -180));
};
var pointOnCircle = function(x, y, radius, point) {
  var xr = (x + (radius * Math.cos(rad(point))));
  var yr = (y + (radius * Math.sin(rad(point))));
  return {
    x: xr,
    y: yr
  };
};
Math.Tau = (Math.PI * 2);
var DOT_RADIUS = 4;
var DottedRotatingRing = function(ctx, x, y, radius, dots, color, speed) {
  this.x      = x;
  this.y      = y;
  this.radius = radius;
  this.style  = color;
  this.speed  = speed;
  this.offset = 0;
  this.ctx    = ctx;
  this.dots   = dots;
};
DottedRotatingRing.prototype.step = function() {
  this.offset = ((this.offset + this.speed) % 360);
};
DottedRotatingRing.prototype.render = function() {
  this.ctx.fillStyle = this.style;
  var points = [];
  var step   = (360 / this.dots);
  for(var i = 0; i < this.dots; i++) {
    var point = pointOnCircle(this.x, this.y, this.radius, this.offset + (i * step));

    this.ctx.beginPath();
     this.ctx.arc(point.x, point.y, DOT_RADIUS, 0, Math.Tau, false);
     this.ctx.fill();
    this.ctx.closePath();
  }
};
var colors = ['#1674bc', '#00a496', '#82c640', '#f6b62e', '#ee5b35', '#eb225f', '#B20000', '#612e8d'];
var cbDots = [4, 8, 12, 16, 20, 24, 28, 32];
var initialRadius = 23;
var spacingRadius = 23;
var initialSpeed  = 5;
var speedStep     = 0.5;
$(function() {
  var canvas = document.getElementById('animation');
  var context = canvas.getContext('2d');
  var cx = 200;
  var cy = 200;
  var rings = [];
  var radius = initialRadius;
  var speed  = initialSpeed;
  for(var i in cbDots) {
    rings.push(new DottedRotatingRing(context, cx, cy, radius, cbDots[i], colors[i], speed));
    radius += spacingRadius;
    speed  -= speedStep;
  }
  // animate those rings!!
  var anim = function anim() {
    requestAnimFrame(anim);

    context.clearRect(0, 0, 400, 400);
    for(var i in rings) rings[i].step(); // step all before render all ;)
    for(var i in rings) rings[i].render();
  }; anim();
});
    </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>

Spirals Code by. Massimo
Audio Code by. Jereme Causing

Rotating dot Code by. Bas Groothedde
Design Code is Edited by. Mys2010 on Codepen

DEMOSHOW

If you want to directly copy and paste you canDownload Here Spirals with audio

Category: css spirals with audio

Mys2010 on Codepen

css spirals with audio

POPULAR

Blog Archive