planetary system

dabblet.css

/**
 * planetary system
 */
html {
	min-height: 100%;
	overflow: hidden;
	background: #000;
	font: 13px/1.56 Helvetica;
}
input {display: none;}
label {
	position: absolute;
	z-index: 10;
	color: #fff;
}
label {cursor: pointer;}

label[for*="zoom"], .fake-slider {top: 50px; height: 1.56em; transition: .95s ease-in;}
label[for*="zoom"] { width: 50px; text-align: center; }
label[for="zoomout50"] { left: 15px; }
label[for="zoomout67"] { left: 65px; }
label[for="zoomout75"] { left: 115px; }
label[for="zoomauto"] { left: 165px; }
input:checked + label { color: #000; font-weight: 700; }
.fake-slider {
	left: 15px;
	width: 200px;
	border-radius: .35em;
	position: absolute;
	z-index: 9;
	background: rgba(255,255,255,.4) linear-gradient(left, rgba(255,255,255,.94) 25%, rgba(255,255,255,.4) 25%) no-repeat;
	background-size: 100% 100%;
}
#zoomout50:checked ~ .fake-slider {background-position: 0 0;}
#zoomout67:checked ~ .fake-slider {background-position: 50px 0;}
#zoomout75:checked ~ .fake-slider {background-position: 100px 0;}
#zoomauto:checked ~ .fake-slider {background-position: 150px 0;}
#zoomout50:checked ~ .planetary-system {transform: scale(.5);}
#zoomout67:checked ~ .planetary-system {transform: scale(.67);}
#zoomout75:checked ~ .planetary-system {transform: scale(.75);}
#zoomauto:checked ~ .planetary-system {transform: scale(1);}
.plane {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	position: fixed;
}
.round {
	min-width: 10px;
	min-height: 10px;
	border-radius: 50%;
}
.trace {
	border: dashed 1px #ccc;
}
.orbit, .trace {
	left: 50%;
	top: 50%;
	position: absolute;
}
.planet {
	position: relative;
}

.planetary-system {
	/**animation: wobble 9s infinite ease-in-out;/**/
	transition: .95s ease-in;
}
@keyframes wobble {
	0% { transform: rotate(0deg); }
	65% { transform: rotate(10deg); }
	100% { transform: rotate(0deg); }
}

.star-a .star {
	width: 95px;
	height:  95px;
	margin: -47px 0 0 -47px;
	border-radius: 50%;
	box-shadow: 0 0 20px #ffc, 0 0 30px #fe8, 0 0 40px #fb3, 
		0 0 50px #e70, 0 0 60px #c40, 0 0 70px #931, 0 0 80px #410;
	background: #dcdaa7;
}

.planet-a {
	transform: skewX(-30deg) skewY(-15deg);
}
.planet-a .trace {
	width: 320px;
	height: 320px;
	margin: -160px 0 0 -160px;
}
.planet-a .orbit {
	animation: planet-a-motion 10s infinite linear;
}
@keyframes planet-a-motion {
	from { transform: rotate(0deg) translate(-160px) rotate(0deg); }
	to { transform: rotate(360deg) translate(-160px) rotate(-360deg); }
}
.planet-a .planet {
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	box-shadow: 0 0 5px #fff, 0 0 10px #ff7, 0 0 15px #fe0, 0 0 20px #f70;
	transform:  skewY(15deg) skewX(30deg);
	background: radial-gradient(top left, 
			rgb(213,174,131), rgb(237,205,167) 33%, 
			rgb(163,161,122) 67%, rgb(101,84,74));
}
.moon-a-1 {
	/**/transform: skewX(30deg) skewY(-15deg);/**/
}
.moon-a-1 .trace {
	width: 70px;
	height: 70px;
	margin: -35px 0 0 -35px;
}
.moon-a-1 .orbit {
	animation: moon-a-1-motion 7s infinite linear;
}
@keyframes moon-a-1-motion {
	from { transform: rotate(0deg) translate(-35px) rotate(0deg); }
	to { transform: rotate(360deg) translate(-35px) rotate(-360deg); }
}
.moon-a-1 .moon {
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	box-shadow: 0 0 5px #fff, 0 0 10px #ff7;
	/**transform:  skewY(15deg) skewX(-30deg);/**/
	background: radial-gradient(top left, 
			rgb(213,255,131), rgb(237,205,167) 33%, 
			rgb(255,161,122) 67%, rgb(255,84,74));
}

.planet-b {
	transform: skewX(-45deg) skewY(-15deg);
}
.planet-b .trace {
	width: 850px;
	height: 850px;
	margin: -425px 0 0 -425px;
}
.planet-b .orbit {
	animation: planet-b-motion 29s infinite linear;
}
@keyframes planet-b-motion {
	from { transform: rotate(0deg) translate(-425px) rotate(0deg); }
	to { transform: rotate(360deg) translate(-425px) rotate(-360deg); }
	
}
.planet-b .planet {
	width: 70px;
	height: 70px;
	margin: -35px 0 0 -35px;
	box-shadow: 0 0 5px rgb(182, 156, 132), 0 0 10px rgb(171, 168, 175), 0 0 15px rgb(214, 231, 232), 0 0 20px rgb(179, 171, 160), 0 0 25px #0f3;
	transform:  skewY(15deg) skewX(45deg);
	background:radial-gradient(0% 0%,
			rgb(123, 109, 100)  5%, rgb(182, 156, 132) 10%, 
			rgb(182, 156, 132) 15%, rgb(182, 156, 132) 20%, 
			rgb(196, 209, 228) 25%, rgb(197, 181, 155) 30%, 
			rgb(149, 133, 119) 35%, rgb(171, 168, 175) 40%, 
			rgb(165, 134, 116) 45%, rgb(182, 156, 132) 50%, 
			rgb(233, 232, 218) 55%, rgb(172, 150, 127) 60%, 
			rgb(154, 113,  81) 65%, rgb(214, 231, 232) 70%, 
			rgb(150, 138, 121) 75%, rgb(178, 164, 169) 80%, 
			rgb(173, 154, 144) 85%, rgb(179, 171, 160) 90%, 
			rgb(143, 127, 112) 95%, rgb(101,  95,  87) 100%);
}
.moon-b-1 {
	/**/transform: skewX(30deg) skewY(-15deg);/**/
}
.moon-b-1 .trace {
	width: 130px;
	height: 130px;
	margin: -65px 0 0 -65px;
}
.moon-b-1 .orbit {
	animation: moon-b-1-motion 7s infinite linear;
}
@keyframes moon-b-1-motion {
	from { transform: rotate(0deg) translate(-65px) rotate(0deg); }
	to { transform: rotate(360deg) translate(-65px) rotate(-360deg); }
}
.moon-b-1 .moon {
	width: 26px;
	height: 26px;
	margin: -13px 0 0 -13px;
	box-shadow: 0 0 5px #fff, 0 0 10px #ff7;
	/**/transform:  skewY(15deg) skewX(-30deg);/**/
	background: radial-gradient(top left, 
			rgb(213,255,131), rgb(237,205,167) 33%, 
			rgb(161,255,122) 67%, rgb(84,255,74));
}
.moon-b-2 {
	/**/transform: skewX(30deg) skewY(-15deg);/**/
}
.moon-b-2 .trace {
	width: 190px;
	height: 190px;
	margin: -95px 0 0 -95px;
}
.moon-b-2 .orbit {
	animation: moon-b-2-motion 10s infinite linear;
}
@keyframes moon-b-2-motion {
	from { transform: rotate(360deg) translate(-95px) rotate(-360deg); }
	to { transform: rotate(0deg) translate(-95px) rotate(0deg); }
}
.moon-b-2 .moon {
	width: 13px;
	height: 13px;
	margin: -7px 0 0 -7px;
	box-shadow: 0 0 5px #fff, 0 0 10px #ff7;
	/**/transform:  skewY(15deg) skewX(-30deg);/**/
	background: radial-gradient(top left, 
			rgb(213,131,255), rgb(237,205,255) 33%, 
			rgb(161,122,255) 67%, rgb(84,74,255));
}

dabblet.html

<!-- content to be placed inside <body>…</body> -->
<input type="radio" name="zoom" value="zoomauto"  id="zoomauto" checked>
<label for="zoomauto">100%</label>
<input type="radio" name="zoom" value="zoomout75"  id="zoomout75">
<label for="zoomout75">75%</label>
<input type="radio" name="zoom" value="zoomout67"  id="zoomout67">
<label for="zoomout67">67%</label>
<input type="radio" name="zoom" value="zoomout50"  id="zoomout50">
<label for="zoomout50">50%</label>
<div class="fake-slider"></div>
<div class="planetary-system plane">
	<div class="star-system plane">
		<div class="star-a orbit"><div class="star round"></div></div>
	</div>
	
	<div class="planet-a plane">
		<div class="trace round"></div>
		<div class="orbit">
			<div class="planet round">
				<div class="moon-a-1 plane">
					<div class="trace round"></div>
					<div class="orbit"><div class="moon round"></div></div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="planet-b plane">
		<div class="trace round"></div>
		<div class="orbit">
			<div class="planet round">
				<div class="moon-b-1 plane">
					<div class="trace round"></div>
					<div class="orbit"><div class="moon round"></div></div>
				</div>
				<div class="moon-b-2 plane">
					<div class="trace round"></div>
					<div class="orbit"><div class="moon round"></div></div>
				</div>
			</div>
		</div>
	</div>
</div>

settings.json

{"view":"separate","fontsize":"80","seethrough":"","prefixfree":"1","page":"html"}