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: Solar System 3D Animation

Map Animation with Orbital CSS

Memasang Kode Map Animation with Orbital 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: #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%); 
}

.button {
background: #000;
display: block;
padding: 1.4em 1.7em;
font-size: .1em;
text-align: center;
}
.button:hover {
background: #fc7f1d;
}
.nav {
position: fixed;
z-index: 8;
bottom: 0;
left: 0;
}
.next {
background: rgba(0, 0, 0, 0.5);
padding: 2px;
text-align: center;
font-size: .6em;
float: left;
}
.next em {
display: block;
opacity: .5;
padding: 35px;
text-transform: uppercase;
letter-spacing: 2px;
}
.next img {
opacity: .8;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
}
.next:hover {
background: #000;
}
.next:hover img {
opacity: 1;
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
filter: grayscale(0%);
}
.highlight {
position: fixed;
top: 200px;
left: 100px;
z-index: 5;
}
.highlight span {
content: ' ';
width: 1px;
display: block;
border-bottom: 2px solid yellow;
position: absolute;
top: 9px;
left: 19px;
height: 1px;
overflow: hidden;
transition: all .4s;
}
.highlight em {
display: block;
height: 24px;
width: 24px;
border-radius: 50%;
border: 2px solid yellow;
}
.featured-story .thumb {
display: block;
text-align: center;
position: relative;
}
.featured-story .thumb img {
width: 100%;
}
.featured-story .thumb:after {
content: '\f144';
font-family: 'FontAwesome';
display: block;
color: rgba(255, 255, 255, 0.7);
font-size: 2em;
position: absolute;
bottom: 20px;
left: 20px;
z-index: 2;
}
.featured-story .title {
position: relative;
margin: 11px;
z-index: 3;
float: right;
width: 283px;
color: green;
border: 4px solid #ff0;
transition: all .3s ease-in;
}
.featured-story h1 {
font-size: 2em;
margin: 40px 30px 10px;
}
.featured-story p {
font-size: .8em;
line-height: 1.4em;
margin: 0 30px 40px;
}
.bg {
position: fixed;
top: 0;
left: 10;
z-index: 1;
transition: all 2s ease-out;
}

.container {
left: -410px;
  position: relative;
  width: 540px;
  margin: -144px auto;
  text-align: center;
  height: 600px;
}
.planets div {
  display: inline-block;
  position: absolute;
  /*box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);*/
}
.ring {
  border: 1px dashed rgba(255, 255, 255, 0.5);   
  transform: rotate(0);    
  box-shadow: none;
} 
.one {
  width: 300px;
  height: 300px;
  border-radius: 200px;
  left: -110px;
  top: -110px;
}
.two {
  width: 52px;
  height: 52px;
  border-radius: 50px;
  background: #8edd6f;
  top: 16px;
  left: -132px;
  transform-origin: 26px 26px;
}
.two > .ring {
  width : 120px;
  height: 120px;
  border-radius: 120px;
  top: -35px;
  left: -35px;
}
.three {
  width: 30px;
  height: 30px;
  border-radius: 25px;
  background: #5be6ff;
  top: 25px;
  right: -122px;
  transform-origin: 15px 15px;  
}
.three > .ring {
  width : 77px;
  height: 77px;
  border-radius: 80px;
  top: -22px;
  left: -22px;
}
.four {
  width: 16px;
  height: 16px;
  border-radius: 16px;
  background: #dda1f9;
  top: -18px;
  left: -18px;
  transform-origin: 8px 8px;
}
.five {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: #b58579;
  top: -30px;
  left: -30px;
  transform-origin: 5px 5px; 
}
.six {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #7dfffd;
  top: -50px;
  left: -50px;
  transform-origin: 10px 10px; 
}
.seven {
  width: 30px;
  height: 30px;
  border-radius: 50px;
  background: #fff;
  top: -30px;
  left: -30px;
  transform-origin: 15px 15px; 
}
.slow > .ring {
  width : 117px;
  height: 117px;
  border-radius: 80px;
  top: -42px;
  left: -42px;
}
.fast > .ring {
  width : 152px;
  height: 152px;
  border-radius: 80px;
  top: -62px;
  left: -62px;
}
.sun {
  width: 80px;
  height: 80px;
  border-radius: 80px;
  top: 170px;
  left: 240px;
  display: inline-block;
  position: absolute;
  box-shadow: 0 0 120px #f1da36, 0 0 60px #f2ad00, 0 0 10px #c96800, 0 0 200px #feff8f;
  background: radial-gradient(center, ellipse cover, #fcf3a1   
   0%,#f1da36 100%);
    box-shadow: 0 0 120px #f1da36, 0 0 60px #f2ad00, 0 0 10px #c96800, 0 0 200px #feff8f;
  background: -moz-radial-gradient(center, ellipse cover, #fcf3a1 0%, #f1da36 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#fcf3a1), color-stop(100%,#f1da36)); 
  background: -webkit-radial-gradient(center, ellipse cover, #fcf3a1 0%,#f1da36 100%);
  background: -o-radial-gradient(center, ellipse cover, #fcf3a1 0%,#f1da36 100%); 
  background: -ms-radial-gradient(center, ellipse cover, #fcf3a1      0%,#f1da36 100%);
}
.sun {
  animation: spin 100s infinite linear; 
}  
.two {
  animation: spin 50s infinite linear; 
}
.three {
  animation: spin 70s infinite linear; 
}
.four {
  animation: spin 50s infinite linear; 
}
.slow {
  animation: spin 10s infinite linear; 
}
.fast {
  animation: spin 20s infinite linear; 
}

@keyframes spin {  
from {  
  transform: rotate(0deg);  
}  
to {  
  transform: rotate(360deg);  
   }  
}

#original-link, #load-song, #credits, #tested {
    position: absolute;
    font-size: 11px;
    margin: 402px
}
#original-link, #load-song div {
    text-decoration: underline;
    cursor: pointer
}
#load-song, #credits {
    text-align: right;
    right: 0
}
 #tested, #credits {
    bottom: 0
}</style> 

<div class="content">
<div class="highlight hide">
<span>&nbsp;</span>
<em>&nbsp;</em>
</div>
<div class="featured-story">
<div class="title hide">
<a class="thumb" href="#"><img src="" width="320" height="180" /></a>
<h1>
</h1>
<p>
</p>

<a class="button" href="https://www.google.com/maps/dir/-6.8851741,107.5182383/-6.8877379,107.5220618/@-8.1596713,62.1344764,19398036m/data=!3m1!1e3!4m2!4m1!3e2"target="_blank" title="Alamat"> <img alt="PageRank BLOG" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ0EWe5LMLUDEd3U1DnqR-iI6f8GeV1p6wiANLns4J4HBnfzbSWBTp1JZAa6TW870MGgilxyDzU1p1efAXrQJTnciBrN1LvSH6YQJTmgVmJRnsH127dWsWfkAPDynah53KzdiU64O1TIk/s1600-r/Globe_mys2010.gif" height="29" name="e902" width="28"></a>
</div>
</div>
<div class="bg">
<img alt="PageRank BLOG" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipeaqvjoLwbBLAnVTiUW_SCFT2Ph2oPhndR4rgIavJzUUCw9ZJd02AAzcZ1Hx0ftmqs9MbvO2uQ7545TNngXXhdQ6FkUHjsqicAmdk8HSAElpkhD-SCHskRAyMoshNR9DNsKRAbf4MwXs/s1600/saturnus-mys2010.gif" height="60" name="e902" width="60">
<img alt="PageRank BLOG" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYU9knzsUy_WTMbTqQtVoIqUYYPQGs6RJ79nbf7952L6gFmE8rlDZtquWBM6GsZd6giU2hOWA5PIvFc4M4eE8F7WKg_AwqqkLkZIdmngepseNRtAs-dV5o_d5cj5l_yHOgpvez1b5mYi0/s1600/yellowBlue-mys2010.gif" height="50" name="e902" width="50">

<img alt="PageRank BLOG" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKZuJaMn1GXbftO5tAOmjD6m4dPb1LYrYEh-JJfsVCmad_9E47iO_GWIcab2_sHZPKy4cb0b0oi2767pqhNgr5tuTIggJ7YeUSxqf_L0NgvZHE8g21KOgVcifxWwfNgqzYkKFCnbvbRxQ/s1600/Satur-mys2010.gif" height="30" name="e902" width="40"> <img alt="PageRank BLOG" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju-fqbdg_kxBByYAPobBRRsDkSwyFTm1MvJB_AvNTlXAQqgWCMhwQeIVn9mS4eXvMrUusdLZguZowHcT8-jFFAmTxjqc2P-Yt__SoauygX68FI-BqBUIH8WmrxgvZeg6dAxwB2Zusb2mk/s1600/speedRotate-mys2010s.gif" height="25" name="e902" width="25"><img alt="PageRank BLOG" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGKXy63avRSmVy0YO34O5u8DBwefJexrEC0GGPeKwr_yGMuVW5r1RjoRAgoHMSBM-5zCFgw-Ji-R6c5Wb9PtRkYh1JLNk6Af9giqcimZos6R2MlHz9CWFAVT4l7kMrX3KvxtIY_5e44bg/s1600/ring-mys2010.gif" height="45" name="e902" width="45">
</div>
</div>

<div id="credits">
SOURCE CODE &nbsp; &nbsp;<a href="http://codepen.io/willpaige/full/ImjGq" target="_blank" title="Will Paige"> <span style="color:#ff0">ORBITAL CSS  </a>&nbsp; &nbsp;  </font></a> <a href="http://codepen.io/kristenzirkler/pen/duarn" target="_blank" title="Kristen Zirkler"> <span style="color:#ff0"> &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp;&nbsp; &nbsp; MAP ANIMATION  </a>&nbsp; &nbsp; IN CODEPEN </font></a> 
</div>


<body>
<div class="bg">
</div>
<div class="container">
<div class="planets sun">
<img alt="PageRank BLOG" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJa5NbZusqT0gsWRociN5jpyX-0GXXNVSqh_MXkdzUuWOL8zRhOf9IbscMgexkUByAFz2uXfgf-7aV-2KhxK6GmmshgRK6jQ8KYsHm_Q1QNG103uzo1lT1rwk1m2dsUq9bNRYAWojVXos/s1600/GlobeAnimated-mys2010.gif" height="98" name="e902" width="98">
<div class="one ring">
</div>
<div class="two">

<div class="ring">
</div>
<div class="seven">
</div>
</div>

<div class="three">
<div class="ring">
</div>
<div class="four">
</div>
</div>

<div class="three slow">
<div class="ring">
</div>
<div class="five">
</div>
</div>

<div class="three fast">
<div class="ring">
</div>
<div class="six">
</div>
</div>
</div>
</div>

<div class="nav">
<a href="#" class="next" data-city="Cibeber Cimahi"><span><img src="https://cdn0.iconfinder.com/data/icons/interaction-flat-1/60/circle-arrow-repeat-exclamation-128.png" width="50" height="50" /><em>Myscript2010</em></span></a><a href="https://www.google.com/maps/dir/-6.8953737,107.5198196/Jl.+Raya+Cibeber,+Cibeber,+Cimahi+Sel.,+Kota+Cimahi,+Jawa+Barat,+Indonesia/@-12.8996916,149.5666948,19380799m/data=!3m1!1e3!4m8!4m7!1m0!1m5!1m1!1s0x2e68e5044118a5e1:0x644036447f9cf5a4!2m2!1d107.5194901!2d-6.8950008"target="_blank" title="Alamat"><span><img src="http://icons.iconarchive.com/icons/tatice/operating-systems/128/Globe-icon.png" width=" 35" height="35" /></span></a> Google Map</a>
</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="https://www.embed-map.com"target="_blank"title="Myscript2010s"><span style="color:white"><b>EMBED MAP</b>
</div>
</a> 
</header>

<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>$(document).ready(function () {
    loadCity('cibeber-cimahi');
    $('.hide').removeClass('hide');
});
$('.next').click(function () {
    var cityAlias = $(this).data('city');
    loadCity(cityAlias);
});
function loadCity(cityAlias) {
    var cityID, cityName, cityXCoord, cityYCoord, cityBlurb;
    switch (cityAlias) {
    case 'cibeber-cimahi':
        cityID = 6;
        cityName = 'Cibeber Cimahi';
        cityXCoord = 391;
        cityYCoord = 342;
        cityBlurb = 'These directions are for planning purposes only. You may find that construction projects, traffic, weather, or other events may cause conditions to differ from the map results, ';    
    }
    cityXCoord = cityXCoord - 100;
    cityYCoord = cityYCoord - 200;
    $('.title').hide();
    $('.highlight span').width(1);
    $('.bg').css({
        top: '-' + cityYCoord + 'px',
        left: '-' + cityXCoord + 'px'
    });
    $('.title').fadeTo(1000, 0.2, function () {
        $('.thumb img').attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYVTviz2VBJVM3paiubzp5E8wCDW3s_6VNIAv8d2UhXeXkqLyJCSQKol2hyIaJnv5edZLZOVAINI5LdgiXDVR0Ks6Hb3T038HboqEVng0VpF-IS3k4OJuoO-2pDUXuFTySiVcqPQlQxH8/s1600/jl2-mys2010.png' + cityID);
        $('.featured-story h1').text(cityName);
        $('.featured-story p').text('These directions are for planning purposes only. You may find that construction projects, traffic, weather, or other events may cause conditions to differ from the map results,  ');
        var contentWidth = $('.content').width();
        $('.highlight span').width(contentWidth - 455);
        $('.title').fadeTo('1000', 1);
    });
}
 
</script>

Orbital Css Code by. Will Paige
Map Animation Code by. Kristen Zirkler

Design code is edited by. Mys2010 In Codepen

DEMOSHOW

If you want to directly copy and paste you canDownload Here Map Animations orbital

Category: Map Animation with Orbital CSS

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

Text Animation Laser

Memasang Kode Text Animation Laser
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:black;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:  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;  
}

.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%); 
}

.circle {
  position: relative;
  border: 4px solid #8B0000;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  background: firebrick;
  border-radius: 50%;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMbrnTUwnPPlXFL5KmDRBTpg_PPoc3W3dpB9JklUMQlZYUJvWU75HTc6uiB7SzfOkPOnKR-bFxV_-9MWAfDe-sr63NyJfzhlTZZvScGKhYQFawp3mKBxwE1eFVAUQle94gJJw-EEVOPGU/s1600/image-mys2010s.png);
  background-size: cover;
  box-shadow: 0 0 300px -50px #ffe766;
}
.circle .rotate {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotate 120s infinite linear;
}
.circle span {
  position: absolute;
  top: -40px;
  left: calc(50% - 3.75px);
  display: block;
  width: 7.5px;
  height: 190px;
  font-family: Special Elite;
  font-size:  1rem;
  font-weight: 100;
font-weight: bold;
  text-transform: uppercase;
  color: #f0f;
  transform-origin: bottom center;
}
.circle span:nth-child(1) {
  transform: rotate(6.2deg);
}
.circle span:nth-child(2) {
  transform: rotate(12.4deg);
}
.circle span:nth-child(3) {
  transform: rotate(18.6deg);
}
.circle span:nth-child(4) {
  transform: rotate(24.8deg);
}
.circle span:nth-child(5) {
  transform: rotate(31deg);
}
.circle span:nth-child(6) {
  transform: rotate(37.2deg);
}
.circle span:nth-child(7) {
  transform: rotate(43.4deg);
}
.circle span:nth-child(8) {
  transform: rotate(49.6deg);
}
.circle span:nth-child(9) {
  transform: rotate(55.8deg);
}
.circle span:nth-child(10) {
  transform: rotate(62deg);
}
.circle span:nth-child(11) {
  transform: rotate(68.2deg);
}
.circle span:nth-child(12) {
  transform: rotate(74.4deg);
}
.circle span:nth-child(13) {
  transform: rotate(80.6deg);
}
.circle span:nth-child(14) {
  transform: rotate(86.8deg);
}
.circle span:nth-child(15) {
  transform: rotate(93deg);
}
.circle span:nth-child(16) {
  transform: rotate(99.2deg);
}
.circle span:nth-child(17) {
  transform: rotate(105.4deg);
}
.circle span:nth-child(18) {
  transform: rotate(111.6deg);
}
.circle span:nth-child(19) {
  transform: rotate(117.8deg);
}
.circle span:nth-child(20) {
  transform: rotate(124deg);
}
.circle span:nth-child(21) {
  transform: rotate(130.2deg);
}
.circle span:nth-child(22) {
  transform: rotate(136.4deg);
}
.circle span:nth-child(23) {
  transform: rotate(142.6deg);
}
.circle span:nth-child(24) {
  transform: rotate(148.8deg);
}
.circle span:nth-child(25) {
  transform: rotate(155deg);
}
.circle span:nth-child(26) {
  transform: rotate(161.2deg);
}
.circle span:nth-child(27) {
  transform: rotate(167.4deg);
}
.circle span:nth-child(28) {
  transform: rotate(173.6deg);
}
.circle span:nth-child(29) {
  transform: rotate(179.8deg);
}
.circle span:nth-child(30) {
  transform: rotate(186deg);
}
.circle span:nth-child(31) {
  transform: rotate(192.2deg);
}
.circle span:nth-child(32) {
  transform: rotate(198.4deg);
}
.circle span:nth-child(33) {
  transform: rotate(204.6deg);
}
.circle span:nth-child(34) {
  transform: rotate(210.8deg);
}
.circle span:nth-child(35) {
  transform: rotate(217deg);
}
.circle span:nth-child(36) {
  transform: rotate(223.2deg);
}
.circle span:nth-child(37) {
  transform: rotate(229.4deg);
}
.circle span:nth-child(38) {
  transform: rotate(235.6deg);
}
.circle span:nth-child(39) {
  transform: rotate(241.8deg);
}
.circle span:nth-child(40) {
  transform: rotate(248deg);
}
.circle span:nth-child(41) {
  transform: rotate(254.2deg);
}
.circle span:nth-child(42) {
  transform: rotate(260.4deg);
}
.circle span:nth-child(43) {
  transform: rotate(266.6deg);
}
.circle span:nth-child(44) {
  transform: rotate(272.8deg);
}
.circle span:nth-child(45) {
  transform: rotate(279deg);
}
.circle span:nth-child(46) {
  transform: rotate(285.2deg);
}
.circle span:nth-child(47) {
  transform: rotate(291.4deg);
}
.circle span:nth-child(48) {
  transform: rotate(297.6deg);
}
.circle span:nth-child(49) {
  transform: rotate(303.8deg);
}
.circle span:nth-child(50) {
  transform: rotate(310deg);
}
.circle span:nth-child(51) {
  transform: rotate(316.2deg);
}
.circle span:nth-child(52) {
  transform: rotate(322.4deg);
}
.circle span:nth-child(53) {
  transform: rotate(328.6deg);
}
.circle span:nth-child(54) {
  transform: rotate(334.8deg);
}
.circle span:nth-child(55) {
  transform: rotate(341deg);
}
.circle span:nth-child(56) {
  transform: rotate(347.2deg);
}
.circle span:nth-child(57) {
  transform: rotate(353.4deg);
}
.circle span:nth-child(58) {
  transform: rotate(359.6deg);
}
.circle span:nth-child(59) {
  transform: rotate(365.8deg);
}
.circle span:nth-child(60) {
  transform: rotate(372deg);
}
.circle span:nth-child(61) {
  transform: rotate(378.2deg);
}
.circle span:nth-child(62) {
  transform: rotate(384.4deg);
}
.circle span:nth-child(63) {
  transform: rotate(390.6deg);
}
.circle span:nth-child(64) {
  transform: rotate(396.8deg);
}
.circle span:nth-child(65) {
  transform: rotate(403deg);
}
.circle span:nth-child(66) {
  transform: rotate(409.2deg);
}
.circle span:nth-child(67) {
  transform: rotate(415.4deg);
}
.circle span:nth-child(68) {
  transform: rotate(421.6deg);
}
.circle span:nth-child(69) {
  transform: rotate(427.8deg);
}
.circle span:nth-child(70) {
  transform: rotate(434deg);
}
.circle span:nth-child(71) {
  transform: rotate(440.2deg);
}
.circle span:nth-child(72) {
  transform: rotate(446.4deg);
}
.circle span:nth-child(73) {
  transform: rotate(452.6deg);
}
.circle span:nth-child(74) {
  transform: rotate(458.8deg);
}
.circle span:nth-child(75) {
  transform: rotate(465deg);
}
.circle span:nth-child(76) {
  transform: rotate(471.2deg);
}
.circle span:nth-child(77) {
  transform: rotate(477.4deg);
}
.circle span:nth-child(78) {
  transform: rotate(483.6deg);
}
.circle span:nth-child(79) {
  transform: rotate(489.8deg);
}
.circle span:nth-child(80) {
  transform: rotate(496deg);
}

@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(-360deg);
  }
}
body {
  margin-top: 90px;
  background: #000;
}

canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #;
}</style>

<div class="circle">
<div class="rotate">
</span><span>&#9829;</span><span> </span><span>m</span><span>y</span><span>s</span><span> </span><span>2</span><span>0</span><span>1</span><span>0</span><span></span><span>l</span><span>e</span><span>a</span><span>r</span><span>n</span><span> </span><span>h</span><span>o</span><span>w</span><span> </span><span>t</span><span>o</span><span> </span><span>d</span><span>e</span><span>s</span><span>i</span><span>g</span><span>n</span><span> </span><span>&#38;</span><span> </span> <span>b</span> <span>u</span><span>i</span><span>l</span><span>d</span><span> </span><span>b</span><span>e</span><span>a</span><span>u</span><span>t</span><span>i</span><span>f</span><span>u</span><span>l</span><span> </span><span>w</span><span>e</span><span>b</span> <span>s</span><span>i</span><span>t</span><span>e</span><span>s</span><span> 
</div>
</div>
<canvas id="canvas"></canvas>
<canvas id="canvas2"></canvas>

<div class="ap" id="ap">
<div align="center">
<a href="http://myscript2010s.blogspot.co.id/p/statistik-home-page.html"title="Myscript2010s"> 
<h2>
<font size="2" color="orange"face="arial">Myscript2010</2></a>  
</div>
<header> 
<a href="http://sample-mys2010.blogspot.co.id/2016/05/text-animation-laser.html" target="_blank" title="Myscript2010s"><span style="color:white"><b>LET'S STUDY</b>
</div>
</header

<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>

<script>
"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Particle = function () {
  function Particle(x, y, size) {
    _classCallCheck(this, Particle);

    this.speed = 0.6;
    this.x = x;
    this.y = y;
    this.vx = (Math.random() - 0.5) * this.speed;
    this.vy = (Math.random() - 0.5) * this.speed;
    this.opacity = 1;
    this.size = size;
  }

  Particle.prototype.draw = function draw(context) {
    this.opacity -= this.speed / 200;
    context.fillStyle = this.color();
    context.fillRect(this.x, this.y, this.size, this.size);
  };

  Particle.prototype.move = function move() {
    this.x += this.vx;
    // y speed is influenced by "gravity"
    this.y += this.vy + (1 - this.opacity) * this.speed;
  };

  Particle.prototype.color = function color() {
    return "rgba(0, 255, 0, " + this.opacity + ")";
  };

  return Particle;
}();

var Laser = function () {
  function Laser(x, y) {
    _classCallCheck(this, Laser);

    this.x = x;
    this.y = y;
    this.steps = [];
    this.particles = [];
  }

  Laser.prototype.drawTo = function drawTo(x, y, ctx) {
    ctx.beginPath();
    ctx.moveTo(this.x, this.y);
    ctx.lineTo(x, y);
    ctx.stroke();
    ctx.fillStyle = "red";
    ctx.fillRect(x, y, 5, 5);
  };

  Laser.prototype.drawEnd = function drawEnd(ctx) {
    var p = this.steps.shift();
    if (p !== undefined) {
      this.drawTo(p[0], p[1], ctx);
    } else {
      var index = this.particles.length;
      // Loop through backwards so we can remove
      // particles from the array inside the loop.
      while (index--) {
        var p = this.particles[index];
        p.move();
        if (p.opacity < 0 || p.x < 0 || p.x > this.w || p.y < 0 || p.y > this.h) {
          this.particles.splice(index, 1);
        } else {
          p.draw(ctx);
        }
      }
    }
  };

  Laser.prototype.endFrom = function endFrom(x0, y0) {
    var nrOfSteps = 800;
    var i = nrOfSteps;
    while (i--) {
      var x = this.x + i * (x0 - this.x) / nrOfSteps + Math.cos(i / 10) * i / 4;
      var y = this.y + i * (y0 - this.y) / nrOfSteps + Math.sin(i / 10) * i / 4;
      this.steps.push([x, y]);
      if (i < 100) {
        this.particles.push(new Particle(this.x, this.y, 2));
      }
    }
  };

  return Laser;
}();

var LaserWriter = function () {
  function LaserWriter(canvasId, canvas2Id) {
    _classCallCheck(this, LaserWriter);

    // The first canvas holds the text being drawn (static).
    var canvas = document.getElementById(canvasId);
    //  The second canvas holds the laser beam and particles
    //  (animated).
    var canvas2 = document.getElementById(canvas2Id);
    this.ctx = canvas.getContext("2d");
    this.ctx2 = canvas2.getContext("2d");
    this.w = canvas.width = canvas2.width = 900;
    this.h = canvas.height = canvas2.height = 500;
    this.tick = 0;
    this.pointsIndex = 0;
    this.points = [];
    this.particles = [];
    // All the points that make up the whole word
    this.size = 3;
    this.startX = 0;
    this.laserStart = { x: 300, y: 50 };
    this.x = 0;
    this.y = 0;
  }

  LaserWriter.prototype.init = function init(text, size) {
    this.ctx.font = size + "px serif";
    // Draw black text on the canvas temporarily
    this.startX = (this.w - this.ctx.measureText(text).width * 3) * 0.5;
    this.ctx.fillText(text, 1, 100);
    var width = 500;
    var height = 300;
    var image = this.ctx.getImageData(0, 0, width, height);
    var buffer32 = new Uint32Array(image.data.buffer);
    for (var x = 0; x < width; x++) {
      for (var y = 0; y < height; y++) {
        // The buffer is linear, y*w+x is a trick
        // to calculate the linear index.
        if (buffer32[y * width + x]) {
          // There is a pixel here, add a point
          this.points.push([x, y]);
        }
      }
    }

    // Clear the text once, we will just be adding
    // to this canvas from now on (no clearing).
    this.ctx.clearRect(0, 0, this.w, this.h);
    this.ctx.fillStyle = "#000080";

    // For the laser
    this.ctx2.strokeStyle = "blue";
    this.ctx2.lineCap = "round";
    this.ctx2.lineWidth = 4;

    this.laser = new Laser(this.laserStart.x, this.laserStart.y);
  };

  LaserWriter.prototype.draw = function draw() {
    var _this = this;

    this.ctx2.clearRect(0, 0, this.w, this.h);

    // Continue drawing text?
    if (this.pointsIndex < this.points.length) {
      // Ok, we are not done

      // Draw the text, one point at a time
      var p = this.points[this.pointsIndex];
      this.x = p[0] * this.size + this.startX;
      this.y = p[1] * this.size + 170;
      this.drawPointAt(this.x, this.y);

      //this.drawLaserTo(x, y);
      this.laser.drawTo(this.x, this.y, this.ctx2);

      // Just add a particle every other tick
      if (this.tick % 2 === 0) {
        var particle = new Particle(this.x, this.y, this.size);
        this.particles.push(particle);
      }
    } else if (this.pointsIndex === this.points.length) {
      this.laser.endFrom(this.x, this.y);
    } else {
      this.laser.drawEnd(this.ctx2);
    }

    this.drawParticles();

    this.pointsIndex++;
    this.tick++;

    // Keep the animation going a while after we have
    // drawn all the text to let the last particles
    // fall off the screen and the laser end animation
    // run.
    if (this.pointsIndex < this.points.length + 10000) {
      // Draw three steps (ticks) then redraw screen
      if (this.tick % 3 === 0) {
        requestAnimationFrame(function () {
          return _this.draw();
        });
      } else {
        this.draw();
      }
    }
  };

  LaserWriter.prototype.drawPointAt = function drawPointAt(x, y) {
    this.ctx.beginPath();
    this.ctx.arc(x, y, this.size * 1, 0, Math.PI * 2, false);
    this.ctx.fill();
  };

  LaserWriter.prototype.drawParticles = function drawParticles() {
    var index = this.particles.length;
    // Loop through backwards so we can remove
    // particles from the array inside the loop.
    while (index--) {
      var p = this.particles[index];
      p.move();
      if (p.opacity < 0 || p.x < 0 || p.x > this.w || p.y < 0 || p.y > this.h) {
        this.particles.splice(index, 1);
      } else {
        p.draw(this.ctx2);
      }
    }
  };

  return LaserWriter;
}();

var laserWriter = new LaserWriter("canvas", "canvas2");
laserWriter.init("CIBEBER CIMAHI", 20);
laserWriter.draw();
 
</script>

Text on a Circle Code by. pzin
Text Laser Code by. Johan Karlsson

Design code is edited by. Mys2010 In Codepen

DEMOSHOW

If you want to directly copy & paste you canDownload Here Text & Laser Animation

Category: Text Animation Laser

Angular interactive

Memasang Kode Angular interactive box-model diagram
Kode ini adalah petunjuk tentang ukuran Heigh Width Margin dan Padding
untuk penerapannya 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">
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  0px 0;
  position: fixed;
  top: 0;
  width: 100%; 
background: -moz-linear-gradient(top,  #444 2%, #111  70%);
}
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 90px;
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%, #333 50%, transparent 90%); 
}

body::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:   #FF69B4 ;
  -webkit-animation: overlay infinite 12s;
          animation: overlay infinite 12s;
  content: '';
}
@-webkit-keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}

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

      html {
  box-sizing: border-box;
}

*, *::after, *::before {
  box-sizing: inherit;
}

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

html, body {
  height: 100%;
}

a img {
  border: none;
}

blockquote {
  quotes: none;
}

blockquote:before, blockquote:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-size: 75%;
}
@media screen and (min-width: 40em) {
  html {
    font-size: 87.5%;
  }
}
@media screen and (min-width: 50em) {
  html {
    font-size: 93.75%;
  }
}
@media screen and (min-width: 64em) {
  html {
    font-size: 106.25%;
  }
}
@media screen and (min-width: 100em) {
  html {
    font-size: 118.75%;
  }
}

body {
  background-color: #242930;
  color: #808386;
  overflow-x: hidden;
  font-family: 'Source Sans Pro','Avenir Next', AvenirNext;
  font-style: normal;
  font-weight: 400;
  line-height: 2rem;
  font-size: 1.33333rem;
}
@media screen and (min-width: 40em) {
  body {
    font-size: 1.21429rem;
  }
}
@media screen and (min-width: 50em) {
  body {
    font-size: 1.2rem;
  }
}
@media screen and (min-width: 64em) {
  body {
    font-size: 1.17647rem;
  }
}
@media screen and (min-width: 100em) {
  body {
    font-size: 1.15789rem;
  }
}

main {
  margin: 20px auto;
  padding: 0 20px;
  max-width: em(1088);
  margin-left: auto;
  margin-right: auto;
}
main::after {
  clear: both;
  content: "";
  display: table;
}
@media screen and (max-width: 550px) {
  main {
    padding: 0;
    margin-top: 10px;
  }
}

@media screen and (min-width: 790px) {
  .box-model {
    float: left;
    display: block;
    margin-right: 4.34783%;
    width: 100%;
  }
  .box-model:last-child {
    margin-right: 0;
  }
}
@media screen and (min-width: 950px) {
  .box-model {
    float: left;
    display: block;
    margin-right: 2.12766%;
    width: 57.44681%;
  }
  .box-model:last-child {
    margin-right: 0;
  }
}
@media screen and (min-width: 1245px) {
  .box-model #content, .box-model #generated-size {
    float: left;
    display: block;
    margin-right: 3.7037%;
    width: 55.55556%;
  }
  .box-model #content:last-child, .box-model #generated-size:last-child {
    margin-right: 0;
  }
}
@media screen and (min-width: 1245px) {
  .box-model #generated-size {
    float: left;
    display: block;
    margin-right: 3.7037%;
    width: 40.74074%;
    margin-right: 0;
  }
  .box-model #generated-size:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 790px) {
  .controls {
    float: left;
    display: block;
    margin-right: 4.34783%;
    width: 100%;
  }
  .controls:last-child {
    margin-right: 0;
  }
}
@media screen and (min-width: 950px) {
  .controls {
    float: left;
    display: block;
    margin-right: 2.12766%;
    width: 40.42553%;
  }
  .controls:last-child {
    margin-right: 0;
  }
}

/* ************************************************************ */
.box-padding:hover .box-property-vertical,
.box-padding:hover .box-property-horizontal, .box-border:hover .box-property-vertical,
.box-border:hover .box-property-horizontal, .box-margin:hover .box-property-vertical,
.box-margin:hover .box-property-horizontal, .box-inner:hover .box-property-vertical,
.box-inner:hover .box-property-horizontal {
  opacity: 1;
}

/*****************************************
* CONTROL STYLES
******************************************/
fieldset {
  border: 1px solid #343434;
  padding: 0 10px 5px;
}

#generated-size fieldset {
  min-height: 114px;
}

legend {
  text-transform: uppercase;
  font-weight: 300;
  font-size: 1.3em;
}

#content legend {
  color: #63BCF8;
}

#padding legend {
  color: #C5D936;
}

#border legend {
  color: #F8CC63;
}

#margin legend {
  color: #DE6A63;
}

#box-sizing legend {
  color: #8ADFE0;
}

#generated-size legend {
  color: #63BCF8;
}

label, .value, .toggle-text {
  font-size: 60%;
  display: inline-block;
  white-space: nowrap;
  font-family: 'Source Sans Pro','Avenir Next', AvenirNext;
  letter-spacing: 1.5px;
}

.control-set {
  margin-top: 20px;
  width: 100%;
}
.control-set label, .control-set .toggle-text {
  width: 25%;
  text-transform: uppercase;
}
.control-set .slider {
  width: 65%;
}
@media screen and (min-width: 950px) {
  .control-set .slider {
    width: 55%;
  }
}
@media screen and (min-width: 1245px) {
  .control-set .slider {
    width: 63%;
  }
}
.control-set .value {
  width: 7%;
  text-align: right;
}

.box-model #content label {
  width: 25%;
}
@media screen and (min-width: 950px) {
  .box-model #content label {
    width: 22%;
  }
}

#box-sizing label {
  width: 40%;
}

.radio {
  position: relative;
  margin: 0 1rem 0 0;
  cursor: pointer;
}
.radio::before, .radio::after {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  content: "";
  position: absolute;
  top: -0.2rem;
  left: -0.2rem;
  z-index: 1;
  width: 20px;
  height: 20px;
  background: #343434 !important;
  border-radius: 50%;
}
.radio:checked::before, .radio.ng-valid-parse::before {
  -webkit-transform: scale(0, 0);
  -moz-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -o-transform: scale(0, 0);
  transform: scale(0, 0);
  border-color: #8ADFE0 !important;
  border-width: 3px !important;
}
.radio:checked::after, .radio.ng-valid-parse::after {
  border: 3px solid #8ADFE0 !important;
  background: #242930 !important;
}

slider, [slider] {
  display: inline-block;
  position: relative;
  height: 7px;
  width: 63%;
  vertical-align: middle;
  margin: 5px;
}
slider div, [slider] div {
  white-space: nowrap;
  position: absolute;
}
slider div.handle, [slider] div.handle {
  border: 3px solid;
  cursor: pointer;
  width: 20px;
  height: 20px;
  top: -8px;
  background-color: #242930;
  z-index: 2;
  border-radius: 100%;
}
slider div.handle::after, [slider] div.handle::after {
  content: '';
  width: 8px;
  height: 8px;
  position: absolute;
  left: 6px;
  border-radius: 100%;
  background-color: transparent;
}
slider div.handle.active::after, [slider] div.handle.active::after {
  background-color: transparent;
}
slider div.bar, [slider] div.bar {
  width: 100%;
  height: 100%;
  border-radius: 7px;
  background: #444;
  overflow: hidden;
}
slider div.bar .selection, [slider] div.bar .selection {
  width: 0;
  height: 100%;
}
slider div.bubble, [slider] div.bubble {
  display: none;
  cursor: default;
  top: -22px;
  padding: 1px 3px;
  font-size: 0.7em;
}
slider div.bubble.active, [slider] div.bubble.active {
  display: inline-block;
}
slider div.bubble.limit, [slider] div.bubble.limit {
  color: #777;
}

.bubble.value.low.ng-binding.active {
  display: none;
}

.bar-color {
  height: 20px;
  border-right: 3px solid;
  box-sizing: content-box;
}

#content .slider-selection, #content .bar-color {
  background-color: #63BCF8;
}
#content .bar-color,
#content .handle {
  border-color: #63BCF8;
}

#padding .slider-selection, #padding .bar-color {
  background-color: #C5D936;
}
#padding .bar-color,
#padding .handle {
  border-color: #C5D936;
}

#border .slider-selection, #border .bar-color {
  background-color: #F8CC63;
}
#border .bar-color,
#border .handle {
  border-color: #F8CC63;
}

#margin .slider-selection, #margin .bar-color {
  background-color: #DE6A63;
}
#margin .bar-color,
#margin .handle {
  border-color: #DE6A63;
}

@media (min-width: 951px) and (max-width: 1244px) {
  .controls .sliders label {
    display: block;
    line-height: 1rem;
  }
  .controls .sliders label:first-of-type {
    margin-top: 8px;
  }
  .controls slider, .controls [slider] {
    width: 87%;
  }
}
.toggle {
  display: none;
}
.toggle, .toggle::after, .toggle::before, .toggle *, .toggle *::after, .toggle *::before, .toggle + .toggle-control {
  box-sizing: border-box;
}
.toggle::selection, .toggle::after::selection, .toggle::before::selection, .toggle *::selection, .toggle *::after::selection, .toggle *::before::selection, .toggle + .toggle-control::selection {
  background: none;
}
.toggle + .toggle-control {
  outline: 0;
  top: 10px;
  margin-bottom: 8px;
  width: 52px;
  position: relative;
  cursor: pointer;
  user-select: none;
  padding: 3px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background: #242930;
  border: 1.5px solid #444;
  border-radius: 2em;
}
.toggle + .toggle-control::after, .toggle + .toggle-control::before {
  position: relative;
  display: block;
  content: "";
  width: 20px;
  height: 20px;
}
.toggle + .toggle-control::after {
  left: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background: #343434;
  border-radius: 50%;
}
.toggle + .toggle-control::before {
  display: none;
}
.toggle:checked + .toggle-control {
  border: 1.5px solid #444;
}
.toggle:checked + .toggle-control::after {
  left: 50%;
  height: 20px;
  width: 20px;
  background: #242930;
  border: 3px solid #63BCF8;
}

.toggle-text {
  vertical-align: text-bottom;
  margin-left: 5px;
}

.generated-direction {
  display: inline-block;
  width: 150px;
}

.generated-width,
.generated-height {
  font-size: 60%;
  white-space: nowrap;
  font-family: 'Source Sans Pro','Avenir Next', AvenirNext;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 3rem;
}
@media screen and (min-width: 790px) {
  .generated-width,
  .generated-height {
    line-height: 2rem;
  }
}
.generated-width .changes,
.generated-height .changes {
  text-transform: none;
  display: inline-block;
  line-height: 25px;
  padding: 0 5px;
  background: #2F353E;
  border-radius: 3px;
  color: #63BCF8;
  -webkit-transition: color 0.4s ease-in-out, background 0.4s ease-in-out;
  -moz-transition: color 0.4s ease-in-out, background 0.4s ease-in-out;
  transition: color 0.4s ease-in-out, background 0.4s ease-in-out;
}
.generated-width .changes[class*="-add"],
.generated-height .changes[class*="-add"] {
  color: #054570;
  background: #63BCF8;
}
.generated-width .changes.highlight.ng-enter,
.generated-height .changes.highlight.ng-enter {
  background: #2F353E;
  color: #63BCF8;
}
.generated-width .changes.highlight.ng-enter.ng-enter-active,
.generated-height .changes.highlight.ng-enter.ng-enter-active {
  color: #054570;
  background: #63BCF8;
}
.generated-width .changes.highlight.ng-leave,
.generated-height .changes.highlight.ng-leave {
  color: #054570;
  background: #63BCF8;
}
.generated-width .changes.highlight.ng-leave.ng-leave-active,
.generated-height .changes.highlight.ng-leave.ng-leave-active {
  background: #2F353E;
  color: #63BCF8;
}

/*****************************************
* DIAGRAM STYLES
******************************************/
#diagram {
  margin-left: 5px;
  clear: left;
  padding-top: 30px;
}

.box {
  position: relative;
}
.box:hover .box-property {
  background: #FFFFFF;
}
.box:hover .box-property-vertical,
.box:hover .box-property-horizontal {
  opacity: 0;
}

.box-property {
  font-family: 'Source Code Pro', Menlo, monospace;
  -webkit-transition: width 0.3s linear, height 0.3s linear;
  -moz-transition: width 0.3s linear, height 0.3s linear;
  transition: width 0.3s linear, height 0.3s linear;
  position: absolute;
}

.box-padding {
  background: #C5D936;
  border: 1px dashed #f6f6f6;
  text-shadow: 0px 1px 1px rgba(222, 233, 140, 0.7);
}
.box-padding span::before,
.box-padding span::after {
  color: #33380b;
}
.box-padding:hover {
  background-color: #C5D936 !important;
}
.box-padding:hover .box-property-vertical,
.box-padding:hover .box-property-horizontal {
  opacity: 1;
}
.box-padding .box-property-vertical {
  left: 40%;
}
.box-padding .box-property-horizontal {
  top: 40%;
}

.box-border {
  background: #F8CC63;
  border: 1px solid #f6f6f6;
  text-shadow: 0px 1px 1px rgba(252, 236, 197, 0.7);
}
.box-border span::before,
.box-border span::after {
  color: #896206;
}
.box-border:hover {
  background-color: #F8CC63 !important;
}
.box-border:hover .box-property-vertical,
.box-border:hover .box-property-horizontal {
  opacity: 1;
}
.box-border .box-property-vertical {
  left: 50%;
}
.box-border .box-property-horizontal {
  top: 50%;
}

.box-margin {
  background: #DE6A63;
  border: 1px dashed #f6f6f6;
  text-shadow: 0px 1px 1px rgba(240, 186, 183, 0.7);
  /** To Decode this SVG image, paste the css here: www.svgeneration.com/tools/base-64-decoder */
  background-color: #de6a63;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc3JyBoZWlnaHQ9JzE0JyB2aWV3Qm94PScwIDAgNSAxMCc+Cgk8cmVjdCB3aWR0aD0nMTEwJScgeD0nLTUlJyB5PSctNSUnIGhlaWdodD0nMTEwJScgZmlsbD0nI2RlNmE2MycvPgoJPGxpbmUgeDE9JzcnIHkxPScxJyB4Mj0nLTInIHkyPScxMCcgc3Ryb2tlPScjZWVhYWE1JyBzdHJva2Utd2lkdGg9JzAuMjknLz4KCTxsaW5lIHgxPSc3JyB5MT0nNicgeDI9Jy0yJyB5Mj0nMTUnIHN0cm9rZT0nI2VlYWFhNScgc3Ryb2tlLXdpZHRoPScwLjI5Jy8+Cgk8bGluZSB4MT0nNycgeTE9Jy00JyB4Mj0nLTInIHkyPSc1JyBzdHJva2U9JyNlZWFhYTUnIHN0cm9rZS13aWR0aD0nMC4yOScvPgo8L3N2Zz4=");
}
.box-margin span::before,
.box-margin span::after {
  color: #611914;
}
.box-margin:hover {
  background-color: #DE6A63 !important;
}
.box-margin:hover .box-property-vertical,
.box-margin:hover .box-property-horizontal {
  opacity: 1;
}
.box-margin .box-property-vertical {
  left: 60%;
}
.box-margin .box-property-horizontal {
  top: 60%;
}

.box-inner {
  background: #63BCF8;
  border: 1px solid #f6f6f6;
  text-shadow: 0px 1px 1px rgba(197, 230, 252, 0.7);
  text-align: center;
}
.box-inner span::before,
.box-inner span::after {
  color: #065489;
}
.box-inner:hover {
  background-color: #63BCF8 !important;
}
.box-inner:hover .box-property-vertical,
.box-inner:hover .box-property-horizontal {
  opacity: 1;
}
.box-inner::before {
  color: #0763a1;
  content: attr(data-width) " x " attr(data-height);
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: .5em;
  width: 100%;
  font-size: .75em;
  white-space: nowrap;
}

.property-label {
  font-family: 'Source Sans Pro','Avenir Next', AvenirNext;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 2px;
  font-size: 11px;
  top: -6px;
  left: 5px;
  position: relative;
}
@media screen and (min-width: 790px) {
  .property-label {
    top: -12px;
  }
}
.property-label#property-label-padding {
  color: #93a41f;
}
.property-label#property-label-border {
  color: #c38c09;
}
.property-label#property-label-margin {
  color: #b52e26;
}
.property-label#property-label-content {
  color: #0b90ea;
  float: left;
  top: -6px;
}
@media screen and (min-width: 790px) {
  .property-label#property-label-content {
    top: -8px;
  }
}

#padding-v::before {
  top: -8px;
}

.box-property-vertical, .box-property-horizontal {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
}
.box-property-vertical::before, .box-property-horizontal::before, .box-property-vertical::after, .box-property-horizontal::after {
  position: absolute;
  font-size: 0.75em;
  text-align: center;
}

.box-property-vertical::before, .box-property-vertical::after {
  left: -0.5em;
  width: 100%;
}

.box-property-horizontal::before, .box-property-horizontal::after {
  margin-top: -0.65em;
  width: 2em;
  height: 100%;
}

.box-property-vertical {
  height: 100%;
}
.box-property-vertical::before {
  content: attr(data-top);
  top: -0.5em;
}
.box-property-vertical::after {
  content: attr(data-bottom);
  bottom: -0.5em;
}

.box-property-horizontal {
  width: 100%;
}
.box-property-horizontal::before {
  content: attr(data-left);
  left: -1em;
}
.box-property-horizontal::after {
  content: attr(data-right);
  right: -1em;
}

#original-link, #load-song, #credits, #tested {
    position: absolute;
    font-size: 11px;
    margin: 16px
}
#original-link, #load-song div {
    text-decoration: underline;
    cursor: pointer
}
#load-song, #credits {
    text-align: right;
    right: 0
}
 #tested, #credits {
    bottom: 0
} 
</style>

<body translate="no" >
<!DOCTYPE html>
<html ng-app="cssBoxModel" class="no-js">
<head>
<meta charset="utf-8">
<title>cssBoxModel</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-sanitize.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97151/ui.slider.js"></script>
</head>
<body>
<div ui-view="diagram">
</div>
</body>
</html>

<div class="ap" id="ap">
<div id="tested">
<font size="2" color="#00CED1"face="arial"> &nbsp; &nbsp; &nbsp; &nbsp; Edited by . <a href="http://Link Download" title="Download Full Code"> Myscript2010 &nbsp; </a> Home Page </a> 
</div>
<div id="credits">
<font size="2" color="#00CED1"face="arial"> &nbsp; &nbsp; &nbsp; &nbsp; Cibeber &nbsp; <a href="http://#" title="Same Page"> Cimahi &nbsp; </a>Same Page &nbsp; &nbsp; &nbsp; &nbsp;</a></div>
<div align="center">
<a href="http://myscript2010s.blogspot.co.id"title="Myscript2010s"> 
<h2>
<span style="color:#FFFACD">CIBEBER CIMAHI</2></a>  
</div>

<header> <a href="http://sample-mys2010.blogspot.co.id/2016/05/sample-margin-padding.html"title="Myscript2010s"><span style="color:#dad"><b>LET'S STUDY</b>
</header>

<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js"></script>
<script>
      angular.module('cssBoxModel', [
    'ngAnimate',
    'ngSanitize',
    'ui.router',
    'ui.slider'
]).config([
    '$stateProvider',
    '$locationProvider',
    function ($stateProvider, $locationProvider) {
        $stateProvider.state('home', {
            url: '',
            controller: 'MainCtrl',
            views: {
                'diagram': {
                    templateUrl: 'http://codepen.io/carolineartz/pen/yywJrJ.html',
                    controller: 'MainCtrl'
                }
            }
        });
    }
]).directive('labelPositionV', function () {
    return {
        restrict: 'AE',
        scope: {},
        link: function (scope, element, attrs, ctrl) {
            var id = attrs.id;
            attrs.$observe('labelPositionTop', function (value) {
                var styleTop = '<style> #' + id + '::before{top:' + (value / 2.8 - 12) + 'px;}</style>';
                angular.element(document).find('head').append(styleTop);
            });
            attrs.$observe('labelPositionBottom', function (value) {
                var styleBottom = '<style> #' + id + '::after{bottom:' + (value / 3 - 13) + 'px;}</style>';
                angular.element(document).find('head').append(styleBottom);
            });
        }
    };
}).directive('labelPositionH', function () {
    return {
        restrict: 'AE',
        scope: {},
        link: function (scope, element, attrs, ctrl) {
            var id = attrs.id;
            attrs.$observe('labelPositionRight', function (value) {
                var styleRight = '<style> #' + id + '::after{right:' + 1 * (value / 2.8 - 12) + 'px;}</style>';
                angular.element(document).find('head').append(styleRight);
            });
            attrs.$observe('labelPositionLeft', function (value) {
                var styleLeft = '<style> #' + id + '::before{left:' + 1 * (value / 3 - 12) + 'px;}</style>';
                angular.element(document).find('head').append(styleLeft);
            });
        }
    };
});
var app = angular.module('cssBoxModel');
app.controller('MainCtrl', function ($scope) {
    $scope.padding = {
        top: 20,
        right: 20,
        bottom: 20,
        left: 20,
        v: function () {
            return this.top + this.bottom;
        },
        h: function () {
            return this.right + this.left;
        }
    };
    $scope.border = {
        top: 15,
        right: 15,
        bottom: 15,
        left: 15,
        v: function () {
            return this.top + this.bottom;
        },
        h: function () {
            return this.right + this.left;
        }
    };
    $scope.margin = {
        top: 20,
        right: 20,
        bottom: 20,
        left: 20,
        v: function () {
            return this.top + this.bottom;
        },
        h: function () {
            return this.right + this.left;
        }
    };
    $scope.box = { sizing: 'content-box' };
    $scope.dimensions = {
        width: 220,
        height: 220
    };
    $scope.innerContent = {
        width: getInnerWidth(),
        height: getInnerHeight()
    };
    $scope.generatedIncludeMargin = false;
    $scope.generatedBoxDimensions = {
        width: getGeneratedBoxDimensionsWidth(),
        height: getGeneratedBoxDimensionsHeight()
    };
    $scope.checkIncludeMargin = function () {
        $scope.generatedBoxDimensions.width = getGeneratedBoxDimensionsWidth();
        $scope.generatedBoxDimensions.height = getGeneratedBoxDimensionsHeight();
    };
    $scope.boxPosition = {
        left: 50,
        top: 56
    };
    $scope.styleMargin = {
        width: 300,
        height: 300,
        top: -50,
        left: -50
    };
    $scope.styleBorder = {
        width: 260,
        height: 260,
        top: -30,
        left: -30
    };
    $scope.stylePadding = {
        width: 242,
        height: 242,
        top: -20,
        left: -20
    };
    $scope.$watch(function () {
        $scope.boxPosition.top = calcBoxPositionTop() + 6;
        $scope.boxPosition.left = calcBoxPositionLeft();
        $scope.styleMargin.width = $scope.margin.h() + $scope.styleBorder.width;
        $scope.styleMargin.height = $scope.margin.v() + $scope.styleBorder.height;
        $scope.styleMargin.top = -calcBoxPositionTop();
        $scope.styleMargin.left = -calcBoxPositionLeft();
        $scope.styleBorder.width = $scope.border.h() + $scope.stylePadding.width;
        $scope.styleBorder.height = $scope.border.v() + $scope.stylePadding.height;
        $scope.styleBorder.top = -($scope.border.top + $scope.padding.top);
        $scope.styleBorder.left = -($scope.border.left + $scope.padding.left);
        $scope.stylePadding.width = $scope.padding.h() + getInnerWidth() + 2;
        $scope.stylePadding.height = $scope.padding.v() + getInnerHeight() + 2;
        $scope.stylePadding.top = -$scope.padding.top;
        $scope.stylePadding.left = -$scope.padding.left;
        $scope.innerContent.width = getInnerWidth();
        $scope.innerContent.height = getInnerHeight();
        $scope.generatedBoxDimensions.width = getGeneratedBoxDimensionsWidth();
        $scope.generatedBoxDimensions.height = getGeneratedBoxDimensionsHeight();
    });
    function getInnerWidth() {
        var width;
        if ($scope.box.sizing === 'border-box') {
            width = $scope.dimensions.width - $scope.border.h() - $scope.padding.h();
        } else {
            width = $scope.dimensions.width;
        }
        return width > 0 ? width : 0;
    }
    function getInnerHeight() {
        var height;
        if ($scope.box.sizing === 'border-box') {
            height = $scope.dimensions.height - $scope.border.v() - $scope.padding.v();
        } else {
            height = $scope.dimensions.height;
        }
        return height > 0 ? height : 0;
    }
    function getGeneratedBoxDimensionsWidth() {
        var width;
        if ($scope.box.sizing === 'border-box') {
            width = getInnerWidth() === 0 ? calcPaddingBorderWidth() : $scope.dimensions.width;
        } else {
            width = $scope.dimensions.width + calcPaddingBorderWidth();
        }
        return $scope.generatedIncludeMargin ? width + $scope.margin.h() : width;
    }
    function getGeneratedBoxDimensionsHeight() {
        var height;
        if ($scope.box.sizing === 'border-box') {
            height = getInnerHeight() === 0 ? calcPaddingBorderHeight() : $scope.dimensions.height;
        } else {
            height = $scope.dimensions.height + calcPaddingBorderHeight();
        }
        return $scope.generatedIncludeMargin ? height + $scope.margin.v() : height;
    }
    function calcBoxPositionTop() {
        return $scope.margin.top + $scope.border.top + $scope.padding.top;
    }
    function calcBoxPositionLeft() {
        return $scope.margin.left + $scope.border.left + $scope.padding.left;
    }
    function calcPaddingBorderWidth() {
        return $scope.padding.h() + $scope.border.h();
    }
    function calcPaddingBorderHeight() {
        return $scope.padding.v() + $scope.border.v();
    }
});
       
    </script>

Angular code by. Caroline Artz
Design code is edited by. Mys2010 In Codepen

DEMOSHOW

If you want to directly copy & paste you canDownload Here Angular Full Code 

Category: Sample Margin Padding