HomeAll Tutorials

Logo in the frame

Memasang Kode Logo in the frame
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;}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  1px 0;
  position: fixed;
  top: 0;
  width: 100%;
text-align: center;
text-shadow: 0px 0px #FFf;  
font-size:  6px;
background: -moz-linear-gradient(top, #f6f5ee 0%, rgba(53,02,01,1) 100%);
  border-bottom: 3px solid #dad;  
}

.ap {
position: fixed;
right: 0;
bottom: 0;
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;
text-shadow: 0px 0px #f6f5ee;  
font-size:  11px;
background:  #000020;
border-top: 2px solid #f0f;
z-index: 9999;
} 
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, red 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #f6f5ee 50%, transparent 90%); 
}

body {
  background: #999;
}
figure {
 position: absolute;
 display: block;
 width: 520px;
  
  top: 23%;
  left:  42%;
  margin: 0 0 0 -150px;
}
figure:before {
 content: "";
 position: absolute;
 display: block;
 width: 132%;
 height: 132%;
 top: -16%;
 left: -16%;
 background-color: #f8f8f8;
 z-index: -1;
 box-shadow:
  inset 0px 10px .5em rgba(7,7,7,.7),
  inset .1em 0px .1em rgba(7,7,7,.7),
  inset -0.1em 0px .1em rgba(7,7,7,.7),
  0 .3em .2em #DA70D6 ;
 background-image: -moz-radial-gradient(50% 50%, circle farthest-corner,  #FFDEAD, #1E90FF  100%);
 background-image: -webkit-radial-gradient(50% 50%, circle farthest-corner,  #FFDEAD, #1E90FF  100%);
 background-image: -o-radial-gradient(50% 50%, circle farthest-corner,  #FFDEAD, #1E90FF  100%);
 background-image: -ms-radial-gradient(50% 50%, circle farthest-corner,  #FFDEAD, #1E90FF  100%);
 background-image: radial-gradient(50% 50%, circle farthest-corner,  #FFDEAD, #1E90FF  100%)
}

figure:after {
 content: "";
 position: absolute;
 display: block;
 width: 145%;
 height: 145%;
 top: -22.5%;
 left: -22.5%;
 background: #111;
 z-index: -2;
 box-shadow:
  0px 1em 2em -1em rgba(0,0,0,.4),
  0px 2em 2em -1em rgba(0,0,0,.3),
  0px 3em 2em -1em rgba(0,0,0,.2),
  0px 4em 1.5em -1em rgba(0,0,0,.15),
  0px 2em 4em .5em rgba(0,0,0,.1),
  inset 0 .2em .1em rgba(7,7,7,.7);
}

img {
 background: #DA70D6;
 position: relative;
 display: block;
 width: 88%;
 height: auto;
 padding: 6%;
 box-shadow: inset 0px .3em .1em #000); 
</style>}

<figure>
<img src="https://sites.google.com/site/pelajaranku1/fileku/logo-mys2010.png" /></figure>

<div class="ap" id="ap">
<div align="center">
<a href="http://myscript2010s.blogspot.co.id" target="_blank" title="Myscript2010"> 
<h2>
<span style="color:#111; font-size: 9pt">CIBEBER CIMAHI</2></a>  
</div>

<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/05/logo-in-frame.html" target="_blank" title="Myscript2010"> 
<h2>
<span style="color:blue; font-size: 8pt">LET'S STUDY</2></a>  
</div>
</header>
Photo frame Code by. Sébastien Lombard
Design code is edited by. Mys2010 In Codepen
DEMOSHOW
If you want to directly copy  and  paste you canDownload Here Logo in the frame

Category:

Photos in the frame

Memasang Kode Photos in the frame
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:#151515;height:100%;overflow:hidden;}
body {
  background: #151515;
}
 
body {
  text-align: center;
}
.item {
  list-style-type: none;
  position: relative;
  display: inline-block;
  background-color: black;
 margin-top:  -8px;
  padding: 2rem;
  -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 1rem 2rem 0;
  -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 1rem 2rem 0;
  box-shadow: rgba(0, 0, 0, 0.7) 0 1rem 2rem 0;
}
.inner {
  position: relative;
  padding: 1rem;
  background-color: white;
  -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 0 1.5rem 0 inset;
  -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 0 1.5rem 0 inset;
  box-shadow: rgba(0, 0, 0, 0.7) 0 0 1.5rem 0 inset;

}

/*end*/
body::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; 
background-image: linear-gradient(bottom, rgba(255,255,255,.3) 26%, rgb(188,52,255) 63%, rgba( 0, 0, 0, 0.8 ) 91%);
background-image: -o-linear-gradient(bottom, rgba(255,255,255,.3) 26%, rgb(188,52,255) 63%, rgba( 0, 0, 0, 0.8 ) 91%);
background-image: -moz-linear-gradient(bottom, rgba(255,255,255,.3) 26%, rgb(188,52,255) 63%, rgba( 0, 0, 0, 0.8 ) 91%);
background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,.3) 26%, rgb(188,52,255) 63%, rgba( 0, 0, 0, 0.8 ) 91%);
background-image: -ms-linear-gradient(bottom, rgba(255,255,255,.3) 26%, rgb(188,52,255) 63%, rgba( 0, 0, 0, 0.8 ) 91%);
  -webkit-animation: overlay infinite 12s;
          animation: overlay infinite 12s;
  content: '';
}

@-webkit-keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}

@keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}
@-webkit-keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@-webkit-keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}
@keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
} 
</style>

<figure class="item">
<div class="inner">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQIJW7Wg9cTQZspSpLrBQvwbBwniGlnPL5PWYQNTkhs3lDURM3V3PDrqSCMPw1DEmzSY7WltpgL0LcMKfNcKdNAo6d9jYV_Evx7wYiRiocCelYkZ1GHowGvwWT1uzZYxRfvGpq8a8w-SY/s1600/kina-grannis-mys2010.jpg" name="e902" border="0" width="350" height="370" /></a>
</div>
<figcaption class="title">
<audio id="mys2010" src="https://sites.google.com/site/fileblogfor/code/Fix-You-Kinna-Mys2010.mp3" controls="controls"></audio>
<a href="https://sites.google.com/site/code6916/file/Photos-in-the-frame-Mys2010.css" target="_blank" title="Download Full Code"><b>DOWNLOAD</b></a>
</figure>

<ul class="mys2010-list"><link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>   <script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script> <script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'>
</script> <script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js"></script>                   <script>
      $(function () {
    $('video,audio').mediaelementplayer({
        success: function (mediaElement, domObject) {
            var audio_src = $('li.current').attr('data-url');
            mediaElement.setSrc(audio_src);
            mediaElement.addEventListener('ended', function (e) {
                mys2010PlayNext(e.target);
            }, false);
        },
        keyActions: []
    });
    $('.mys2010-list li').click(function () {
        $(this).addClass('current').siblings().removeClass('current');
        var audio_src = $(this).attr('data-url');
        $('audio#mys2010:first').each(function () {
            this.player.pause();
            this.player.setSrc(audio_src);
            this.player.play();
        });
    });
});
function mys2010PlayNext(currentPlayer) {
    if ($('.mys2010-list li.current').length > 0) {
        var current_item = $('.mys2010-list li.current:first');
        var audio_src = $(current_item).next().text();
        $(current_item).next().addClass('current').siblings().removeClass('current');
        console.log('if ' + audio_src);
    } else {
        var current_item = $('.mys2010-list li:first');
        var audio_src = $(current_item).next().text();
        $(current_item).next().addClass('current').siblings().removeClass('current');
        console.log('elseif ' + audio_src);
    }
    if ($(current_item).is(':last-child')) {
        $(current_item).removeClass('current');
    } else {
        currentPlayer.setSrc(audio_src);
        currentPlayer.play();
    }
}
      
    </script>
Audio code by. Jereme Causing
Photo frame Code by. Sébastien Lombard
Design code is edited by. Mys2010 In Codepen
DEMOSHOW
If you want to directly copy  and  paste you canDownload Here Photos in the frame  
see also different appearance in the photo frameClick Here for a different view

Category:

Animated star trek

Memasang Kode Animated star trek
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: #151515;
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  4px 0;
  position: fixed;
  top: 0;
  width: 100%;
text-align: center;
text-shadow: 0px 0px #FFf;  
font-size:  11px;
background: -moz-linear-gradient(top,  #151515 0%, #151515 100%);
  border-bottom: 3px solid #dad;  
}
/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
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;
color: #333;
background:  #000020;
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%, #444 50%, transparent 90%); 
}

.ball {
  z-index: 500;
  width: 300px;
  height: 300px;
  position: absolute;
  margin-top: -50px;
  top: 50%;
  margin-left: -150px;
  left: 50%;
}
.Mys-2010 {
  position: absolute;
  top: 50%;
  left: 50%;
  left: 0;
  right: 0;
  margin: -22vh auto 0;
  z-index: 50;
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO89UpztbCb-Fm8h5FKhV26Um2rH3qu9pTIrK6lKDrC2PSJpx04Uwz2s90OVTQjaIQoaTpbneGydofO75IpiwcKvFC674KuVyuRatIKwzRFNTFb-JnWqPbKPlI9mL4f69emifiaENAIbb6/s1600-r/black-logo-sule.png");
  width: 350vh;
  max-width: 300px;
  height: 350vh;
  max-height: 300px;
  box-shadow: inset 76px 0 80px 3px rgba(0, 0, 0, 0.69), inset -1px 0 50px 15px red, inset -1px 0 15px 2px white, 0 0 55px 10px #FF1000, 3px 0 10px 2px #FF1000, -3px 0 10px 2px rgba(96, 96, 159, 0.75);
  background-size: 602px;
  border-radius: 50%;
  position: relative;
  transform: scale(1.1) translateY(0px);
  animation-name: rotate, planet-zoom;
  animation-duration: 60s, 16.5s;
  animation-iteration-count: infinite, 1;
  animation-timing-function: linear, ease-out;
}
@keyframes rotate {
  0% {
    background-position: 0px;
  }
  100% {
    background-position: 602px;
  }
}
@keyframes planet-zoom {
  0% {
    transform: scale(0) translateY(-100px);
  }
  51% {
    transform: scale(0) translateY(-100px);
  }
  52% {
    transform: scale(0.01) translateY(-100px);
  }
  100% {
    transform: scale(1.1) translateY(0px);
  }
}
.space {
  width: 100%;
  transform: scale(1.75) translateX(-300px);
  animation: space-zoom 16.5s 1 ease-out;
}

@keyframes space-zoom {
  0% {
    transform: scale(0.45) translateX(-250px);
    opacity: 0;
  }
  48% {
    transform: scale(0.45) translateX(-250px);
    opacity: 0;
  }
  49% {
    transform: scale(0.45) translateX(-250px);
    opacity: 1;
  }
  100% {
    transform: scale(1.75) translateX(-300px);
    opacity: 1;
  }
}
/*stars 2*/
canvas{
  position: absolute;
  min-width: 400px;
  min-height: 400px;
  width: 250%;
  height: 100%;

}

@keyframes move-hitam-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-hitam-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-hitam-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-hitam-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}

@keyframes move-awan-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-webkit-keyframes move-awan-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-moz-keyframes move-awan-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-ms-keyframes move-awan-back {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}

.stars, .hitam, .awan {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;
}

.stars {
  background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR7ro5RnI3ORQhUQzI-0OoQ5vm_BGnsKiwQEZr_Bb_xHDUclGozuFfeMswR-GSIYFG_tZkrqAHtcomJKEdTtgtIj28u-qHZ5m5vnfFZ2noGxLya1OfjcCphSJ-hzP96jYNU-nzq89b10I/s1600/stars-mys2010.png) repeat top center;
  z-index:0;
}

.hitam{
  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1uaGmJ_ROVn57ArVPv0uoqGJcR4bPHV4y0qR4gxnKiwudJxh0jiHnba6VnDnY1i-rZ5DiWWSgIFivpg1QrNgTqFA5X3CjwA-LQKdfxxOB-Hyj3IQwjSr_jadIMOSomMHk9RaU2W-tgS0/s1600/hitam-mys2010.png) repeat top center;
  z-index:1;

  -moz-animation:move-hitam-back 200s linear infinite;
  -ms-animation:move-hitam-back 200s linear infinite;
  -o-animation:move-hitam-back 200s linear infinite;
  -webkit-animation:move-hitam-back 200s linear infinite;
  animation:move-hitam-back 200s linear infinite;
}

.awan{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcGFRpoZhieY2Gx_elVDKzm4KgYeG6g-3uT4g8rqZTURlRmdK2qGF6mpZIZ8Pfqio2uEJ2ZVhpvlzdygEFk_DTIq5DngtwOx_QSVdVq_yZfOfSHCZvkWCQ6GEpZgq_RGk8aU8-6Ht-ceg/s1600/clouds-mys2010.png) repeat top center;
    z-index:3;

  -moz-animation:move-awan-back 200s linear infinite;
  -ms-animation:move-awan-back 200s linear infinite;
  -o-animation:move-awan-back 200s linear infinite;
  -webkit-animation:move-awan-back 200s linear infinite;
  animation:move-awan-back 200s linear infinite;
}

body div#M-2010_holder {
 position: absolute;
 left: -30%;
 bottom: 60px;
 z-index: 6;

 -webkit-animation: launch_M-2010 240s linear infinite;
 -moz-animation: launch_M-2010 240s linear infinite;
 -ms-animation: launch_M-2010 240s linear infinite;
 -o-animation: launch_M-2010 240s linear infinite;
 animation: launch_M-2010 240s linear infinite;
}

@-moz-keyframes launch_M-2010 {
 25% {
   z-index: 6;
 }
 50% {
   left: 140%;
   bottom: 600px;
   z-index: 0;
 }
 55% {
   bottom: 680px;
 }
 75% {
   z-index: 0;
 }
 100% {
   left: -30%;
   z-index: 6;
   bottom: 100px;
 }}

.Flying-mys2010 {
 z-index: 600;
 cursor: pointer;
 -webkit-animation: Flying-mys2010 198s infinite linear;
 -moz-animation: Flying-mys2010 198s infinite linear;
 -ms-animation: Flying-mys2010 198s infinite linear;
 -o-animation: Flying-mys2010 198s infinite linear;
 animation: Flying-mys2010 188s infinite linear;
 bottom: 10%;
 left: 0%;
 position: absolute;
}
@keyframes Flying-mys2010 {
25% {
bottom: 105%;
left: 110%;
transform: rotateY(0deg);
}
26% {
transform: rotateY(180deg);
}
50% {
 bottom:60%;
 left: 0%;
 transform: rotateY(180deg);
}
51% {
 transform: rotateY(0deg);
}
75% {
 bottom:40%;
 left: 85%;
 transform: rotateY(0deg);}
76% {
 bottom:40%;
 left: 85%;
 transform: rotateY(180deg);
}
99% {
 transform: rotateY(180deg);}}

@keyframes float {
  0% {
    transform:translateY(0);
  }
  50% {
    transform:translateY(-10px);
  }
  100% {
    transform:translateY(0);
  }
}</style>

<link href="https://sites.google.com/site/code6916/file/Logo-oval-Mys2010.css" rel="stylesheet" type="text/css">
<div class="stars">
<img class="Flying-mys2010" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiywzLPZE3EdhcAt6jASnA3peG7y6tOwQNLRRyUXMIQ_hhiQF50c8_Ru6CiP2UO8PCGjeSz9Mirj5iZ2AOoxoXz-t_TL4-CK18F0jBfxn97ZBl4gMCzCkwVB5W5O_jCg3MA09jpZDqk6AU/s1600/kapal-startrek-mys2010.png"name="e902" border="0" width="250" height="130" /></a>

<div id="M-2010_holder">
<div id="M-2010_back">
</div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic5voh00tj_10-coPCrqImHu94pDeV6OTOg8ON1NoaeYPs4dbpzx0NRtuEojY39AcBP9RoiDuMnY3ZnxFRZRVgIoaoXcwD71AM-B5ekjSQgOpZesrKnCR7iIzAUHEaPnwqhtzu5d6iNqs/s1600/animated-satellite-mys2010.gif" name="e902" border="0" width=" 45" height="45" /></a>
<div id="Logo-Mys2010">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEptwnKUzb7KgGv6ur4Ub8vN5Ea36BqiIutJkcqNYUl72FpsWFIaNpWIluJSanqp5W31tuADlBYKeji-tPWN0OS-MsoU93YK8Q03vDlvA0sbIJRf3Nb9WkUL4p5X-bsP0Qp1ErfkQuvhk/s1600/animasi-globe-mys2010.gif" name="e902" border="0" width=" 85" height="85" /></a>
</div>
</div>
<div id="Logo-Mys2010">
</div>
</div>
<div class="hitam">
</div>
<div class="awan">
</div>

<canvas id="stars-2"></canvas>
<div class="ball">
<div id="Logo-Mys2010">
 <div class="Mys-2010">

<img class="Flying-mys2010" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1ahsfxesLCe0jniwKCgLDDQIIKWPzvfB_ri27rHcxxzW5a-gfK4XQeHBKKYDUSBkeFD-dINvb-2rAv_DbZ23k8KApPkov-stVDEe6BP7sUFW8ejYMUkJ-tNo4fbtWvpIgjHcxlCzBHTw/s1600/Eaglemoss-mys2010.png"name="e902" border="0" width="250" height="100" /></a>
</div>
</div>
</div>
</div>
<div class="ap" id="ap">
<div align="center">
<a href="https://Link Download"title="Myscript2010s"> 
<h2>
<span style="color: #000; font-size: 12px;">DOWNLOAD FULL CODE</2></a>
</div>
<header>
<h2>
<div align="center">
<div id="wrapper">
<audio id="mys2010" src="https://sites.google.com/site/code6916/lagu/startrek-mys2010.mp3" controls="controls"></audio></h2>
</div>
</header>

<ul class="mys2010-list"><link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>  <script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script> <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script> <script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'>
</script> <script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</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> <stars - 2> <script>
      var totalObjects = 1500;
var maxVelocity = 2;
var starSize = 1;
var twinkleFreq = 50000;
var shootingStarFreq = 500;
var shootingStarVelocity = 100;
var shootingStarSize = 1;

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            setInterval(callback, 75);
          };
})();

var canvas = document.getElementById('stars-2');
canvas.width = document.width || 1024;
canvas.height = document.height || 768;
var ctx = canvas.getContext("2d");

var stars = [];
var shootingStars = [];
this.init();

setInterval(update, 30);
requestAnimFrame(draw);

function init() {
  for(i=0;i<totalObjects;i++){
    stars.push(new Star());
  }
}

function draw() {
  requestAnimFrame(draw);
  ctx.clearRect(0,0,canvas.width,canvas.height);
   for(f=0;f<stars.length;f++)
   {
     stars[f].Update();
     stars[f].Draw();
   }
   for(f=0;f<shootingStars.length;f++)
   {
     shootingStars[f].Update();
     shootingStars[f].Draw();
   }
}

function update()
{
  if(Math.round((Math.random()*shootingStarFreq))==1){
    shootingStars.push(new ShootingStar());
  }
   for(f=0;f<shootingStars.length;f++)
   {
     if (shootingStars[f].X < -1000)
     {
       shootingStars.splice(f,1);
     }
   }
}
function Star(){
  this.X = Math.random()*canvas.width;
  this.Y = Math.random()*canvas.height;
  this.Velocity = (Math.random()*maxVelocity);
  this.Opacity = (((Math.random()*10)+1)*0.1);
  
  this.Update = function() {
    this.X -= this.Velocity;
    if(this.X<0){ ///reset
      this.X = canvas.width+1;
    }
  };
  
  this.Draw = function() {
    ctx.fillStyle = "rgba(255,255,255," + this.Opacity + ")";
    if(Math.round((Math.random()*twinkleFreq))==1){
      ctx.fillRect(this.X,this.Y,starSize+2,starSize+2);
    }
    else{
      ctx.fillRect(this.X,this.Y,starSize,starSize);
    }
  };
}

function ShootingStar() {
    this.X = 2000;
    this.Y = Math.random()*canvas.height;
    this.Length = 1000;
  
  this.Update = function(){
    this.X -= shootingStarVelocity;
  };
  
  this.Draw = function() {
    for (var i = 0; i < this.Length; i++){
      opacity = (0.8 - (0.001 * i));
      ctx.fillStyle = "rgba(255,255,255," + opacity + ")";
      ctx.fillRect(this.X+i,this.Y,shootingStarSize,shootingStarSize);
    }
  };
}       
    </script>
Hyperspace Code by Matt Popovich
Night sky with Stars Code by. Web Sonick
Design code is edited by. Mys2010 In Codepen
DEMOSHOW
If you want to directly copy  and  paste you canDownload Here  Animated star trek

Category:

Cat in the frame

Memasang Kode Cat in the frame
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;}

header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
margin-top:-20px;
  position: fixed;
  top: 0;
  width: 100%;
text-align: center;
text-shadow: 0px 0px #FFf;  
font-size:  6px;
background: -moz-linear-gradient(top, #000020 0%, rgba(53,02,01,1) 100%);
  border-bottom: 3px solid #dad;  
}

/* GRADIEND */
.ap {
 
position: fixed;
right: 0;
bottom: 0;
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;
text-shadow: 0px 0px #f6f5ee;  
font-size:  11px;
background:  #000020;
border-top: 2px solid #f0f;
z-index: 9999;
} 
 
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, red 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #ccc 50%, transparent 90%); 
}

body {
 position: absolute;
 margin: 0;
 padding: 0;
 width: 100%;
 height: 100%;
 background: #111;
}
#canvas {
 position: absolute;
 left: 50%;
 top: 50%;
 width: 600px;
 height: 400px;
 margin-left: -300px;
 margin-top: -200px;
 background: rgba(200, 54, 54, 0.5); 
}
#frame {
 position: absolute;
 left: 48%;
 top: 50%;
 width: 700px;
 height: 450px;
 margin-left: -320px;
 margin-top: -225px;
 border-radius: 10px;
 box-shadow: 0px 0px 100px 0px #f00;
}

body::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:   rgba(200, 54, 54, 0.5);
 
  -webkit-animation: overlay infinite 12s;
          animation: overlay infinite 12s;
  content: '';
}
  -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;
  }
}

.contenedor{
  position:relative;
  width:100px;
  height:100px;
 
  margin: 350px;
margin-top:-65px
}
.cat{
  position:absolute;
  margin:0 -1px
}
.cara{
  position:absolute;
    width: 172px;
  height: 162px;
  border-radius: 50%  50%  50%  50%  / 60%   60%   40%  40%;
  background:gray;
  border:3px solid #777;
  margin:125px 231px;
  -webkit-animation:sube 3s alternate infinite;
          animation:sube 3s alternate infinite;
}
.ojos {
  position:absolute;
  width:50px;
  height:50px;
  border-radius:100%;
  background:black;
  margin:70px 21px;
  -webkit-animation:cerrar 3s alternate infinite;
          animation:cerrar 3s alternate infinite;
}
.ojos3 {
  position:absolute;
  width:50px;
  height:50px;
  border-radius:100%;
  background:black;
  margin:70px 102px;
  -webkit-animation:cerrar 3s alternate infinite;
          animation:cerrar 3s alternate infinite;
}
.iris{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:100%;
  background:yellow;
  margin:12px 12px;
  -webkit-animation:shake .09s alternate infinite;
          animation:shake .09s alternate infinite;
}
.iris3{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:100%;
  background:yellow;
  margin:12px 25px;
  -webkit-animation:shake .09s alternate infinite;
          animation:shake .09s alternate infinite;
}
.ceja{
  position:absolute;
  width:60px;
  height:35px;
  border-radius:100%;
  background:gray;
  margin:43px 7px;
  -webkit-transform:rotate(-33deg);
          transform:rotate(-33deg)
}
.ceja3{
  position:absolute;
  width:60px;
  height:35px;
  border-radius:100%;
background:gray;
  margin:43px 98px;
  -webkit-transform:rotate(33deg);
          transform:rotate(33deg)
}
.boca{
  position:absolute;
  width:30px;
  height:21px;
  border-radius:100%;
  background: #333;
  margin:121px 72px;
  -webkit-animation:baja 3s alternate infinite;
          animation:baja 3s alternate infinite;
}
.hocico{
  position:absolute;
   height: 0;
  border-left: 21px solid transparent;
  border-right: 21px solid transparent;
  border-bottom: 21px solid #121212;
  border-radius: 100px / 50px;
  margin:112px 65px;
  -webkit-animation:sube 3s alternate infinite;
          animation:sube 3s alternate infinite;
}
.hocico3{
  position:absolute;
  width:35px;
  height:30px;
  border-radius:100%;
  border-right:3px solid black;
  background:#94948c;
  margin:123px 50px;
 -webkit-animation:sube 3s alternate infinite;
         animation:sube 3s alternate infinite;
}
.hocico3::before{
  content:"";
  position:absolute;
  width:35px;
  height:30px;
  border-radius:100%;
  border-left:3px solid black;
  background:#94948c;
  margin:0px 35px
}

.orejas{
  position:absolute;
  width:70px;
  height:90px;
  border-radius:500px 50px 500px 50px;
  background:#f00; 
  border:6px solid gray;
  margin:95px 201px;
  -webkit-transform:rotate(-45deg);
          transform:rotate(-45deg);
-webkit-animation:sube3 3s alternate infinite;
        animation:sube3 3s alternate infinite;
}

.orejas3{
  position:absolute;
  width:70px;
  height:90px;
  border-radius:50px 500px 50px 500px;
  background:#f00; 
  border:6px solid gray;
  margin:95px 350px;
 -webkit-transform:rotate(45deg);
         transform:rotate(45deg);
-webkit-animation:sube3 3s alternate infinite;
        animation:sube3 3s alternate infinite;  
}

.body{
  position:absolute;
   width: 162px;
  height: 212px;
  border-radius: 50%  50%  50%  50%  / 60%   60%   40%  40%;
  background:gray;
  border:3px solid #888;
  margin:251px 231px;
}
.legs{
  position:absolute;
  width:35px;
  height:132px;
  border-radius:21px;
  background:gray;
  border:3px solid #777;
  margin:90px 7px;
  -webkit-transform:rotate(12deg);
          transform:rotate(12deg)
}
.legs::before{
  content:"";
  position:absolute;
  width:35px;
  height:132px;
  border-radius:21px;
  background:gray;
  border:3px solid #777;
  margin:-24px 102px;
  -webkit-transform:rotate(-24deg);
          transform:rotate(-24deg)
}
.legs3{
  position:absolute;
  width:90px;
  height:75px;
  border-radius:70px 70px 0 0;
  background:gray;
  border:3px solid #777;
  margin:360px 212px
}
.legs3::before{
  content:"";
  display:block;
  width:121px;
  height:30px;
  border-radius:30px;
  background:gray;
  border-left:3px solid #777;
  border-bottom:3px solid #777;
  margin:70px -21px
  
}
.legs7{
  position:absolute;
  width:90px;
  height:75px;
  border-radius:70px 70px 0 0;
  background:gray;
  border:3px solid #777;
  margin:360px 321px
}
.legs7::before{
  content:"";
  display:block;
  width:121px;
  height:30px;
  border-radius:30px;
  background:gray;
  border-right:3px solid #777;
  border-bottom:3px solid #777;
  margin:70px -21px
  
}
.legs9{
  position:absolute;
  width:40px;
  height:21px;
  border-radius:12px;
  background:gray;
  border:3px solid #777;
  margin:112px -5px;
-webkit-transform:rotate(-12deg);
        transform:rotate(-12deg)
}
.legs9::before{
  content:"";
  position:absolute;
  width:40px;
  height:21px;
  border-radius:12px;
  background:gray;
  border:3px solid #777;
  margin:0px 132px;
 
}
.bigotitos{
  position:absolute;
  width:90px;
  height:30px;
  border-radius:100%;
  border-bottom:2px solid black;
  margin:107px -12px;
  -webkit-animation:sube 3s alternate infinite;
          animation:sube 3s alternate infinite;
  
}
.bigotitos::before{
  content:"";
  position:absolute;
  width:70px;
  height:21px;
  border-radius:100%;
  border-bottom:2px solid black;
  margin:13px 7px;
    -webkit-transform: rotate(-12deg);
            transform: rotate(-12deg);
}
.bigotitos::after{
  content:"";
  position:absolute;
  width:70px;
  height:21px;
  border-radius:100%;
  border-bottom:2px solid black;
  margin:18px 9px;
   -webkit-transform: rotate(-21deg);
           transform: rotate(-21deg);
}
.bigotitos3{
  position:absolute;
  width:90px;
  height:30px;
  border-radius:100%;
  border-bottom:2px solid black;
  margin:107px 90px;  
  -webkit-animation:sube 3s alternate infinite;  
          animation:sube 3s alternate infinite;  
  
}
.bigotitos3::before{
  content:"";
  position:absolute;
  width:70px;
  height:21px;
  border-radius:100%;
  border-bottom:2px solid black;
  margin:12px 12px;
    -webkit-transform: rotate(12deg);
            transform: rotate(12deg);
}
.bigotitos3::after{
  content:"";
  position:absolute;
  width:70px;
  height:21px;
  border-radius:100%;
  border-bottom:2px solid black;
  margin:16px 13px;
   -webkit-transform: rotate(25deg);
           transform: rotate(25deg);
}
.cola{
  position:absolute;
  width:172px;
  height:121px;
  border-radius:100%;
  border-bottom:35px solid gray;
  margin:300px 360px;
  -webkit-animation:go 3s alternate infinite;
          animation:go 3s alternate infinite;
}
@-webkit-keyframes shake{
  0%{-webkit-transform:scale(1);transform:scale(1)}
  50%{-webkit-transform:scale(.90);transform:scale(.90)}
  75%{-webkit-transform:scale(1);transform:scale(1)}
  
}
@keyframes shake{
  0%{-webkit-transform:scale(1);transform:scale(1)}
  50%{-webkit-transform:scale(.90);transform:scale(.90)}
  75%{-webkit-transform:scale(1);transform:scale(1)}  
}
@-webkit-keyframes sube {
  0%{-webkit-transform:translatey(0px);transform:translatey(0px)}
  100%{-webkit-transform:translatey(-7px);transform:translatey(-7px)}  
}
@keyframes sube {
  0%{-webkit-transform:translatey(0px);transform:translatey(0px)}
  100%{-webkit-transform:translatey(-7px);transform:translatey(-7px)}  
}
@-webkit-keyframes baja {
  0%{-webkit-transform:translatey(0px);transform:translatey(0px)}
  100%{-webkit-transform:translatey(9px);transform:translatey(9px)}  
}
@keyframes baja {
  0%{-webkit-transform:translatey(0px);transform:translatey(0px)}
  100%{-webkit-transform:translatey(9px);transform:translatey(9px)}  
}
@-webkit-keyframes go{
  0%{-webkit-transform:scale(1);transform:scale(1)}
  50%{-webkit-transform:scale(.90);transform:scale(.90)}  
}
@keyframes go{
  0%{-webkit-transform:scale(1);transform:scale(1)}
  50%{-webkit-transform:scale(.90);transform:scale(.90)}  
}
@-webkit-keyframes cerrar {
  0%,25%{opacity:1}
  35%{opacity: 0}
  50%{opacity:1;}
  100%{opacity:1}
}
@keyframes cerrar {
  0%,25%{opacity:1}
  35%{opacity: 0}
  50%{opacity:1;}
  100%{opacity:1}
}
@-webkit-keyframes sube3  {
  0%{margin-top:95px}
   100%{margin-top:85px ;}
  
}
@keyframes sube3  {
  0%{margin-top:95px}
   100%{margin-top:85px ;}  
</style>}

<canvas id="canvas"></canvas>
<div id="frame">
</div>
<div class="contenedor">
<div class="cat">
<div class="cola">
</div>
<div class="legs3">
</div>
<div class="legs7">
</div>
<div class="body">
<div class="legs">
<div class="legs9">
</div>
</div>
</div>
<div class="orejas">
</div>
<div class="orejas3">
</div>
<div class="cara">
<div class="ojos">
<div class="iris">
</div>
</div>
<div class="ojos3">
<div class="iris3">
</div>
</div>
<div class="ceja">
</div>
<div class="ceja3">
</div>
<div class="bigotitos">
</div>
<div class="bigotitos3">
</div>
<div class="boca">
</div>
<div class="hocico3">
</div>
<div class="hocico">
</div>
</div>
</div>
</div>

<div class="ap" id="ap">
<div align="center">
<a href="http://myscript2010s.blogspot.co.id" target="_blank" title="Myscript2010"> 
<h2>
<span style="color:#111; font-size: 9pt">CIBEBER CIMAHI</2></a>  
</div>

<header>
<a href="http://demoshow-mys2010.blogspot.co.id/2016/05/bingkai-kucing.html" target="_blank" title="Myscript2010"> 
<h2>
<span style="color:blue; font-size: 8pt">LET'S STUDY</2></a>  
</div>
</header>
Sad kitty code by. Judith Neumann
Photos in the Frame Code by. Gerard Ferrandez
Design code is edited by. Mys2010 In Codepen
DEMOSHOW
If you want to directly copy  and  paste you canDownload Here  Cat in the frame

Category:

Animated Ball

Memasang Kode Animated Ball
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: #151515;
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  4px 0;
  position: fixed;
  top: 0;
  width: 100%;
text-align: center;
text-shadow: 0px 0px #FFf;  
font-size:  11px;
background: -moz-linear-gradient(top,  #666 0%, #151515 100%);
  border-bottom: 3px solid #dad;  
}
/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
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;
color: #333;
background:  #000020;
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%, #444 50%, transparent 90%); 
}

body {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXSHM686_IUUXjEdmJEMhtYKwiqYu1c-Ap-37iGuwiYH0sDzjHpc9C_AoSZ3hWrxThtcp-dLOK9FZ1as0SdxmvKYr-Sy5lnG5bg4e9xLD_pP6svv7c5q5cTfXVRed3lwjVaw-4bp9Ju-M/s1600/background-mys2010S.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

html,
M-2010 {
margin: 0;
padding: 0;
height: 100%;
}
.M-2010 {
  width: 200px;
  height: 200px;
  margin-left: -100px;
  position: absolute;
  bottom: 100px;
  z-index: 10;
}
@media screen and (max-width: 568px) {
  .M-2010 {
    bottom: 60px;
  }
}
.M-2010 .shadow-1 {
  width: 110%;
  position: absolute;
  z-index: -2;
  bottom: -20px;
  margin-left: -5%;
  height: 50px;
  border-radius: 100%;
  background-color: rgba(0, 0, 0, 0.2);
}
.M-2010 .shadow-2 {
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIYKyFzeI1S__l3S6Pp3959JoJdIaCm1rknXiGHRCmcFPtMc__uLeebmjxxqUN6kPE6vQx6_xM2tmpp5bTB78A28ZZlMXhVnsaaTuHAYWUcPgPJrp9jzzLc6yJI9v25xbLQ59_ojI6U1s/s1600/shadow-mys2010.png");
  background-size: 100%;
  z-index: 2;
}
.M-2010 .roller {
  z-index: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP8KEJwNWFMR0ZwbOC1DqZEGYNd710Evee3BXNFrHVlKXzojAPlNoBMS3OBWXAaI_x4xk6c7DyzLTENMZBGCkwLXhy8Rmam_fzmTNXfO93I7XNaBvcstO2BG31CrcZvEng9B0TpZZt7fk/s1600/ball-mys2010.png");
  background-size: 100%;
}
.M-2010 .roller .front {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -40px 0 0 -40px;
  width: 80px;
  height: 80px;
  background-color: red;
}

@keyframes Logo-Mys2010-rotate {
  0% {
    left: calc(50% - 50px);
    -moz-box-shadow: inset -20px 0px 20px 5px rgba(4,000,000, .4);
    -webkit-box-shadow: inset -20px 0px 20px 5px rgba(4,000,000, .4);
    box-shadow: inset -20px 0px 20px 5px rgba(4,000,000, .4);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  25% {
    left: calc(10% - 50px);
    z-index: 5;
    -moz-box-shadow: inset -20px 0px 20px 15px #f00;
    -webkit-box-shadow: inset -20px 0px 20px 15px #f00;
    box-shadow: inset -20px 0px 20px 15px #f00;
    -moz-transform: scale(0.75);
    -ms-transform: scale(0.75);
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  50% {
    left: calc(50% - 50px);
    z-index: 5;
    -moz-box-shadow: inset 0 20px 40px 40px rgba(4,000,000, .4);
    -webkit-box-shadow: inset 0 20px 40px 40px rgba(4,000,000, .4);
    box-shadow: inset 0 20px 40px 40px rgba(4,000,000, .4);
    -moz-transform: scale(0.5);
  -ms-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  60% {
    -moz-box-shadow: inset 0 20px 40px 80px #f00;
    -webkit-box-shadow: inset 0 20px 40px 80px #f00;
    box-shadow: inset 0 20px 40px 80px #f00;
  }
  75% {
    left: calc(90% - 50px);
    z-index: 5;
    -moz-box-shadow: inset 0 20px 40px 40px rgba(4,000,000, .4);
    -webkit-box-shadow: inset 0 20px 40px 40px rgba(4,000,000, .4);
    box-shadow: inset 0 20px 40px 40px rgba(4,000,000, .4);
    -moz-transform: scale(0.75);
    -ms-transform: scale(0.75);
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  100% {
    left: calc(50% - 50px);
    z-index: 20;
    -moz-box-shadow: inset -20px 0px 20px 5px rgba(4,000,000, .4);
    -webkit-box-shadow: inset -20px 0px 20px 5px rgba(4,000,000, .4);
    box-shadow: inset -20px 0px 20px 5px rgba(4,000,000, .4);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

#Logo-Mys2010 {
  -webkit-animation: Logo-Mys2010-rotate 15s linear infinite;
  animation: Logo-Mys2010-rotate 45s linear infinite;
  background: url(https://sites.google.com/site/pelajaranku1/fileku/logo-mys2010.png) no-repeat 0 0 #ccc;
  background-size: 100px;
  height:  70px;
  left: calc(50% - 50px);
  position: absolute;
  top: calc(50% - 150px);
  width:  70px;
  z-index: 20;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -moz-box-shadow: inset -20px 0px 20px 5px rgba(4,000,000, .4);
  -webkit-box-shadow: inset -20px 0px 20px 5px rgba(4,000,000, .4);
  box-shadow: inset -20px 0px 20px 5px rgba(4,000,000, .4);
}


.spin {
  margin-top: -107px;
  position: relative;
    left: -12px;

  animation-name: spin-run;
  animation-duration: 350ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  width: 100px;
}
 
.spin .wheel {
  height: 100px;
  width: 100px;
 background: rgba(4,000,000, .4);
  border-radius: 50%;
  overflow: hidden;
  animation-name: wheel-turn;
  animation-duration: 350ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.spin .wheel rotation {
  position: absolute;
  margin: 10%;
  width: 140px;
  height: 10px;
  border: 3px solid #fff;
  border-radius: 150%;
  transform-origin: 50px 50px;
  transform: rotate(360deg);
}
.spin .wheel rotation:nth-child(2) {
  transform: rotate(120deg);
}
.spin .wheel rotation:nth-child(3) {
  transform: rotate(240deg);
}
.spin .wheel:before {
  content: '';
  top: 10px;
  left: 50px;
  right: 10px;
  bottom: 10px;
  border-radius: 50%;
  border: 4px solid #fff;
  position: absolute;
}
.spin .wheel:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  box-shadow: inset -25px -25px 40px #000;
  animation-name: shadow-turn;
  animation-duration: 350ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes spin-run {
  0% {
    transform: rotate(0deg);
    top: 50%;
  }
  50% {
    top: 52%;
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0deg);
    top: 50%;
  }
}
@keyframes wheel-turn {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes shadow-turn {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.M2010-Alert {
  opacity: 1;
}
.is-hidden {
  opacity: 0;
}
.is-removed {
  display: none;
}

#message {
  margin: 0 auto;
  width: 60%;
  padding: 10px;
  background-color: rgba(4,000,000, .4);
font-size: 5em;
font-family: agency fb;
  text-align: center;
  font-weight: bold;

  margin-top: 150px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out;
  color: green;
</style>}

<div id="message">
</div>

<div id="Logo-Mys2010">
<div class="spin">
<rotation></rotation>
<rotation></rotation>
<rotation></rotation>
<div class="wheel">
<rotation></rotation>
<rotation></rotation>
<rotation></rotation>
</div>
</div>
</div>
<M-2010 translate="no" >
<div class="background">
<div class="M-2010">
<div class="shadow-1">
</div>
<div class="shadow-2">
</div>
<div class="roller">
</div>
</div>
</div>

<div class="ap" id="ap">
<div align="center">
<a href="https://sites.google.com/site/kodesite/svn/Animated-Ball-mys2010s.css"title="Myscript2010s"> 
<h2>
<span style="color: #000; font-size: 12px;">DOWNLOAD FULL CODE</2></a>  
</div>
<header> 
<body translate="no" ><div align="center" style="margin-top: -12px">
<audio id="mys2010" src="https://sites.google.com/site/pelajaranku1/mp3ku/bob-marley-Mys2010.mp3" controls="controls"></audio></div>
</header> 

<script rel="stylesheet"src="https://sites.google.com/site/code6916/file/ball-mys2010s.js">
</script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>

<M2010-Alert> 
</script> 
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script> 
<script>
      $(document).ready(function() {
  var newX,
      currentX = 0,
      pageWidth = $(this).width(),
      ball = $('.M-2010'),
      roller = $('.roller'),      
      speed = 4,
      distance,
      acceleration,
      antennaPos,
      idleInterval,
      started = false;
  $(this).on('mousemove', function(x) {
    if (!started) {
       clearInterval(idleInterval);
      started = true;
    }
    newX = x.pageX;
  });

  $(document).on('touchmove', function(e) {
    if ("ontouchstart" in document.documentElement) {
      e = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
    }
    if (!started) {
       clearInterval(idleInterval);
      started = true;
    }
    newX = e.pageX;
  });
  var idleCount = 1;
  
  function idle() {
     newX = pageWidth/2;
    
   idleInterval =  setInterval(function(){
      idleCount += speed;
      newX = pageWidth/2 + (Math.cos(idleCount/100)*100);
    },10);
  }

  function movement() {
    if (currentX !== newX) {
      distance = newX - currentX;
      acceleration = Math.abs(distance) / 100;
      antennaPos = 2250 + Math.round(distance / 5) * 75;

      if (antennaPos <= 0) {
        antennaPos = 75;
      } else if (antennaPos >= 4500) {
        antennaPos = 4500;
      }

      if (currentX < newX) {
        currentX += speed * acceleration;
      } else {
        currentX -= speed * acceleration;
      }

      
      roller.css('transform', 'rotateZ(' + currentX / 2 + 'deg)');
      
      ball.css('transform', 'translateX(' + currentX + 'px)');
      

    } else {
      return;
    }
  }
 
  setInterval(movement, 10);
  idle();
});
     </script>

<M2010-Alert>
<script>
$(function () {
    showMessage('&clubs; WELCOME BACK &clubs; ');
});
function showMessage(s) {
    var m = $('#message');
    m.html(s);
    m.addClass('M2010-Alert ');
    setTimeout(function () {
        m.removeClass('M2010-Alert ');
        m.addClass('is-hidden');
        setTimeout(function () {
            m.addClass('is-removed');
        }, 6000);
    }, 3000);
}

</script>                          

<music> <ul class="mys2010-list"><link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>   <script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script> <script 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>
Star Wars code by. Michael Leonard
Load Text Alert Code by. Scott Dawson
Design code is edited by. Mys2010 In Codepen
DEMOSHOW
If you want to directly copy  and  paste you canDownload Here  Code Animated Ball

Category:

Exiting Hyperspace Starwars Pure CSS

Memasang Kode Exiting Hyperspace Pure CSS
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: #151515;
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  1px 0;
  position: fixed;
margin-top:-18px;
  top: 0;
  width: 100%;
text-align: center;
text-shadow: 0px 0px #FFf;  
font-size:  3px;
background: -moz-linear-gradient(top, #111 0%, #222 100%);
  border-bottom: 3px solid #dad;  
}
.ap {
position: fixed;
right: 0;
bottom:  0;
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;
text-shadow: 0px 0px #FFf;  
font-size:  11px;
background:  #000020;
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%, #777 50%, transparent 90%); 
}

/*KAPAL MYS-2010*/
.scene,
.space {
  animation: fadeIn 3s 1 linear;
}
input {
  color: #ff0;
  outline: none;
  border: 2px solid #000;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 6px;
  width: 100px;
  height: 40px;
  margin: 30px 0 0 -100px;
  position: absolute;
  left: 54%;
  top: 8%;
  background: transparent;
  z-index: 9999;
  animation: reload-button 17s ease-out 1;
}
input:hover {
  background-color: rgba(255, 255, 255, 0.6);
}
@keyframes reload-button {
  0% {
    opacity: 0;
    display: none;
  }
  95% {
    opacity: 0;
    display: auto;
  }
  100% {
    opacity: 1;
    display: auto;
  }
}
 
@keyframes bb-swivel {
  0% {
    background-position: 40% center;
  }
  3% {
    background-position: 40% center;
  }
  5% {
    background-position: 58% center;
  }
  8% {
    background-position: 58% center;
  }
  10% {
    background-position: 58% center;
  }
  12% {
    background-position: 40% center;
  }
  15% {
    background-position: 60% center;
  }
  25% {
    background-position: 60% center;
  }
  35% {
    background-position: 10% center;
  }
  39% {
    background-position: 10% center;
  }
  40% {
    background-position: 60% center;
  }
  52% {
    background-position: 37% center;
  }
  53% {
    background-position: 63% center;
  }
  54% {
    background-position: 39% center;
  }
  55% {
    background-position: 60% center;
  }
  56% {
    background-position: 36% center;
  }
  57% {
    background-position: 62% center;
  }
  66% {
    background-position: 62% center;
  }
  67% {
    background-position: 45% center;
  }
  70% {
    background-position: 45% center;
  }
  75% {
    background-position: 100% center;
  }
  100% {
    background-position: 100% center;
  }
}
.thruster-flicker {
  opacity: 0.55;
  width: 100%;
  height: 100%;
  animation: flicker 0.05s linear infinite;
}

@keyframes flicker {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.075);
  }
  30% {
    transform: scale(0.95);
  }
  50% {
    transform: scale(1.015);
  }
  70% {
    transform: scale(0.92);
  }
  85% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.thruster {
  position: absolute;
  border-radius: 50%;
  height: 2.8vh;
  width: 2.8vh;
  max-height: 13px;
  max-width: 13px;
  background-color: white;
  box-shadow: 0 0 8px 3px red;
  animation: thrusters 16.45s ease-out 1;
}
.thruster.t1 {
  top: 61%;
  left: 34%;
}
.thruster.t2 {
  top: 57.5%;
  left: 62.5%;
}
.thruster.t3 {
  top: 58.5%;
  left: 69%;
}
.thruster.t4 {
  top: 60.5%;
  left: 25.5%;
}

@keyframes thrusters {
  0% {
    transform: scale(2.25);
  }
  15% {
    transform: scale(0.8);
  }
  30% {
    transform: scale(2.25);
  }
  44% {
    transform: scale(0.95);
  }
  52% {
    transform: scale(3);
  }
  54% {
    transform: scale(1.5);
  }
  62% {
    transform: scale(2.5);
  }
  100% {
    transform: scale(0.8);
  }
}
.x-wing {
  opacity: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg) scale(0);
  z-index: 9999;
  height: 41vh;
  width: 80vh;
  max-height: 205px;
  max-width: 400px;
  background-size: cover;
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC0zeWInPNRvYNFex1vNFm6f9yZY2krrN8WGIXH_Airg-QH6JsFeKPZ_4ScAfnLMhpQEZp8Nh-fSEzTivdrQJ7QxTp-17bpYPI0j-0KTw2HexCfSLoz54drjtqj0bA__PTHOCqlYmrUfw/s1600/kapal-mys2010.png);
  animation: flightplan 16.5s ease-in-out 1;
}

@keyframes flightplan {
  0% {
    -webkit-filter: brightness(0.5) hue-rotate(-5deg);
    filter: brightness(0.5) hue-rotate(-5deg);
    transform: translate(-85%, 50%) rotate(8deg) scale(5);
  }
  15% {
    -webkit-filter: brightness(0.9) hue-rotate(-15deg);
    filter: brightness(0.9) hue-rotate(-15deg);
    transform: translate(25%, 30%) rotate(-30deg) scale(0.85);
  }
  30% {
    -webkit-filter: brightness(1.35) hue-rotate(-5deg);
    filter: brightness(1.35) hue-rotate(-5deg);
    transform: translate(-80%, 0%) rotate(15deg) scale(1.3);
  }
  44% {
    -webkit-filter: brightness(1.2) contrast(1) hue-rotate(-12deg);
    filter: brightness(1.2) contrast(1) hue-rotate(-12deg);
    transform: translate(-20%, -20%) rotate(-18deg) scale(0.75);
  }
  52% {
    -webkit-filter: brightness(1.45) contrast(1.15) hue-rotate(2deg);
    filter: brightness(1.45) contrast(1.15) hue-rotate(2deg);
    transform: translate(10%, 10%) rotate(-25deg) scale(1.65);
  }
  100% {
    -webkit-filter: brightness(0.55) contrast(0.85) hue-rotate(0deg);
    filter: brightness(0.55) contrast(0.85) hue-rotate(0deg);
    transform: translate(-30%, -30%) rotate(-47deg) scale(0);
  }
}
.subspace {
  z-index: 500;
  width: 300px;
  height: 300px;
  position: absolute;
  margin-top: -150px;
  top: 50%;
  margin-left: -150px;
  left: 50%;
}

.hosnian-prime {
  position: absolute;
  top: 50%;
  left: 50%;
  left: 0;
  right: 0;
  margin: -22vh auto 0;
  z-index: 50;
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO89UpztbCb-Fm8h5FKhV26Um2rH3qu9pTIrK6lKDrC2PSJpx04Uwz2s90OVTQjaIQoaTpbneGydofO75IpiwcKvFC674KuVyuRatIKwzRFNTFb-JnWqPbKPlI9mL4f69emifiaENAIbb6/s1600-r/black-logo-sule.png");
  width: 50vh;
  max-width: 268px;
  height: 50vh;
  max-height: 268px;
  box-shadow: inset 76px 0 80px 3px rgba(0, 0, 0, 0.69), inset -1px 0 50px 15px rgba(255, 255, 255, 0.49), inset -1px 0 15px 2px white, 0 0 55px 10px rgba(0, 0, 255, 0.45), 3px 0 10px 2px rgba(0, 0, 255, 0.75), -3px 0 10px 2px rgba(96, 96, 159, 0.75);
  background-size: 602px;
  border-radius: 50%;
  position: relative;
  transform: scale(1.1) translateY(0px);
  animation-name: rotate, planet-zoom;
  animation-duration: 60s, 16.5s;
  animation-iteration-count: infinite, 1;
  animation-timing-function: linear, ease-out;
}

@keyframes rotate {
  0% {
    background-position: 0px;
  }
  100% {
    background-position: 602px;
  }
}
@keyframes planet-zoom {
  0% {
    transform: scale(0) translateY(-100px);
  }
  51% {
    transform: scale(0) translateY(-100px);
  }
  52% {
    transform: scale(0.01) translateY(-100px);
  }
  100% {
    transform: scale(1.1) translateY(0px);
  }
}
.space {
  width: 100%;
  transform: scale(1.75) translateX(-300px);
  animation: space-zoom 16.5s 1 ease-out;
}

@keyframes space-zoom {
  0% {
    transform: scale(0.45) translateX(-250px);
    opacity: 0;
  }
  48% {
    transform: scale(0.45) translateX(-250px);
    opacity: 0;
  }
  49% {
    transform: scale(0.45) translateX(-250px);
    opacity: 1;
  }
  100% {
    transform: scale(1.75) translateX(-300px);
    opacity: 1;
  }
}

/*awan bintang*/
@keyframes move-hitam-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-hitam-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-hitam-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-hitam-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@keyframes move-awan-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-webkit-keyframes move-awan-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-moz-keyframes move-awan-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-ms-keyframes move-awan-back {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}
.stars, .hitam, .awan {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;
}
.stars {
  background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR7ro5RnI3ORQhUQzI-0OoQ5vm_BGnsKiwQEZr_Bb_xHDUclGozuFfeMswR-GSIYFG_tZkrqAHtcomJKEdTtgtIj28u-qHZ5m5vnfFZ2noGxLya1OfjcCphSJ-hzP96jYNU-nzq89b10I/s1600/stars-mys2010.png) repeat top center;
  z-index:0;
}
.hitam{
  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipOgJ8Jg-43YIt1desQrpXvLrPAlRjLOIp8MHoYDqqvf_K-_zjjio0HIF89OiamHJi1j4ph5YCJo5Cs4z-DmFGunXdAyecVlH_ETZsaNRUr501xELAnzkdJ0qlAhH9kISH16WrG8060Zs/s1600/bg1-plash-mys2010.png) repeat top center;
  z-index:1;
  -moz-animation:move-hitam-back 200s linear infinite;
  -ms-animation:move-hitam-back 200s linear infinite;
  -o-animation:move-hitam-back 200s linear infinite;
  -webkit-animation:move-hitam-back 200s linear infinite;
  animation:move-hitam-back 200s linear infinite;
}
.awan{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhORLv9vmAXNTaZLM1VRC7HqhF6AOWrIj1ydLQcQsD6OFxZMNFXgJ_JochOpC1WhJUlbw_u0Drj7YwnEZe3ZifYHL_UStym5_6YAkW5rNXIdtdE_Z1sjaZw66E9X3Riq7hgNMbAn0tRclI/s1600/awan-biru-mys2010.png) repeat top center;
    z-index:3;
  -moz-animation:move-awan-back 200s linear infinite;
  -ms-animation:move-awan-back 200s linear infinite;
  -o-animation:move-awan-back 200s linear infinite;
  -webkit-animation:move-awan-back 200s linear infinite;
  animation:move-awan-back 200s linear infinite;
}

/*Satellite M-2010*/
body div#St_M-2010_holder {
 position: absolute;
 left: -30%;
 bottom: 60px;
 z-index: 6;
 -webkit-animation: St_M-2010 240s linear infinite;
 -moz-animation: St_M-2010 240s linear infinite;
 -ms-animation: St_M-2010 240s linear infinite;
 -o-animation: St_M-2010 240s linear infinite;
 animation: St_M-2010 240s linear infinite;
}
@-moz-keyframes St_M-2010 {
 25% {
   z-index: 6;
 }
 50% {
   left: 140%;
   bottom: 600px;
   z-index: 0;
 }
 55% {
   bottom: 680px;
 }
 75% {
   z-index: 0;
 }
 100% {
   left: -30%;
   z-index: 6;
   bottom: 100px;
 }}

#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: 20px;
} 
</style>

<link href="https://sites.google.com/site/code6916/file/Logo-Mys2010.css?attredirects=0&d=1" rel="stylesheet" type="text/css">
<div class="stars">
<div id="St_M-2010_holder">
<div id="St_M-2010_back">
</div>
<img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYltMpAG1_PMEFXjNRshdnrmJEJJTEzrs1w_hc_jiuwEhtO3aINw13uJ0jF7lH_nX3xo1jyYxTtHJPpCHv79yrYE7TLUax3c-FkXR_zDIjYzhqL1oVpahfYwDeOjsnPzUmfmRGejWgyGA/s1600/satelit-mys2010.gif"name="e902" border="0" width="108" height="109" /></a>
<div id="St_M-2010_ball">
<img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguCTqQ2SIaZnvkSTULJAW67TUK5GSNq2m0SKB17zxcXtQbeZ3Uyebk58Nzn5FMnDmnIsoildEawjdLlt56qCxEqGnzVvfsOU4rrEL5qz1eonntoSherpyW8Q2Dfurn0MtV8FDNI4aET8I/s1600/Animasi-satellite-mys2010.gif"name="e902" border="0" width="108" height="109" /></a>
</div>
</div>
<div id="Logo-Mys2010">
</div>
</div>
<div class="hitam">
</div>
<div class="awan">
</div>
<div class="subspace">
 <div class="hosnian-prime">
</div>
<div class="x-wing">
  <div class="bb-unit">
</div>
<div class="thruster-flicker">
   <div class="thruster t1">
</div>
<div class="thruster t2">
</div>
<div class="thruster t3">
</div>
<div class="thruster t4">
</div>
</div>
</div>
</div>

<div class="outside lighting">
<div class="thruster t4">
</div>
<div class="thruster t3">
</div>
<div class="thruster t2">
</div>
<div class="thruster t1">
</div>
</div>
</div>
</div>
<div class="hyperspace">
  <div class="scene">
   <div class="wrap">
     <div class="wall wall-right">
</div>
<div class="wall wall-left">
</div>
<div class="wall wall-top">
</div>
<div class="wall wall-bottom">
</div>
<div class="wall wall-back">
</div>
</div>
<div class="wrap">
     <div class="wall wall-right">
</div>
<div class="wall wall-left">
</div>
<div class="wall wall-top">
</div>
<div class="wall wall-bottom">
</div>
<div class="wall wall-back">
</div>
</div>
</div>
</div>
<div class="space">
 <div id="stars">
</div>
<div id="stars2">
</div>
<div id="stars3">
</div>
</div>
<input type="button" value="replay" onClick="history.go(0)">
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">

<div align="center" style="margin-top: 1px">
<audio id="mys2010" src="https://sites.google.com/site/usesitesto/file/Metallica-mys2010.mp3" controls="controls"></audio></a>
</div>
<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/05/exiting-hyperspace-pure-css.html" target="_blank" title="Myscript2010"> 
<h2>
<span style="color:#eee; font-size: 8pt">LET'S STUDY</2></a>  
</div>
</header>


<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#fff;"> Edited by . <a href="Link Download" title="Download Full Code">&nbsp; Myscript2010 </a>&nbsp; Download </a> 
</div>

<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#fff;"> Copyright <a href="http://demoshow-mys2010.blogspot.co.id/2016/05/exiting-hyperspace-pure-css.html" title="Exiting Hyperspace Pure CSS">&nbsp; 2010 - 2016 </a>&nbsp; Hyperspace </a> 
</div>

<ul class="mys2010-list">
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>   
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>  
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>   
<script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'>
</script> 
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js"></script>  

<script>
      $(function () {
    $('video,audio').mediaelementplayer({
        success: function (mediaElement, domObject) {
            var audio_src = $('li.current').attr('data-url');
            mediaElement.setSrc(audio_src);
            mediaElement.addEventListener('ended', function (e) {
                mys2010PlayNext(e.target);
            }, false);
        },
        keyActions: []
    });
    $('.mys2010-list li').click(function () {
        $(this).addClass('current').siblings().removeClass('current');
        var audio_src = $(this).attr('data-url');
        $('audio#mys2010:first').each(function () {
            this.player.pause();
            this.player.setSrc(audio_src);
            this.player.play();
        });
    });
});
function mys2010PlayNext(currentPlayer) {
    if ($('.mys2010-list li.current').length > 0) {
        var current_item = $('.mys2010-list li.current:first');
        var audio_src = $(current_item).next().text();
        $(current_item).next().addClass('current').siblings().removeClass('current');
        console.log('if ' + audio_src);
    } else {
        var current_item = $('.mys2010-list li:first');
        var audio_src = $(current_item).next().text();
        $(current_item).next().addClass('current').siblings().removeClass('current');
        console.log('elseif ' + audio_src);
    }
    if ($(current_item).is(':last-child')) {
        $(current_item).removeClass('current');
    } else {
        currentPlayer.setSrc(audio_src);
        currentPlayer.play();
    }
}  
</script>
Hyperspace Code by. Matt Popovich
Night sky with Stars Code by. Web Sonick
Design code is edited by. Mys2010 In Codepen
DEMOSHOW
If you want to directly copy  and  paste you canDownload Here  Exiting Hyperspace

Category:

Solar System 3D Animation

Memasang Kode Solar System 3D Animation
Login ke akun blog klik tombol blog baru, buat satubuah link baru   
kemudian beri nama sesuai fungsi,  klik Edit HTML pada link baru tersebut, 
hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut :  Get Blank Template.   edit background warna sesuai keinginan klik simpan selesai.
Kemudian klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Oswald'>
<style class="sule"> 
body {);overflow:hidden;}  
body {background:#ff0;} 
.ap {
position: fixed;
right: 0;
bottom: 0;
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;
text-shadow: 0px 0px blue;  
font-size:  11px;
background:  #222;
border-top: 2px solid #f0f;
z-index: 9999;
}  
body {
  line-height: 1; }
ol, ul {
  list-style: none; }
blockquote, q {
  quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {
  content: none; }
table {
  border-collapse: collapse;
  border-spacing: 0; }
* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  box-sizing: border-box; }
body {
  font-size: 10px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  background-color: #08090A; }
#universe {
  z-index: 1;
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-position: center 40%;
  background-repeat: no-repeat;
  background-size: cover; }
#galaxy {
  position: relative;
  width: 100%;
  height: 100%;
  /*perspective: 4000;*/ }
#solar-system {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d; }
.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform-style: preserve-3d;
  animation-name: orbit;
  animation-iteration-count: infinite;
  animation-timing-function: linear; }
.orbit .orbit {
  animation-name: suborbit; }
.pos {
  position: absolute;
  top: 50%;
  width: 2em;
  height: 2em;
  margin-top: -1em;
  margin-left: -1em;
  transform-style: preserve-3d;
  animation-name: invert;
  animation-iteration-count: infinite;
  animation-timing-function: linear; }
#sun, .planet, #earth .moon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  margin-left: -0.5em;
  border-radius: 50%;
  transform-style: preserve-3d; }
#sun {
  background-color: #F5FFFA;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 0 60px white; }
.planet {
   background-color: #202020;
  background-repeat: no-repeat;
  background-size: cover;
  animation-iteration-count: infinite;
  animation-timing-function: linear; }
.ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%; }
#saturn .ring {
  width: 2em;
  height: 2em;
  margin-top: -1em;
  margin-left: -1em;
  border: 0.3em solid red ;
  animation-iteration-count: infinite;
  animation-timing-function: linear; }
#saturn .ring:after {
  border-radius: 50%;
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  width: 2.2em;
  height: 2.2em;
  margin-top: -1.1em;
  margin-left: -1.1em;
  border: 0.07em solid #BC8F8F;
  box-sizing: border-box;
  box-sizing: border-box; }
/*planets index */
#mercury {
  z-index: 10; }

#venus {
  z-index: 9; }

#earth {
  z-index: 8; }

#moon {
  z-index: 7; }

#mars {
  z-index: 6; }

#jupiter {
  z-index: 5; }

#saturn {
  z-index: 4; }

#uranus {
  z-index: 3; }

#neptune {
  z-index: 2; }

#sun {
  z-index: 1; }

/*animations */
@keyframes orbit {
  0% {
    transform: rotateZ(0deg); }

  100% {
    transform: rotateZ(-360deg); } }

@keyframes suborbit {
  0% {
    transform: rotateX(90deg) rotateZ(0deg); }

  100% {
    transform: rotateX(90deg) rotateZ(-360deg); } }

@keyframes invert {
  0% {
    transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg); }

  100% {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); } }
/*opening */
.view-3D .opening #sun,
.view-3D .opening .orbit,
.view-3D .opening .pos,
.view-3D .opening .planet,
.view-3D .opening .satelite,
.view-3D .opening .ring {
  transition-duration: 4s; }
#universe.opening #sun {
  box-shadow: 0 0 0 rgba(255, 160, 60, 0); }
/*2D view */
.view-2D.zoom-large #sun {
  transform-style: flat; }
.view-2D.zoom-large .orbit {
  transform-style: flat; }
.view-2D #sun,
.view-2D .ring {
  transform: rotateX(0deg); }
.view-2D .planet,
.view-2D .moon {
  transform: rotateX(90deg); }
/*3D view */
.view-3D.zoom-large #sun {
  transform-style: preserve-3d; }
.view-3D.zoom-large .orbit {
  transform-style: preserve-3d; }
.view-3D #solar-system {
  transform: rotateX(75deg); }
.view-3D #sun {
  transform: rotateX(-90deg); }
.view-3D .ring {
  transform: rotateX(90deg); }
.view-3D .planet,
.view-3D .moon {
  transform: rotateX(0deg); }
/*large zoom */
.zoom-large #solar-system {
  width: 100%; }
.zoom-large.view-2D .scale-stretched #solar-system {
  font-size: 26%; }
.zoom-large.view-3D .scale-stretched #solar-system {
  font-size: 62%; }
.zoom-large.view-2D .scale-d #solar-system {
  font-size: 22%; }
.zoom-large.view-3D .scale-d #solar-system {
  font-size: 48%; }
.zoom-large.view-2D .scale-s #solar-system {
  font-size: 7%; }
.zoom-large.view-3D .scale-s #solar-system {
  font-size: 14%; }
/*close zoom */
.zoom-close #solar-system {
  width: 200%;
  font-size: 100%; }
.zoom-close .scale-stretched #solar-system {
  margin-left: -100%; }
.zoom-close .scale-d #solar-system {
  margin-left: -106%; }
.zoom-close.view-2D .scale-d #solar-system {
  font-size: 84%; }
.zoom-close.view-3D .scale-d #solar-system {
  font-size: 84%; }
.zoom-close .scale-s #solar-system {
  margin-left: -145%; }

.zoom-close.view-2D .scale-s #solar-system {
  font-size: 40%; }

.zoom-close.view-3D .scale-s #solar-system {
  font-size: 40%; }

.zoom-close .orbit,
.zoom-close .pos,
.zoom-close .planet,
.zoom-close .satelite,
.zoom-close .ring {
  animation-play-state: paused!important;
  animation-duration: 0s!important;
  animation: none!important; }

.zoom-close.view-2D .planet,
.zoom-close.view-2D .moon {
  transform: rotateX(0deg); }

.zoom-close.view-3D .planet {
  transform: rotateX(-90deg); }

.zoom-close.view-3D .moon {
  transform: rotateX(90deg); }

.zoom-close .pos {
  left: 100%!important;
  top: 50%!important; }
/* sideral years */
#mercury .pos,
#mercury .planet,
#mercury.orbit {
  animation-duration: 2.89016s; }

#venus .pos,
#venus .planet,
#venus.orbit {
  animation-duration: 7.38237s; }

#earth .pos,
#earth .planet,
#earth.orbit {
  animation-duration: 12.00021s; }

#earth .orbit .pos,
#earth .orbit {
  animation-duration: 0.89764s; }

#mars .pos,
#mars .planet,
#mars.orbit {
  animation-duration: 22.57017s; }

#jupiter .pos,
#jupiter .planet,
#jupiter.orbit {
  animation-duration: 142.35138s; }

#saturn .pos,
#saturn .planet,
#saturn.orbit,
#saturn .ring {
  animation-duration: 353.36998s; }

#uranus .pos,
#uranus .planet,
#uranus.orbit {
  animation-duration: 1008.20215s; }

#neptune .pos,
#neptune .planet,
#neptune.orbit {
animation-duration: 1977.49584s; }
/*planets sizes */
.scale-stretched #sun {
  font-size: 17em; }

.scale-stretched #mercury .planet {
  font-size: 3.5em; }

.scale-stretched #venus .planet {
  font-size: 3.72em; }

.scale-stretched #earth .planet {
  font-size: 7.92em; }

.scale-stretched #earth .moon {
  font-size: 1.2em; }

.scale-stretched #mars .planet {
  font-size: 3.1em; }

.scale-stretched #jupiter .planet {
  font-size: 10em; }

.scale-stretched #saturn .planet {
  font-size: 5.8em; }

.scale-stretched #uranus .planet {
  font-size: 4.68em; }

.scale-stretched #neptune .planet {
  font-size: 4.9em; }


/*planets distance scale sizes */
.scale-d #sun {
  font-size: 41.73048em; }

.scale-d #mercury .planet {
  font-size: 0.14634em; }

.scale-d #venus .planet {
  font-size: 0.36306em; }

.scale-d #earth .planet {
  font-size: 0.38226em; }

.scale-d #earth .moon {
  font-size: 0.08226em; }

.scale-d #mars .planet {
  font-size: 0.20334em; }

.scale-d #jupiter .planet {
  font-size: 4.19466em; }

.scale-d #saturn .planet {
  font-size: 3.49392em; }

.scale-d #uranus .planet {
  font-size: 1.52172em; }

.scale-d #neptune .planet {
  font-size: 1.47732em; }

/*planet size scale sizes */
.scale-s #sun {
  font-size: 417.3048em; }

.scale-s #mercury .planet {
  font-size: 1.4634em; }

.scale-s #venus .planet {
  font-size: 3.6306em; }

.scale-s #earth .planet {
  font-size: 3.8226em; }

.scale-s #earth .moon {
  font-size: 0.8226em; }

.scale-s #mars .planet {
  font-size: 2.0334em; }

.scale-s #jupiter .planet {
  font-size: 41.9466em; }

.scale-s #saturn .planet {
  font-size: 34.9392em; }

.scale-s #uranus .planet {
  font-size: 15.2172em; }

.scale-s #neptune .planet {
  font-size: 14.7732em; }

/*stretched orbits */
.scale-stretched #mercury.orbit {
  width: 32em;
  height: 32em;
  margin-top: -16em;
  margin-left: -16em; }

.scale-stretched #venus.orbit {
  width: 40em;
  height: 40em;
  margin-top: -20em;
  margin-left: -20em; }

.scale-stretched #earth.orbit {
  width: 56em;
  height: 56em;
  margin-top: -28em;
  margin-left: -28em; }

.scale-stretched #earth .orbit {
  width: 6em;
  height: 6em;
  margin-top: -3em;
  margin-left: -3em; }

.scale-stretched #mars.orbit {
  width: 72em;
  height: 72em;
  margin-top: -36em;
  margin-left: -36em; }

.scale-stretched #jupiter.orbit {
  width: 100em;
  height: 100em;
  margin-top: -50em;
  margin-left: -50em; }

.scale-stretched #saturn.orbit {
  width: 150em;
  height: 150em;
  margin-top: -75em;
  margin-left: -75em; }

.scale-stretched #uranus.orbit {
  width: 186em;
  height: 186em;
  margin-top: -93em;
  margin-left: -93em; }

.scale-stretched #neptune.orbit {
  width: 210em;
  height: 210em;
  margin-top: -105em;
  margin-left: -105em; }

/*scaled orbits */
.scale-d #mercury.orbit {
  width: 44.74176em;
  height: 44.74176em;
  margin-top: -22.37088em;
  margin-left: -22.37088em; }

.scale-d #venus.orbit {
  width: 47.35737em;
  height: 47.35737em;
  margin-top: -23.67869em;
  margin-left: -23.67869em; }

.scale-d #earth.orbit {
  width: 49.50959em;
  height: 49.50959em;
  margin-top: -24.75479em;
  margin-left: -24.75479em; }

.scale-d #mars.orbit {
  width: 53.58356em;
  height: 53.58356em;
  margin-top: -26.79178em;
  margin-left: -26.79178em; }

.scale-d #jupiter.orbit {
  width: 82.2042em;
  height: 82.2042em;
  margin-top: -41.1021em;
  margin-left: -41.1021em; }

.scale-d #saturn.orbit {
  width: 115.91713em;
  height: 115.91713em;
  margin-top: -57.95857em;
  margin-left: -57.95857em; }

.scale-d #uranus.orbit {
  width: 191.00471em;
  height: 191.00471em;
  margin-top: -95.50235em;
  margin-left: -95.50235em; }

.scale-d #neptune.orbit {
  width: 275.64709em;
  height: 275.64709em;
  margin-top: -137.82355em;
  margin-left: -137.82355em; }

/* Moon */
.scale-d #earth .orbit {
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  margin-left: -0.5em; }

/*size scale orbits */
.scale-s #mercury.orbit {
  width: 441.3048em;
  height: 441.3048em;
  margin-top: -220.6524em;
  margin-left: -220.6524em; }

.scale-s #venus.orbit {
  width: 457.3048em;
  height: 457.3048em;
  margin-top: -228.6524em;
  margin-left: -228.6524em; }

.scale-s #earth.orbit {
  width: 473.3048em;
  height: 473.3048em;
  margin-top: -236.6524em;
  margin-left: -236.6524em; }

.scale-s #mars.orbit {
  width: 489.3048em;
  height: 489.3048em;
  margin-top: -244.6524em;
  margin-left: -244.6524em; }

.scale-s #jupiter.orbit {
  width: 561.3048em;
  height: 561.3048em;
  margin-top: -280.6524em;
  margin-left: -280.6524em; }

.scale-s #saturn.orbit {
  width: 705.3048em;
  height: 705.3048em;
  margin-top: -352.6524em;
  margin-left: -352.6524em; }

.scale-s #uranus.orbit {
  width: 817.3048em;
  height: 817.3048em;
  margin-top: -408.6524em;
  margin-left: -408.6524em; }

.scale-s #neptune.orbit {
  width: 881.3048em;
  height: 881.3048em;
  margin-top: -440.6524em;
  margin-left: -440.6524em; }

/* Moon */
.scale-s #earth .orbit {
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  margin-left: -0.5em; 
}
/*speed */
.set-speed dl.infos dd span:after {
  content: 'Orbit Velocity'; }

.set-speed #sun dl.infos dd:after {
  content: '220 km/s'; }

.set-speed #mercury dl.infos dd:after {
  content: '170,503 km/h'; }

.set-speed #venus dl.infos dd:after {
  content: '126,074 km/h'; }

.set-speed #earth dl.infos dd:after {
  content: '107,218 km/h'; }

.set-speed #mars dl.infos dd:after {
  content: '86,677 km/h'; }

.set-speed #jupiter dl.infos dd:after {
  content: '47,002 km/h'; }

.set-speed #saturn dl.infos dd:after {
  content: '34,701 km/h'; }

.set-speed #uranus dl.infos dd:after {
  content: '24,477 km/h'; }

.set-speed #neptune dl.infos dd:after {
  content: '19,566 km/h'; }

/*size */
.set-size dl.infos dd span:after {
  content: 'Equatorial Circumference'; }

.set-size #sun dl.infos dd:after {
  content: '4,370,005 km'; }

.set-size #mercury dl.infos dd:after {
  content: '15,329 km'; }

.set-size #venus dl.infos dd:after {
  content: '38,024 km'; }

.set-size #earth dl.infos dd:after {
  content: '40,030 km'; }

.set-size #mars dl.infos dd:after {
  content: '21,296 km'; }

.set-size #jupiter dl.infos dd:after {
  content: '439,263 km'; }

.set-size #saturn dl.infos dd:after {
  content: '365,882 km'; }

.set-size #uranus dl.infos dd:after {
  content: '159,354 km'; }

.set-size #neptune dl.infos dd:after {
  content: '154,704 km'; }

/*distance */
.set-distance dl.infos dd span:after {
  content: 'From Sun'; }

.set-distance #sun dl.infos dd span:after {
  content: 'From Earth'; }

.set-distance #sun dl.infos dd:after {
  content: '149,598,262 km'; }

.set-distance #mercury dl.infos dd:after {
  content: '57,909,227 km'; }

.set-distance #venus dl.infos dd:after {
  content: '108,209,475 km'; }

.set-distance #earth dl.infos dd:after {
  content: '149,598,262 km'; }

.set-distance #mars dl.infos dd:after {
  content: '227,943,824 km'; }

.set-distance #jupiter dl.infos dd:after {
  content: '778,340,821 km'; }

.set-distance #saturn dl.infos dd:after {
  content: '1,426,666,422 km'; }

.set-distance #uranus dl.infos dd:after {
  content: '2,870,658,186 km'; }

.set-distance #neptune dl.infos dd:after {
  content: '4,498,396,441 km'; }

/*mercury Top */
#mercury .pos {
left: 50%;
top: -1%; }
#mercury .planet {
animation-name: shadow-mercury; }
@keyframes shadow-mercury {
0% {
box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
/* TOP */ }
25% {
box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
/* LEFT */ }
50% {
box-shadow: inset 13px -5px 4px rgba(0, 0, 0, 0.5);
/* BOTTOM */ }
50.01% {
box-shadow: inset -13px -5px 4px rgba(0, 0, 0, 0.5);
/* BOTTOM */ }
75% {
box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
/* RIGHT */ }
100% {
box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
/* TOP */ } }
.scaled.view-2D #mercury .planet,
.scaled.view-3D #mercury .planet {
box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
/* RIGHT */ }
/*venus ; pos: Left */
#venus .pos {
left: 0;
top: 50%; }
#venus .planet {
animation-name: shadow-venus; }
@keyframes shadow-venus {
0% {
box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
/* LEFT */ }
25% {
box-shadow: inset 22px -20px 10px rgba(0, 0, 0, 0.5);
/* BOTTOM */ }
25.5% {
box-shadow: inset -22px -20px 10px rgba(0, 0, 0, 0.5);
/* BOTTOM */ }
50% {
box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
/* RIGHT */ }
75% {
box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
/* TOP */ }
100% {
box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
/* LEFT */ } }
.scaled.view-2D #venus .planet,
.scaled.view-3D #venus .planet {
box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
/* RIGHT */ }
/*earth ; pos: Right */
#earth .pos {
left: 100%;
top: 50%; }
#earth .planet {
animation-name: shadow-earth; }
@keyframes shadow-earth {
0% {
box-shadow: inset -4px 0 2px yellow;
/* RIGHT */ }
25% {
box-shadow: inset 0 0 1px red;
/* TOP */ }
50% {
box-shadow: inset 4px 0 2px white;
/* LEFT */ }
75% {
box-shadow: inset 24px -20px 15px red;
/* BOTTOM */ }
75.01% {
box-shadow: inset -24px -20px 15px #FFFAF0;
/* BOTTOM */ }
100% {
box-shadow: inset -4px 0 2px yellow;
/* RIGHT */ } }
.scaled.view-2D #earth .planet,
.scaled.view-3D #earth .planet {
box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
/* RIGHT */ }
/* moon */
#earth .orbit .pos {
left: 100%;
top: 150%; }
/*mars ; pos: Bottom */
#mars .pos {
left: 50%;
top: 100%; }
#mars .planet {
animation-name: shadow-mars; }
@keyframes shadow-mars {
0% {
box-shadow: inset -18px -10px 10px rgba(0, 0, 0, 0.5);
/* BOTTOM */ }
25% {
box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
/* RIGHT */ }
50% {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
/* TOP */ }
75% {
box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
/* LEFT */ }
99.99% {
box-shadow: inset 18px -10px 10px rgba(0, 0, 0, 0.5);
/* BOTTOM */ }
100% {
box-shadow: inset -18px -10px 10px rgba(0, 0, 0, 0.5);
/* BOTTOM */ } }
.scaled.view-2D #mars .planet,
.scaled.view-3D #mars .planet {
box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
/* RIGHT */ }
/*jupiter ; pos: Right */
#jupiter .pos {
left: 100%;
top: 50%; }
#jupiter .planet {
animation-name: shadow-jupiter; }
@keyframes shadow-jupiter {
0% {
box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
/* RIGHT */ }
25% {
box-shadow: inset 0 3px 2px rgba(0, 0, 0, 0.5);
/* TOP */ }
50% {
box-shadow: inset 16px 0 5px rgba(0, 0, 0, 0.5);
/* LEFT */ }
75% {
box-shadow: inset 94px -30px 40px rgba(0, 0, 0, 0.5);
/* BOTTOM */ }
75.01% {
box-shadow: inset -94px -30px 40px rgba(0, 0, 0, 0.5);
/* BOTTOM */ }
100% {
box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
/* RIGHT */ } }
.scaled.view-2D #jupiter .planet,
.scaled.view-3D #jupiter .planet {
box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
/* RIGHT */ }
/*saturn ; pos: Left */
#saturn .pos {
left: 0%;
top: 50%; }
#saturn .planet {
animation-name: shadow-saturn; }
@keyframes shadow-saturn {
0% {
box-shadow: inset 16px 0 5px ;
/* LEFT */ }
25% {
box-shadow: inset 80px -30px 50px ;
/* BOTTOM */ }
25.01% {
box-shadow: inset -94px -30px 40px ;
/* BOTTOM */ }
50% {
box-shadow: inset -16px 0 5px ;
/* RIGHT */ }
75% {
box-shadow: inset -2px 3px 2px ;
/* TOP */ }
100% {
box-shadow: inset 16px 0 5px ;
/* LEFT */ } }
.scaled.view-2D #saturn .planet,
.scaled.view-3D #saturn .planet {
box-shadow: inset -16px 0 5px ;
/* RIGHT */ }
/*uranus ; pos: Left */
#uranus .pos {
left: 0;
top: 50%; }
#uranus .planet {
animation-name: shadow-uranus; }
@keyframes shadow-uranus {
0% {
box-shadow: inset 8px 0 5px rgba(0, 0, 0, 0.5);
/* LEFT */ }

25% {
box-shadow: inset 40px -15px 40px rgba(0, 0, 0, 0.5);
/* BOTTOM */ }
25.01% {
box-shadow: inset -40px -15px 40px rgba(0, 0, 0, 0.5);
/* BOTTOM */ }
50% {
box-shadow: inset -8px 0 5px rgba(0, 0, 0, 0.5);
/* RIGHT */ }
75% {
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
/* TOP */ }
100% {
box-shadow: inset 8px 0 5px rgba(0, 0, 0, 0.5);
/* LEFT */ } }
.scaled.view-2D #uranus .planet,
.scaled.view-3D #uranus .planet {
box-shadow: inset -8px 0 5px rgba(0, 0, 0, 0.5);
/* RIGHT */ }
/*neptune ; pos: Top */
#neptune .pos {
left: 50%;
top: 0; }
#neptune .planet {
animation-name: shadow-neptune; }
@keyframes shadow-neptune {
0% {
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
/* TOP */ }
25% {
box-shadow: inset 12px 0 5px rgba(0, 0, 0, 0.5);
/* LEFT */ }
50% {
box-shadow: inset 50px -15px 40px rgba(0, 0, 0, 0.5);
/* BOTTOM */ }
50.01% {
box-shadow: inset -50px -15px 40px rgba(0, 0, 0, 0.5);
/* BOTTOM */ }
75% {
box-shadow: inset -12px 0 5px rgba(0, 0, 0, 0.5);
/* RIGHT */ }
100% {
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
/* TOP */ } }
.scaled.view-2D #neptune .planet,
.scaled.view-3D #neptune .planet {
box-shadow: inset -12px 0 5px rgba(0, 0, 0, 0.5);
/* RIGHT */ }

/*navigation styles */
dl.infos {
  position: absolute;
  display: block;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin-top: -90%;
  margin-left: 90%;
  padding-left: 100%;
  transform-origin: 100% 100%;
  transform-style: preserve-3d;
  transform: rotateX(90deg); }

dl.infos:before {
  position: absolute;
  content: '';
  width: 15px;
  height: 30px;
  left: 15px;
  bottom: 0;
  border-top: 1px solid white;
  border-left: 1px solid white;
  transform-style: preserve-3d;
  transform: skew(-45deg, 0deg);
  box-shadow: inset 1px 1px black; }

dl.infos dt {
  position: absolute;
  left: 50px;
  margin-bottom: 26px;
  bottom: 30px;
  color: #FFF;
  font-size: 14px;
  text-shadow: 1px 1px 2px black; }

dl.infos dd:after {
  position: absolute;
  left: 50px;
  bottom: 30px;
  width: 300px;
  color: #FFF;
  font-size: 22px;
  text-shadow: 1px 1px 2px black; }

dl.infos dd span:after {
  position: absolute;
  left: 50px;
  bottom: 14px;
  width: 300px;
  color: #FFF;
  font-size: 11px;
  text-shadow: 1px 1px 2px black; } 

.sun #sun .infos,
.mercury #mercury .infos,
.venus #venus .infos,
.earth #earth .infos,
.mars #mars .infos,
.jupiter #jupiter .infos,
.saturn #saturn .infos,
.uranus #uranus .infos,
.neptune #neptune .infos {
  display: block;
  opacity: 1;
  transform: rotateX(0deg); }

.mercury #mercury.orbit,
.venus #venus.orbit,
.earth #earth.orbit,
.mars #mars.orbit,
.jupiter #jupiter.orbit,
.saturn #saturn.orbit,
.uranus #uranus.orbit,
.neptune #neptune.orbit {
border: 1px solid rgba(255, 255, 255, 0.8); 
} 
h4 {
color:#fff;
font-size:20px;
margin-top:35px;
text-align:center; 
font-family: 'Oswald';
text-shadow: 2px 2px 4px #000;      
} 

h1 span, #navbar h1 a {
  display: inline;
  position: relative;
  padding: 0;
  font-weight: 300;
  font-size: 14px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5); }
}

#navbar, #controls, #data {
  background: rgba(0, 0, 0, 0.4); }

#navbar {
  z-index: 99;
  position: absolute;
  top: 0;
  left: 0;
  padding: 16px;
  width: 100%;
  height: 48px; }

#navbar a, #data a, #controls label {
  color: rgba(255, 255, 255, 0.6);
  display: block;
  position: relative;
  text-decoration: none; }

#navbar a:hover, #data a:hover, #controls label:hover {
  color: #FFF; }

#data a.active {
  color: #0CF; }

#navbar a {
  position: absolute;
  top: 0;
  height: 48px;
  padding: 16px;
  font-size: 14px; }

#toggle-data {
  left: 0; }

#toggle-controls {
  right: 0; }

#data, #controls {
  z-index: 99;
  position: fixed;
  opacity: 1;
  top: 49px;
  padding: 16px; }

.data-close #data {
  left: -100%; }

.data-open #data {
  left: 0px; }

.controls-close #controls {
  right: -100%; }

.controls-open #controls {
  right: 0px; }

#data a {
  margin-bottom: 1px;
  padding: 6px 10px;
  font-size: 18px; }

#controls label {
  opacity: .6;
  height: 24px;
  margin-bottom: 28px; }

#controls label:hover {
  opacity: 1; }

#controls label:before {
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  text-align: center;
  color: #FFF;
  z-index: 99; }

#controls label span {
  display: block;
  margin-left: 36px;
  padding-top: 4px;
  font-size: 18px;
  color: #FFF; }

#controls input {
  display: block;
  appearance: none; }

#controls input[type="radio"]:before {
  content: '';
  display: block;
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid #FFF;
  border-radius: 16px; }

#controls input:checked[type="radio"]:after {
  content: '';
  display: block;
  top: 3px;
  margin-left: 3px;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #FFF;
  z-index: 99; }

#controls input[type="checkbox"]:before {
  content: '';
  display: block;
  position: absolute;
  width: 100px;
  height: 22px;
  border: 2px solid #FFF;
  border-radius: 16px; }

#controls input[type="checkbox"]:after {
  content: '';
  display: block;
  top: 3px;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #FFF;
  z-index: 99; }

#controls label.set-view:before {
  font: bold small-caps 11px/20px sans-serif; }

.view-3D #controls label.set-view:before {
  content: '2D';
  margin-left: 82px; }

.view-2D #controls label.set-view:before {
  content: '3D';
  margin-left: 7px; }

.view-3D #controls .set-view input:after {
  margin-left: 3px; }

.view-2D #controls .set-view input:after {
  margin-left: 81px; }

#controls label.set-zoom:before {
  font: normal small-caps 18px/14px sans-serif; }

.zoom-large #controls label.set-zoom:before {
  content: '+';
  margin-left: 82px; }

.zoom-close #controls label.set-zoom:before {
  content: '-';
  margin-left: 7px; }

.zoom-large #controls .set-zoom input:after {
  margin-left: 3px; }

.zoom-close #controls .set-zoom input:after {
  margin-left: 81px; }

/*transitions */
.pos {
  transition-property: top, left; }

#solar-system, .orbit,
.planet,
.satelite,
.ring {
  transition-property: width, height, top, left, margin-left, margin-top, webkit-transform; }

#sun, .icon {
  transition-property: width, height, webkit-transform; }

#solar-system,
#sun,
.orbit,
.pos,
.planet,
.satelite,
.ring,
.infos,
.icon {
  transition-duration: .8s;
  transition-timing-function: ease-in-out; }

#solar-system,
#sun,
.planet,
.satelite,
.ring {
  transition-delay: 0s; }

.pos {
  transition-delay: 1s; }

.opening #solar-system,
.opening #sun,
.opening .orbit,
.opening .pos,
.opening .planet,
.opening .satelite,
.opening .ring,
.opening .infos,
.opening h1,
.opening #data,
.opening dl.infos,
.opening #controls {
  transition-duration: 0s;
  transition-delay: 0s; }

.opening .pos {
  transition-delay: 0s; }

h1, #data, #controls {
  transition-property: opacity, margin;
  transition-duration: .8s;
  transition-timing-function: ease-in-out; }

h1 {
  transition-delay: .35s; }

#data {
  transition-delay: .7s; }

#controls {
  transition-delay: 1s; }

/*images */
body {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSvahvthzrCt9DEbU1KpOCLGPKIZ4hk5e9XofrtYleSpK7qKFvikL1pv1VOWxkFxmuZABk_bJ914lRGYv507INQkDmREF86ndgs2dN0ahSMrWmuMMfn5UhR8y-Cr6dJh81Y0s9FWVJF6A/s1600/cardboard-mys2010.png); }

#universe {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlvdAHJoiszQrXJqd1OZAt1069FZ07rnLim-V85jFeDgyvU1m3mPFXAI3WF3XYoLKTWx9AXAjxec0sZOa1nhBVEde2AsT_rz8eDNQ6pESE3Wzhrh8H0gSUvdr0sQJo_tED5xI8RXAwD60/s1600/bg1-mys2010.png); } 

#sun {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkg-r9os-A0bHwK87AcpLd1Vhpmkprj5n2-OFi3ZXyrxmLgo8OLQs8n4-qbNtGRDIKpSyGG2b3fu4rZyGPwKNlEgwBA3q_2Z_1pA8GocIFRdUwVlCFjVCNh_Km4DJVqz0KaPNororM-QM/s1600/sun-white-mys2010.JPG); }

#mercury .planet {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxfLcAYclx2WE127jMzO7ocAN2xPT6G5iIOxLWm3_8v7Hd-xIPtPQALH6yBTUC_5Gu74COKnSU7JFn6RXGy-M7m6ohw7X2GEtWJf4diO6tJ4FVi5R9j4ULm4pG-_mzDNXx-anTvT4CqlA/s1600/mercury-mys2010.png); }

#venus .planet {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7fF9h90vw-3Od3S6RK3SmfiU05c3PetDpdDqfk5LNaqb0sl_NypuakjuQOfqtwyWMa81684FW4TeuhQTWqAL5-YrIBxdX8DOvmKEoGvU5zHl0YZhp3YtwHpjNg_w0nGC3MYTiWVAhgCY/s1600/venus-mys2010.png); }

#earth .planet {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJa5NbZusqT0gsWRociN5jpyX-0GXXNVSqh_MXkdzUuWOL8zRhOf9IbscMgexkUByAFz2uXfgf-7aV-2KhxK6GmmshgRK6jQ8KYsHm_Q1QNG103uzo1lT1rwk1m2dsUq9bNRYAWojVXos/s1600/GlobeAnimated-mys2010.gif); }

#earth .moon {
  background-color: white; }

#mars .planet {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBdge_RYJdUZI_5eTVi1Kq37eAf8BkfqMO_311yu8S6KqX6g8ZSyDIywhThn09xmd1tgjgqbJEscd-OXVXD73veJDgCkmlpMmtJwD53vwmijyl2pH1Q3kpPMIYTfj394BR-a45aNnv8UQ/s1600/mars-mys2010.png); }

#jupiter .planet {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9A_cb_UGK_i99DDdbdFlzdQi7gJFsjaCX34NEs6Qjy_J2KSYmMhh3sXYRZTUwaVOJCySO91d41wMJH2VJOiRUyrv-5G0KTOnkof6KQAJmkuQ18i6MqWGYz2O0HD-9zkv_x_hHxAg275U/s1600/Jupiter-mys2010.png); }

#saturn .planet {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT4z47ZWQiEaiyNwNf3P84NLUokH6OwAJ5-mF5f3lHVdWtEa3qwsqBQmiICfd64303rQQa3zBjO1sSuEwjRU0kHlXleoayPRXW81gF6O6pjGuIUzADxlXxW8014bdJcc1HWgJdu8lZhBk/s1600/saturnus-mys2010.png); }

#uranus .planet {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCWqFL3V17RO07gbtCObrxeZcRE8-Ygm8UHt_2sLBlbw_Hui2ktdRE9rUp30znueMjmIr59LfP69L31jxjpWuhXxREpUPNg8zujZCl6eQiY4hYzLfGhptVRJJiZxwOX2d9FKy87xCRiyI/s1600/uranus-mys2010.png); }

#neptune .planet {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8ONmBeIGwhAz3iSU9B_zM5Mt9ht9A6jFwspLBprIHaDjLqlYOK8hoF6rXwm7dSW3tmdQLPIL7ThA0j_NZ28pVBDh2GS2QTuILlzvsOSRKesxPSoNCJejDUEbFq-HVlo7ECC-w-av5P8k/s1600/neptunus-mys2010.png); }

/*responsive styles */
@media screen and (max-width: 299px) {
  #universe {
    font-size: 20%; } }
@media screen and (min-width: 300px) {
  #universe {
    font-size: 24%; } }
@media screen and (min-width: 500px) {
  #universe {
    font-size: 36%; } }
@media screen and (min-width: 600px) {
  #universe {
    font-size: 44%; } }
@media screen and (min-width: 760px) {
  #universe {
    font-size: 58%; } }
@media screen and (min-width: 1000px) {
  #universe {
    font-size: 73%; }

  #navbar, #controls, #data {
    background: transparent; }

  #navbar a {
    display: none; }

  h1 {
    font-size: 22px;
    margin-top: 8px; }

  #controls {
    padding-right: 32px;
    top: 12px; }

  #data {
    position: fixed;
    top: inherit;
    bottom: 0;
    width: 100%;
    text-align: center; }

  #data a {
    display: inline-block;
    text-align: center;
    font-size: 20px;
    padding: 15px 15px; }

  .data-open #data, .data-close #data {
    left: 0px; }

  .controls-open #controls, .controls-close #controls {
    right: 0px; } }
@media screen and (min-width: 1300px) {
  #universe {
    font-size: 100%; } }
@media screen and (min-width: 1600px) {
  .zoom-close .scale-d #solar-system {
    margin-left: -120%; } }
/*Planet 2*/
.sphere {
  animation: spin 30s infinite linear;
  height:1200px;
  margin: 0 auto;
  position: relative;
  transform-style: preserve-3d;
  width: 1200px;
}
.sphere:before {
  animation: reverse-spin 30s infinite linear;
  background-image:linear-gradient(#ff0, #333);
 margin-top:   347px;
  border-radius:50%;
  content:"";
  height:50px;
  left:0;
  position:absolute;
  top:0;
  width:50px;
}
.sphere .circle {
 margin-top:   347px;
  border:solid 2px #fff;
  border-radius:50%;
  box-sizing:border-box;
  height: 50px;
  left:0;
  opacity:.5;
  position: absolute;
  top:0;
  width: 50px;
}
/*
.sphere .equator {
  transform:rotateX(90deg);
}
.sphere .cancer {
  transform: translateY(-50px) rotateX(90deg);
}
.sphere .capricorn {
  transform: translateY(50px) rotateX(90deg);
} 
*/
.sphere .weapon {
  background-image:linear-gradient(blue, #dad);
 margin-top:   317px;
  border-radius:50%;
  height:30px;
  left:50px;
  position:absolute;
  top:40px;
  transform:translateZ(88px) rotateX(12deg);
  width:30px;
}
@keyframes spin {
  0% {
    transform:rotateY(-20deg);
  }
  50% {
    transform:rotateY(60deg);
  }
  100% {
    transform:rotateY(-20deg);
  }
}

@keyframes reverse-spin {
  0% {
    transform:rotateY(20deg);
  }
  50% {
    transform:rotateY(-60deg);
  }
  100% {
    transform:rotateY(20deg);
  }
}
</style>

<body class="opening hide-UI view-2D zoom-large data-close controls-close">
<div id="navbar"><br><br><br> 
<a id="toggle-data" href="#data"><i class="icon-data"></i>Data</a>
<h4>
SOLAR SYSTEM<br> 
Edited by M2010 2018
</span></h4>
<a id="toggle-controls" href="#controls"><i class="icon-controls"></i>Controls</a>
</div>
<div id="controls">
<br><br><br><br>
<label class="set-view">
<input type="checkbox">
</label>
<label class="set-zoom">
<input type="checkbox">
</label>
<label>
<input type="radio" class="set-speed" name="scale" checked>
<span>Speed</span>
</label>
<label>
<input type="radio" class="set-size" name="scale">
<span>Size</span>
</label>
<label>
<input type="radio" class="set-distance" name="scale">
<span>Distance</span>
</label>
<label>

<a href="http://sample-mys2010.blogspot.com/2016/05/solar-system-3d-animation.html" target="_blank"title="outer space">
<i class="fa fa-globe"" style="font-size:25px;color:#ff0"></i>
<span>Visit</a></span>
</label>
<label>
</div>
<div id="universe" class="scale-stretched">
<div id="galaxy">
<div id="solar-system" class="earth">
<div id="mercury" class="orbit">
<div class="pos">
<div class="planet">

<dl class="infos">
<dt>Mercury</dt>
<dd><span></span></dd> </dl>
</div>
</div>
</div>
<div id="venus" class="orbit">
<div class="pos">
<div class="planet">

<dl class="infos">
<dt>Venus</dt>
<dd><span></span></dd></dl>
</div>
</div>
</div>
<div id="earth" class="orbit">
<div class="pos">
<div class="orbit">
<div class="pos">
<div class="moon">
</div>
</div>
</div>
<div class="planet">

<dl class="infos">
<dt>Earth</dt>
<dd><span></span>
</dd> 
</dl>
</div>
</div>
</div>
<div id="mars" class="orbit">
<div class="pos">
<div class="planet">

<dl class="infos">
<dt>Mars</dt>
<dd><span></span></dd></dl>
</div>
</div>
</div>
<div id="jupiter" class="orbit">
<div class="pos">
<div class="planet">

<dl class="infos">
<dt>Jupiter</dt>
<dd><span></span></dd> 
</dl>
</div>
</div>
</div>
<div id="saturn" class="orbit">
<div class="pos">
<div class="planet">
<div class="ring">
</div>
<dl class="infos">
<dt>Saturn</dt>
<dd><span></span></dd> 
</dl>
</div>
</div>
</div>
<div id="uranus" class="orbit">
<div class="pos">
<div class="planet">

<dl class="infos">
<dt>Uranus</dt>
<dd><span></span></dd>  
</dl>
</div>
</div>
</div>
<div id="neptune" class="orbit">
<div class="pos">
<div class="planet">

<dl class="infos">
<dt>Neptune</dt>
<dd><span></span></dd>   
</dl>
</div>
</div>
</div>
<div id="sun">

<dl class="infos">
<dt>Sun</dt>
<dd><span></span></dd> 
</dl>
</div>
</div>
</div>
</div>
<div class="Planet 2">
<div class="space layer1">
</div>
<div class="space layer2">
</div>
<div class="space layer3">
</div>
<div class="wrapper">
<div class="sphere">
<!--     
<div class="circle equator">

</div>
<div class="circle tropic cancer">
</div>
<div class="circle tropic capricorn">
</div>
-->
<div class="weapon">
 
</div>
</div>
</div>
<div class="planet">
</div>
<div class="ap" id="ap">
<div align="center">
<h2>
<span style="color:red"><div id="data">
<a class="sun" title="sun" href="#sunspeed">Sun 
<a class="mercury" title="mercury" href="#mercuryspeed">Mercury 
<a class="venus" title="venus" href="#venusspeed">Venus 
<a class="earth active" title="earth" href="#earthspeed">Earth 
<a class="mars" title="mars" href="#marsspeed">Mars
<a class="jupiter" title="jupiter" href="#jupiterspeed">Jupiter 
<a class="saturn" title="saturn" href="#saturnspeed">Saturn 
<a class="uranus" title="uranus" href="#uranusspeed">Uranus 
<a class="neptune" title="neptune" href="#neptunespeed">Neptune</a>
</div>
</2></a>  
</div>

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="https://sites.google.com/site/locationfile/kode/Time-M2010.js"></script>

<script type="text/javascript">
if (typeof jQuery == 'undefined') { 
document.write(unescape
("%3Cscript src='js/jquery.min.js'type='text/javascript'%3E%3C/script%3E"));}
</script>

<script>
$(window).load(function () {
    var body = $('body'), universe = $('#universe'), solarsys = $('#solar-system');
    var init = function () {
        body.removeClass('view-2D opening').addClass('view-3D').delay(2000).queue(function () {
            $(this).removeClass('hide-UI').addClass('set-speed');
            $(this).dequeue();
        });
    };
    var setView = function (view) {
        universe.removeClass().addClass(view);
    };
    $('#toggle-data').click(function (e) {
        body.toggleClass('data-open data-close');
        e.preventDefault();
    });
    $('#toggle-controls').click(function (e) {
        body.toggleClass('controls-open controls-close');
        e.preventDefault();
    });
    $('#data a').click(function (e) {
        var ref = $(this).attr('class');
        solarsys.removeClass().addClass(ref);
        $(this).parent().find('a').removeClass('active');
        $(this).addClass('active');
        e.preventDefault();
    });
    $('.set-view').click(function () {
        body.toggleClass('view-3D view-2D');
    });
    $('.set-zoom').click(function () {
        body.toggleClass('zoom-large zoom-close');
    });
    $('.set-speed').click(function () {
        setView('scale-stretched set-speed');
    });
    $('.set-size').click(function () {
        setView('scale-s set-size');
    });
    $('.set-distance').click(function () {
        setView('scale-d set-distance');
    });
    init();
});   
</script>

<script>
var slices = 8, angle = 360 / slices, sphere = document.querySelector('.sphere');
for (var i = 0; i < slices - 1; i++) {
    if (window.CP.shouldStopExecution(1)) {
        break;
    }
    var slice = document.createElement('div');
    slice.className = 'circle';
    slice.style.transform = 'rotateY(' + angle * i + 'deg)';
    sphere.appendChild(slice);
}
window.CP.exitedLoop(1);
var stars = 100, vh = window.innerHeight, vw = window.innerWidth;
function randomStar(selector) {
    var star = document.createElement('div');
    star.className = 'star';
    star.style.left = Math.floor(Math.random() * vw * 2 - 20) + 'px';
    star.style.top = Math.floor(Math.random() * (vh - 40) + 20) + 'px';
    document.querySelector(selector).appendChild(star);
}
for (var i = 0; i < stars; i++) {
    randomStar('.layer1');
    randomStar('.layer2');
    randomStar('.layer3');
} 
</script>
Design code is edited by. M2010
DEMOSHOW
If you want to directly copy  &  paste you canDownload Animated Solar System 3D

Category:
Subscribe to: Posts (Atom)