235 lines
7.7 KiB
CSS
235 lines
7.7 KiB
CSS
.planets {
|
|
overflow: hidden;
|
|
position: fixed;
|
|
height: 80vmax;
|
|
width: 80vmax;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: -1;
|
|
|
|
/*background-color: var(--background);*/
|
|
background-color: transparent;
|
|
}
|
|
@media only screen and (max-width: 600px) {
|
|
.planets {
|
|
height: 200vmax;
|
|
width: 200vmax;
|
|
|
|
transform: scale(0.5) translate(50%, 50%);
|
|
}
|
|
}
|
|
|
|
.planet {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
|
|
width: var(--radius);
|
|
height: var(--radius);
|
|
}
|
|
|
|
.orbit {
|
|
position: absolute;
|
|
|
|
/*border: #orbit_thickness.css solid var(--foreground-inactive);*/
|
|
border-radius: 100%;
|
|
background-color: transparent;
|
|
|
|
z-index:-1;
|
|
}
|
|
|
|
@-webkit-keyframes orbit_mercury {
|
|
from { -webkit-transform: rotate(360deg) translateX(#or_mercury.css) rotate(360deg); }
|
|
to { -webkit-transform: rotate(0deg) translateX(#or_mercury.css) rotate(0deg); }
|
|
}
|
|
@-moz-keyframes orbit_mercury {
|
|
from { -moz-transform: rotate(360deg) translateX(#or_mercury.css) rotate(360deg); }
|
|
to { -moz-transform: rotate(0deg) translateX(#or_mercury.css) rotate(0deg); }
|
|
}
|
|
@-o-keyframes orbit_mercury {
|
|
from { -o-transform: rotate(360deg) translateX(#or_mercury.css) rotate(360deg); }
|
|
to { -o-transform: rotate(0deg) translateX(#or_mercury.css) rotate(0deg); }
|
|
}
|
|
@keyframes orbit_mercury {
|
|
from { transform: rotate(360deg) translateX(#or_mercury.css) rotate(360deg); }
|
|
to { transform: rotate(0deg) translateX(#or_mercury.css) rotate(0deg); }
|
|
}
|
|
#mercury {
|
|
--period: 4.82s;
|
|
--radius: 30px;
|
|
--color: var(--background-alt);
|
|
|
|
width: var(--radius);
|
|
height: var(--radius);
|
|
|
|
background-color: var(--color);
|
|
right: #solposx.css;
|
|
bottom: #solposy.css;
|
|
|
|
-webkit-animation: orbit_mercury var(--period) linear infinite;
|
|
-moz-animation: orbit_mercury var(--period) linear infinite;
|
|
-o-animation: orbit_mercury var(--period) linear infinite;
|
|
animation: orbit_mercury var(--period) linear infinite;
|
|
}
|
|
#mercury-orbit {
|
|
--orbit-radius: #or_mercury.css;
|
|
--planet-radius: #pr_mercury.css;
|
|
--orbit-thickness: #orbit_thickness.css;
|
|
--diameter: calc(2 * var(--orbit-radius) + (var(--planet-radius) - var(--orbit-thickness)) / 2);
|
|
|
|
right: #solposx.css;
|
|
bottom: #solposy.css;
|
|
transform: translate(#or_mercury.css, #or_mercury.css);
|
|
|
|
width: var(--diameter);
|
|
height: var(--diameter);
|
|
|
|
border: #orbit_thickness.css solid var(--background-alt);
|
|
}
|
|
|
|
@-webkit-keyframes orbit_venus {
|
|
from { -webkit-transform: rotate(360deg) translateX(#or_venus.css) rotate(360deg); }
|
|
to { -webkit-transform: rotate(0deg) translateX(#or_venus.css) rotate(0deg); }
|
|
}
|
|
@-moz-keyframes orbit_venus {
|
|
from { -moz-transform: rotate(360deg) translateX(#or_venus.css) rotate(360deg); }
|
|
to { -moz-transform: rotate(0deg) translateX(#or_venus.css) rotate(0deg); }
|
|
}
|
|
@-o-keyframes orbit_venus {
|
|
from { -o-transform: rotate(360deg) translateX(#or_venus.css) rotate(360deg); }
|
|
to { -o-transform: rotate(0deg) translateX(#or_venus.css) rotate(0deg); }
|
|
}
|
|
@keyframes orbit_venus {
|
|
from { transform: rotate(360deg) translateX(#or_venus.css) rotate(360deg); }
|
|
to { transform: rotate(0deg) translateX(#or_venus.css) rotate(0deg); }
|
|
}
|
|
#venus {
|
|
--period: 12.3s;
|
|
--radius: #pr_venus.css;
|
|
--color: var(--background-alt);
|
|
|
|
width: var(--radius);
|
|
height: var(--radius);
|
|
|
|
background-color: var(--color);
|
|
right: #solposx.css;
|
|
bottom: #solposy.css;
|
|
|
|
-webkit-animation: orbit_venus var(--period) linear infinite;
|
|
-moz-animation: orbit_venus var(--period) linear infinite;
|
|
-o-animation: orbit_venus var(--period) linear infinite;
|
|
animation: orbit_venus var(--period) linear infinite;
|
|
}
|
|
#venus-orbit {
|
|
--orbit-radius: #or_venus.css;
|
|
--planet-radius: #pr_venus.css;
|
|
--orbit-thickness: #orbit_thickness.css;
|
|
--diameter: calc(2 * var(--orbit-radius) + (var(--planet-radius) - var(--orbit-thickness)) / 2);
|
|
|
|
right: #solposx.css;
|
|
bottom: #solposy.css;
|
|
transform: translate(#or_venus.css, #or_venus.css);
|
|
|
|
width: var(--diameter);
|
|
height: var(--diameter);
|
|
border: #orbit_thickness.css solid var(--background-alt);
|
|
}
|
|
|
|
@-webkit-keyframes orbit_earth {
|
|
from { -webkit-transform: rotate(360deg) translateX(#or_earth.css) rotate(360deg); }
|
|
to { -webkit-transform: rotate(0deg) translateX(#or_earth.css) rotate(0deg); }
|
|
}
|
|
@-moz-keyframes orbit_earth {
|
|
from { -moz-transform: rotate(360deg) translateX(#or_earth.css) rotate(360deg); }
|
|
to { -moz-transform: rotate(0deg) translateX(#or_earth.css) rotate(0deg); }
|
|
}
|
|
@-o-keyframes orbit_earth {
|
|
from { -o-transform: rotate(360deg) translateX(#or_earth.css) rotate(360deg); }
|
|
to { -o-transform: rotate(0deg) translateX(#or_earth.css) rotate(0deg); }
|
|
}
|
|
@keyframes orbit_earth {
|
|
from { transform: rotate(360deg) translateX(#or_earth.css) rotate(360deg); }
|
|
to { transform: rotate(0deg) translateX(#or_earth.css) rotate(0deg); }
|
|
}
|
|
#earth {
|
|
--period: 20s;
|
|
--radius: #pr_earth.css;
|
|
--color: var(--background-alt);
|
|
|
|
width: var(--radius);
|
|
height: var(--radius);
|
|
|
|
background-color: var(--color);
|
|
right: #solposx.css;
|
|
bottom: #solposy.css;
|
|
|
|
-webkit-animation: orbit_earth var(--period) linear infinite;
|
|
-moz-animation: orbit_earth var(--period) linear infinite;
|
|
-o-animation: orbit_earth var(--period) linear infinite;
|
|
animation: orbit_earth var(--period) linear infinite;
|
|
}
|
|
#earth-orbit {
|
|
--orbit-radius: #or_earth.css;
|
|
--planet-radius: #pr_earth.css;
|
|
--orbit-thickness: #orbit_thickness.css;
|
|
--diameter: calc(2 * var(--orbit-radius) + (var(--planet-radius) - var(--orbit-thickness)) / 2);
|
|
|
|
right: #solposx.css;
|
|
bottom: #solposy.css;
|
|
transform: translate(#or_earth.css, #or_earth.css);
|
|
|
|
width: var(--diameter);
|
|
height: var(--diameter);
|
|
|
|
border: #orbit_thickness.css solid var(--background-alt);
|
|
}
|
|
|
|
@-webkit-keyframes orbit_mars {
|
|
from { -webkit-transform: rotate(360deg) translateX(#or_mars.css) rotate(360deg); }
|
|
to { -webkit-transform: rotate(0deg) translateX(#or_mars.css) rotate(0deg); }
|
|
}
|
|
@-moz-keyframes orbit_mars {
|
|
from { -moz-transform: rotate(360deg) translateX(#or_mars.css) rotate(360deg); }
|
|
to { -moz-transform: rotate(0deg) translateX(#or_mars.css) rotate(0deg); }
|
|
}
|
|
@-o-keyframes orbit_mars{
|
|
from { -o-transform: rotate(360deg) translateX(#or_mars.css) rotate(360deg); }
|
|
to { -o-transform: rotate(0deg) translateX(#or_mars.css) rotate(0deg); }
|
|
}
|
|
@keyframes orbit_mars {
|
|
from { transform: rotate(360deg) translateX(#or_mars.css) rotate(360deg); }
|
|
to { transform: rotate(0deg) translateX(#or_mars.css) rotate(0deg); }
|
|
}
|
|
#mars {
|
|
--period: 37.6s;
|
|
--radius: #pr_mars.css;
|
|
--color: var(--background-alt);
|
|
|
|
width: var(--radius);
|
|
height: var(--radius);
|
|
|
|
background-color: var(--color);
|
|
right: #solposx.css;
|
|
bottom: #solposy.css;
|
|
|
|
-webkit-animation: orbit_mars var(--period) linear infinite;
|
|
-moz-animation: orbit_mars var(--period) linear infinite;
|
|
-o-animation: orbit_mars var(--period) linear infinite;
|
|
animation: orbit_mars var(--period) linear infinite;
|
|
}
|
|
#mars-orbit {
|
|
--orbit-radius: #or_mars.css;
|
|
--planet-radius: #pr_mars.css;
|
|
--orbit-thickness: #orbit_thickness.css;
|
|
--diameter: calc(2 * var(--orbit-radius) + (var(--planet-radius) - var(--orbit-thickness)) / 2);
|
|
|
|
right: #solposx.css;
|
|
bottom: #solposy.css;
|
|
transform: translate(#or_mars.css, #or_mars.css);
|
|
|
|
width: var(--diameter);
|
|
height: var(--diameter);
|
|
|
|
border: #orbit_thickness.css solid var(--background-alt);
|
|
}
|