Solar System

Memasang Kode Solar System
Login ke akun blog klik tombol blog baru, buat satubuah link baru   
kemudian beri nama sesuai fungsi,  klik Edit HTML pada link baru tersebut, 
hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut :  Get Blank Template.   edit background warna sesuai keinginan klik simpan selesai.

Kemudian klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style class="Mys2010-styles">
body {);color:red;height:100%;overflow:hidden;}
body {
  background: #000;
} 
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  10px 0;
  position: fixed;
  top: 0;
  width: 100%;
text-align: center;
text-shadow: 0px 0px #FFf;  
font-size:  11px;
background: -moz-linear-gradient(top,  rgba(39,51,31,1) 0%, #111 100%);
  border-bottom: 3px solid #333;  
}
 
/* 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 #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%, rgba(39,51,31,1) 50%, transparent 90%); 
}

.lead {
  color: #888;
  font-family: Verdana;
  font-size: 14px;
  text-align: center;
  margin: 0;
  padding-top: 1em;
}

#sun {
  position: absolute;
  /* Positions the top-left corner of the image to be *
  /* in the middle of the box */
  top: 50%;
  left: 50%;  
  height: 100px;
  width: 100px;
  margin-top: -50px; 
  margin-left: -50px;
  background-color: orange;
  border-color: orange;
}
#earth {
  /* Style your earth */
  position: absolute;
  top: -3px;
  left: 50%;
  height: 50px;
  width: 50px;
  margin-top: -25px;
  margin-left: -25px;
  background-color: lightgreen;
  border-color: lightgreen;
}
#earth-orbit {
  /* For Section #2 */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  margin-top: -150px;
  margin-left: -150px;
  -webkit-animation: spin-left 60s linear infinite;
  -moz-animation: spin-left 60s linear infinite;
  -ms-animation: spin-left 60s linear infinite;
  -o-animation: spin-left 60s linear infinite;
  animation: spin-left 60s linear infinite;
}
#moon {
  /* Style your earth */
  position: absolute;
  top: -3px;
  left: 50%;
  height: 10px;
  width: 10px;
  margin-top: -5px;
  margin-left: -5px;
  background-color: lightblue;
  border-color: lightblue;
}
#moon-orbit {
  /* For Section #2 */
  position: absolute;
  top: -3px;
  left: 50%;
  width: 120px;
  height: 120px;
  margin-top: -60px;
  margin-left: -60px;
  -webkit-animation: spin-left 5s linear infinite;
  -moz-animation: spin-left 5s linear infinite;
  -ms-animation: spin-left 5s linear infinite;
  -o-animation: spin-left 5s linear infinite;
  animation: spin-left 5s linear infinite;
}
.circle {
  border-width: 2px;
  border-style: solid;
  border-radius: 50%;
}
.orbit-border {
  border-width: 2px;
  border-style: dotted;
  border-color: white;
}
@-webkit-keyframes spin-left {
  100% {
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

@keyframes spin-left {
  100% {
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
.sphere {
  animation: spin 30s infinite linear;
  height:200px;
  margin: 0 auto;
  position: relative;
  transform-style: preserve-3d;
  width: 360px;
}
.sphere:before {
  animation: reverse-spin 30s infinite linear;
  background-image:linear-gradient(#666, blue);
 margin-top:   150px;
  border-radius:50%;
  content:"";
  height:60px;
  left:0;
  position:absolute;
  top:0;
  width:60px;
}
.sphere .circle {
 margin-top:   150px;
  border:solid 2px #f0f;
  border-radius:50%;
  box-sizing:border-box;
  height: 60px;
  left:0;
  opacity:.5;
  position: absolute;
  top:0;
  width: 60px;
}
/* 
.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(#111, red);
 margin-top:    120px;
  border-radius:50%;
  height:40px;
  left:50px;
  position:absolute;
  top:40px;
  transform:translateZ(88px) rotateX(12deg);
  width:40px;
}
@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);
  }
}

 body {
 margin-top:-165px; 
}
#solar-system {
  position: relative;
  margin: auto;
  width: 600px;
  height: 600px;
  overflow: hidden;
  padding: 50px;
}
#neptune-circle {
  position: absolute;
  width: 600px;
  height: 600px;
  background-color: transparent;
  border: 1px solid #fff;
  border-radius: 100%;
  animation: rotation 70s linear infinite;
}
#neptune-circle:after {
  position: absolute;
  width: 10px;
  height: 7px;
  border-radius: 100%;
  background-color: #9932CC;
  border-color: #FFF8DC;
  border-style: solid;
  border-width: 4px 1px 1px 1px;
  content: '';
  left: 300px;
  top: -5px;
}
#uranus-circle {
  position: absolute;
  width: 530px;
  height: 530px;
  background-color: transparent;
  border: 1px solid #ff0;
  border-radius: 100%;
  left: 85px;
  top: 85px;
  animation: rotation 60s linear infinite;
}
#uranus-circle:after {
  position: absolute;
  width: 12px;
  height: 9px;
  border-radius: 100%;
  border-color: #ff0;
  border-style: solid;
  border-width: 4px 1px 1px 1px;
  background-color: #00B9B9;
  content: '';
  left: 265px;
  top: -7px;
}
#saturn-circle {
  position: absolute;
  width: 460px;
  height: 460px;
  background-color: transparent;
  border: 1px solid #fff;
  border-radius: 100%;
  left: 120px;
  top: 120px;
  animation: rotation 50s linear infinite;
}
#saturn-circle:before {
  position: absolute;
  width: 13px;
  height: 9px;
  border-radius: 100%;
  background-color: #F0FFF0;
  border-color: #ff0;
  border-style: solid;
  border-width: 5px 1px 1px 1px;
  content: '';
  left: 230px;
  top: -6px;
}
#saturn-circle:after {
  position: absolute;
  width: 25px;
  height: 5px;
  border-radius: 100%;
  background-color: transparent;
  border-color: #FF0000;
  border-style: solid;
  border-width: 1px 1px 3px 1px;
  content: '';
  left: 224px;
  top: -2px;
}
#jupiter-circle {
  position: absolute;
  width: 360px;
  height: 360px;
  background-color: transparent;
  border: 1px solid  #FFFF00;
  border-radius: 100%;
  left: 170px;
  top: 170px;
  animation: rotation 40s linear infinite;
}
#jupiter-circle:after {
  position: absolute;
  width: 20px;
  height: 15px;
  border-radius: 100%;
  background-color: #FF0000;
  border-color: #ff0;
  border-style: solid;
  border-width: 6px 1px 1px 1px;
  content: '';
  left: 170px;
  top: -10px;
}
#mars-circle {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: transparent;
  border: 1px solid #ff0;
  border-radius: 100%;
  left: 250px;
  top: 250px;
  animation: rotation 30s linear infinite;
}
#mars-circle:after {
  position: absolute;
  width: 8px;
  height: 6px;
  border-radius: 100%;
  background-color: #fff;
  border-color: #600;
  border-style: solid;
  border-width: 3px 1px 1px 1px;
  content: '';
  left: 100px;
  top: -5px;
}
#earth-circle {
  position: absolute;
  width: 150px;
  height: 150px;
  background-color: transparent;
  border: 1px solid #fff;
  border-radius: 100%;
  left: 275px;
  top: 275px;
  animation: rotation 20s linear infinite;
}
#earth-circle:before {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background-color: #DDA0DD;
  content: '';
  left: 66px;
  top: -2px;
  transform-origin: 15px;
  animation: rotation 2s linear infinite;
}
#earth-circle:after {
  position: absolute;
  width: 8px;
  height: 6px;
  border-radius: 100%;
  background-color: #ff0;
  border-color: #DDA0DD;
  border-style: solid;
  border-width: 3px 1px 1px 1px;
  content: '';
  left: 75px;
  top: -5px;
}
#venus-circle {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: transparent;
  border: 1px solid #DDA0DD;
  border-radius: 100%;
  left: 300px;
  top: 300px;
  animation: rotation 10s linear infinite;
}
#venus-circle:after {
  position: absolute;
  width: 9px;
  height: 6px;
  border-radius: 100%;
  background-color: #DDA0DD;
  border-color:  #F5FFFA;
  border-style: solid;
  border-width: 4px 1px 1px 1px;
  content: '';
  left: 50px;
  top: -6px;
}
#mercury-circle {
  position: absolute;
  width: 70px;
  height: 70px;
  background-color: transparent;
  border: 1px solid #DDA0DD;
  border-radius: 100%;
  left: 315px;
  top: 315px;
  animation: rotation 5s linear infinite;
}
#mercury-circle:after {
  position: absolute;
  width: 5px;
  height: 4px;
  border-radius: 100%;
  background-color:  #F5FFFA;
  border-color: #623100;
  border-style: solid;
  border-width: 2px 1px 1px 1px;
  content: '';
  left: 35px;
  top: -3px;
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}}
</style> 

<div id="solar-system">
<div id="neptune-circle">
</div>
<div id="uranus-circle">
</div>
<div id="saturn-circle">
</div>
<div id="jupiter-circle">
</div>
<div id="mars-circle">
</div>
<div id="earth-circle">
</div>
<div id="venus-circle">
</div>
<div id="mercury-circle">
</div>

<div id="sun" class="circle">
</div>
<div id="earth-orbit" class="orbit-border circle">
<div id="earth" class="circle">
</div>
<div id="moon-orbit" class="orbit-border circle">
<div id="moon" class="circle">
</div>
</div>
</div>
<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>

<div class="ap" id="ap">
<div align="center">
<a href="http://myscript2010s.blogspot.co.id"target="_blank"title="Myscript2010s"> 
<h2>
<font size="2" color="white"face="vivaldi"> Myscript2010</font></2></a>  
</div>
<header> 
<a href="http://sample-mys2010.blogspot.co.id"target="_blank"title="Myscript2010s"><span style="color:white"><b>LET'S STUDY</b>
</div>
</a> 
</header>

Solar System Code by. Arien
Solar System Orbit Code by. Johan Karlsson

Design code is edited by. Mys2010 In Codepen

DEMOSHOW

If you want to directly copy and paste you canDownload Here Solar System

Category: Solar System

Tweet