Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
planetary system
/**
* 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));
}
<!-- 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>
{"view":"separate","fontsize":"80","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.