07/25/16 | Mys2010 on Codepen

HomeArchives for 07/25/16

Infinite tunnel

Memasang Kode Infinite tunnel
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 {
  background: #000;
}
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:-19px;
  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:1px;
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:17px;
}

body::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
   background: linear-gradient(transparent 10%, #B20000 50%, transparent 90%);
  -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;
  }
}

img {
  position: absolute;
  top:191px;
  left:570px;
  border-radius: 50%;
  overflow: hidden;
  border:4px solid #0066B3;
  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:3px;
  left:-9px;
  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:-2px;
  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;
  }
}

.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 align="center" style="margin-top:-36px">
<canvas id="scene">Infinite</canvas>
<div class="loader-loading-2">
<div class="loader-text">
<div class="loader">
</div>
<h3 class="M2010">
<div align="center" style="margin-top:330px">
<font size="5" color="#E60066"face="arial">M-2010 CIBEBER CIMAHI</h3>
</div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw1AUJ2MVvkcrd-xUbSNDDMfHM0R-jSfKXXS_50gjZCWUGUO4ZyjDfbwrcuMFczVvIyUK2BPSkmakdXf2LmYDRwPfdBcqvLTIICxJMDpisvDWM-M010jhSfycbBCONWVwIbItG6d0mYXY/s1600/M-2010s.jpg"/>   
<div class="circle">
</div>

<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#f00;"> 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:#f00;"> 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:13px">
<audio id="mys2010" src="https://sites.google.com/site/safe50534/lagu/Valentine-kinna-M2010.mp3"controls="controls"></audio></h2>
</a></div>
</div>
</div>
<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/07/infinite-tunnel.html" target="_blank" title="Mari Belajar">
<h2>
<span style="color:#f00; font-size: 10pt">LET'S STUDY</a>  </h2>
</a>  
</div>
</header>

<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js'>
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-53beeb1a007ec32040abaf4c9385ebfc.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/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>
      $(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>            </script> <script>var ww = window.innerWidth,
	wh = window.innerHeight;
function init(){
	/* WEBGL RENDERER */
	renderer = new THREE.WebGLRenderer({canvas : document.getElementById('scene')});
	renderer.setSize(ww,wh);
	scene = new THREE.Scene();
	camera = new THREE.PerspectiveCamera(50, ww/wh, 1, 10000 );
	scene.add(camera);
	light = new THREE.PointLight(0xffffff, 1, 1300);
	light.position.set( 0, 0, -750 );
	scene.add(light);
	createBox();
	animate();
};
function createBox(){	
	elements = new THREE.Object3D();
	var colors = [
		new THREE.Color( 0x2cc6e5 ),
		new THREE.Color( 0x91f4f4 ),
		new THREE.Color( 0xe6a09e ),
		new THREE.Color( 0x1071ac )
	];
	var geometry = new THREE.BoxGeometry(50,50,150);
	var translate = new THREE.Matrix4().makeTranslation(150,0,0);
	for(var i=0;i<14;i++){
		var circle = new THREE.Object3D();
		for(var j=0;j<13;j++){
			var material = new THREE.MeshLambertMaterial({color: colors[i%4]});
			var cube = new THREE.Mesh(geometry, material);
			var rotation =  new THREE.Matrix4().makeRotationZ(Math.PI*2/13*j);
			cube.applyMatrix( new THREE.Matrix4().multiplyMatrices(rotation, translate) );
			circle.add(cube);		}
		circle.position.z = -i*180;
		elements.add(circle);	}
	farest = -13*180;
	scene.add(elements);
	renderer.render(scene, camera);
};
var counter = 0;
var animate = function () {
	requestAnimationFrame(animate);

	for(var i=0;i<14;i++){
		var circle = elements.children[i];
		if(camera.position.z <= circle.position.z){
			farest-=180;
			circle.position.z = farest;
		}
	}
	camera.rotation.z += .005;
	camera.position.z -= 7;
	light.position.z -= 7;
	light.position.y = Math.sin(counter/50)*75;
	light.position.x = Math.cos(counter/50)*75;
	counter++;
	renderer.render(scene, camera);
};
init(); 
</script>

Audio Code by. Jereme Causing
Infinite tunnel Code by. Louis Hoebregts

Design Code is Edited by. Mys2010 on Codepen

DEMOSHOW

If you want to directly copy  and  paste you canDownload Here Infinite tunnel

Category: Infinite tunnel

css spirals with audio

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

POPULAR

Frame Everyday Illusion

Exiting Hyperspace Starwars Pure CSS

keyframes Animations

Audio Player Mp3 Modification

Scroll Back to top

Audio Player Mp3

Contact Us

HTML5 Audio Player

Dark Forest with audio

Blog Archive

► 2017 (58)

► December (1)

► Dec 25 (1)

► November (2)

► Nov 19 (1)

► Nov 09 (1)

► October (1)

► Oct 27 (1)

► September (4)

► Sep 23 (4)

► August (2)

► Aug 30 (1)

► Aug 11 (1)

► July (3)

► Jul 30 (1)

► Jul 29 (1)

► Jul 19 (1)

► June (5)

► Jun 27 (1)

► Jun 24 (1)

► Jun 22 (1)

► Jun 11 (1)

► Jun 10 (1)

► May (8)

► May 27 (1)

► May 23 (2)

► May 19 (1)

► May 15 (1)

► May 14 (1)

► May 11 (1)

► May 08 (1)

► April (17)

► Apr 22 (1)

► Apr 21 (1)

► Apr 16 (1)

► Apr 14 (1)

► Apr 13 (1)

► Apr 12 (1)

► Apr 09 (3)

► Apr 07 (2)

► Apr 05 (5)

► Apr 02 (1)

► March (1)

► Mar 19 (1)

► February (4)

► Feb 26 (1)

► Feb 18 (1)

► Feb 10 (1)

► Feb 05 (1)

► January (10)

► Jan 28 (1)

► Jan 20 (2)

► Jan 07 (3)

► Jan 06 (2)

► Jan 05 (1)

► Jan 04 (1)

▼ 2016 (193)

► December (22)

► Dec 31 (3)

► Dec 29 (1)

► Dec 28 (2)

► Dec 25 (1)

► Dec 22 (1)

► Dec 19 (1)

► Dec 16 (2)

► Dec 11 (1)

► Dec 10 (3)

► Dec 07 (1)

► Dec 05 (1)

► Dec 04 (1)

► Dec 03 (3)

► Dec 02 (1)

► November (2)

► Nov 28 (1)

► Nov 26 (1)

► September (15)

► Sep 24 (1)

► Sep 17 (1)

► Sep 11 (5)

► Sep 10 (1)

► Sep 06 (2)

► Sep 05 (2)

► Sep 03 (1)

► Sep 02 (1)

► Sep 01 (1)

► August (20)

► Aug 27 (3)

► Aug 26 (1)

► Aug 25 (1)

► Aug 23 (1)

► Aug 22 (2)

► Aug 15 (1)

► Aug 14 (2)

► Aug 13 (1)

► Aug 07 (1)

► Aug 06 (3)

► Aug 05 (1)

► Aug 03 (2)

► Aug 02 (1)

▼ July (24)

► Jul 29 (1)

► Jul 28 (2)

► Jul 26 (1)

▼ Jul 25 (2)

Infinite tunnel

css spirals with audio

► Jul 22 (3)

► Jul 20 (1)

► Jul 19 (1)

► Jul 18 (1)

► Jul 17 (3)

► Jul 16 (1)

► Jul 12 (1)

► Jul 09 (1)

► Jul 07 (1)

► Jul 06 (2)

► Jul 04 (2)

► Jul 01 (1)

► June (8)

► Jun 29 (1)

► Jun 19 (1)

► Jun 18 (2)

► Jun 07 (1)

► Jun 06 (1)

► Jun 05 (1)

► Jun 04 (1)

► May (19)

► May 31 (2)

► May 30 (1)

► May 28 (1)

► May 24 (5)

► May 19 (1)

► May 16 (1)

► May 14 (2)

► May 11 (1)

► May 07 (1)

► May 06 (2)

► May 04 (1)

► May 01 (1)

► April (27)

► Apr 25 (1)

► Apr 24 (1)

► Apr 23 (3)

► Apr 22 (1)

► Apr 20 (1)

► Apr 19 (1)

► Apr 17 (1)

► Apr 16 (2)

► Apr 15 (3)

► Apr 14 (1)

► Apr 09 (2)

► Apr 07 (2)

► Apr 06 (3)

► Apr 04 (1)

► Apr 02 (1)

► Apr 01 (3)

► March (15)

► Mar 31 (1)

► Mar 30 (1)

► Mar 24 (1)

► Mar 22 (4)

► Mar 10 (1)

► Mar 08 (1)

► Mar 06 (1)

► Mar 05 (1)

► Mar 03 (3)

► Mar 02 (1)

► February (22)

► Feb 28 (1)

► Feb 26 (1)

► Feb 23 (2)

► Feb 19 (1)

► Feb 18 (1)

► Feb 16 (2)

► Feb 15 (2)

► Feb 14 (3)

► Feb 13 (2)

► Feb 11 (1)

► Feb 07 (3)

► Feb 06 (1)

► Feb 04 (1)

► Feb 03 (1)

► January (19)

► Jan 30 (1)

► Jan 29 (2)

► Jan 28 (2)

► Jan 27 (1)

► Jan 25 (1)

► Jan 24 (4)

► Jan 17 (1)

► Jan 16 (3)

► Jan 15 (4)