motion-ui/backgrounds
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init: репозиторий backgrounds

Browse Source 
— Добавлен animated-cubes (геометрический полет на Keyframes)
— Добавлен solar-system-orrery (модель системы на Orbital Motion)
— Добавлен parallax-star (звездное небо на Box-Shadow)
— Добавлен fireflies (эффект светлячков и мягкого свечения)
— Добавлен steps-sprite-animation (покадровая анимация с jQuery управлением)
This commit is contained in:
Powermacintosh
2026-04-04 22:17:14 +03:00
commit 4bbe7f68da
21 changed files with 3287 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
solar-system-orrery/README.md
Executable
+15
View File
@@ -0,0 +1,15 @@
# 🪐 Solar System Orrery
Масштабная интерактивная модель Солнечной системы (Orrery), реализованная на чистом CSS3. Проект включает в себя Солнце и все планеты, вращающиеся по своим орбитам с реалистичным соотношением скоростей.
### Особенности
- **Pure CSS Motion**: Каждая планета использует уникальную анимацию `@keyframes` для вращения по орбите.
- **Visual Accuracy**: Соблюдены относительные размеры планет и периоды их обращения (от быстрого Меркурия до медленного Плутона).
- **Infinite Background**: Использование повторяющегося звездного фона для создания эффекта глубокого космоса.
### Технические детали
- **Orbital Mechanics**: Анимация реализована через двойную трансформацию (`rotate` -> `translateY` -> `rotate`), что позволяет планетам сохранять вертикальную ориентацию во время вращения.
- **Timing**: Значения `animation-duration` подобраны в соответствии с реальными астрономическими данными.
- **Layers**: Четкое разделение слоев (`z-index`) для планет и их орбитальных путей (`-path`).
solar-system-orrery/src/index.html
Executable
+54
View File
@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Solar System Orrery</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="system">
<div class="sun"></div>
<div class="mer-path"></div>
<div class="mer"></div>
<div class="ven-path"></div>
<div class="ven"></div>
<div class="ear-path"></div>
<div class="ear"><div class="lune"></div></div>
<div class="mar-path"></div>
<div class="mar">
<div class="pho"></div>
<div class="dem"></div>
</div>
<div class="jup-path"></div>
<div class="jup">
<div class="spot"></div>
<div class="jove io"></div>
<div class="jove eur"></div>
<div class="jove gan"></div>
<div class="jove cal"></div>
</div>
<div class="sat-path"></div>
<div class="sat">
<div class="f-ring"></div>
<div class="a-ring"></div>
<div class="b-ring"></div>
<div class="c-ring"></div>
</div>
<div class="ura-path"></div>
<div class="ura">
<div class="e-ring"></div>
</div>
<div class="nep-path"></div>
<div class="nep">
<div class="spot"></div>
</div>
<div class="plu-path"></div>
<div class="plu"></div>
</div>
<!-- partial -->
</body>
</html>
solar-system-orrery/src/style.css
Executable
+696
View File
@@ -0,0 +1,696 @@
body {
background-color: #012;
background-image: url("https://cssanimation.rocks/starwars/images/bg.jpg");
background-size: 33%;
background-repeat: repeat;
min-height: 2025px;
}
.system {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale(0.75);
}
.sun {
width: 144px;
height: 144px;
border-radius: 72px;
position: absolute;
top: 1066.6666666667px;
left: 50%;
margin: -72px;
background-image: url("http://sdo.gsfc.nasa.gov/assets/img/latest/latest_256_HMIIF.jpg");
background-size: 144px;
background-repeat: no-repeat;
}
@-webkit-keyframes rot-mer {
from {
-webkit-transform: rotate(0deg) translatey(-84px) rotate(0deg);
}
to {
-webkit-transform: rotate(360deg) translatey(-84px) rotate(-360deg);
}
}
@-keyframes rot-mer {
from {
transform: rotate(0deg) translatey(-84px) rotate(0deg);
}
to {
transform: rotate(360deg) translatey(-84px) rotate(-360deg);
}
}
.mer {
width: 3.5px;
height: 3.5px;
border-radius: 50%;
background-color: #888;
position: absolute;
top: 1066.6666666667px;
left: 50%;
margin: -1.75px;
-webkit-animation: rot-mer 0.88s infinite linear;
animation: rot-mer 0.88s infinite linear;
z-index: 200;
}
.mer-path {
width: 168px;
height: 168px;
border-radius: 50%;
z-index: 100;
position: absolute;
top: 1066.6666666667px;
left: 50%;
margin: -84px;
border: solid 1px #444;
}
@-webkit-keyframes rot-ven {
from {
-webkit-transform: rotate(0deg) translatey(-90px) rotate(0deg);
}
to {
-webkit-transform: rotate(360deg) translatey(-90px) rotate(-360deg);
}
}
@-keyframes rot-ven {
from {
transform: rotate(0deg) translatey(-90px) rotate(0deg);
}
to {
transform: rotate(360deg) translatey(-90px) rotate(-360deg);
}
}
.ven {
width: 5.5px;
height: 5.5px;
border-radius: 50%;
background-color: #f5f9be;
position: absolute;
top: 1066.6666666667px;
left: 50%;
margin: -2.75px;
-webkit-animation: rot-ven 2.25s infinite linear;
animation: rot-ven 2.25s infinite linear;
z-index: 200;
}
.ven-path {
width: 180px;
height: 180px;
border-radius: 50%;
z-index: 100;
position: absolute;
top: 1066.6666666667px;
left: 50%;
margin: -90px;
border: solid 1px #444;
}
@-webkit-keyframes rot-ear {
from {
-webkit-transform: rotate(0deg) translatey(-102px) rotate(0deg);
}
to {
-webkit-transform: rotate(360deg) translatey(-102px) rotate(-360deg);
}
}
@-keyframes rot-ear {
from {
transform: rotate(0deg) translatey(-102px) rotate(0deg);
}
to {
transform: rotate(360deg) translatey(-102px) rotate(-360deg);
}
}
.ear {
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #4b94f9;
position: absolute;
top: 1066.6666666667px;
left: 50%;
margin: -3.5px;
-webkit-animation: rot-ear 3.65s infinite linear;
animation: rot-ear 3.65s infinite linear;
z-index: 200;
}
.ear-path {
width: 204px;
height: 204px;
border-radius: 50%;
z-index: 100;
position: absolute;
top: 1066.6666666667px;
left: 50%;
margin: -102px;
border: solid 1px #444;
}
@-webkit-keyframes rot-mar {
from {
-webkit-transform: rotate(0deg) translatey(-118px) rotate(0deg);
}
to {
-webkit-transform: rotate(360deg) translatey(-118px) rotate(-360deg);
}
}
@-keyframes rot-mar {
from {
transform: rotate(0deg) translatey(-118px) rotate(0deg);
}
to {
transform: rotate(360deg) translatey(-118px) rotate(-360deg);
}
}
.mar {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #dd411a;
position: absolute;
top: 1066.6666666667px;
left: 50%;
margin: -3px;
-webkit-animation: rot-mar 6.87s infinite linear;
animation: rot-mar 6.87s infinite linear;
z-index: 200;
}
.mar-path {
width: 236px;
height: 236px;
border-radius: 50%;
z-index: 100;
position: absolute;
top: 1066.6666666667px;
left: 50%;
margin: -118px;
border: solid 1px #444;
}
@-webkit-keyframes rot-jup {
from {
-webkit-transform: rotate(0deg) translatey(-228px) rotate(0deg);
}
to {
-webkit-transform: rotate(360deg) translatey(-228px) rotate(-360deg);
}
}
@-keyframes rot-jup {
from {
transform: rotate(0deg) translatey(-228px) rotate(0deg);
}
to {
transform: rotate(360deg) translatey(-228px) rotate(-360deg);
}
}
.jup {
width: 70px;
height: 70px;
border-radius: 50%;
background-color: #eaad3b;
position: absolute;
top: 1066.6666666667px;
left: 50%;
margin: -35px;
-webkit-animation: rot-jup 43.32s infinite linear;
animation: rot-jup 43.32s infinite linear;
z-index: 200;
}
.jup-path {
width: 456px;
height: 456px;
border-radius: 50%;
z-index: 100;
position: absolute;
top: 1066.6666666667px;
left: 50%;
margin: -228px;
border: solid 1px #444;
}
@-webkit-keyframes rot-sat {
from {
-webkit-transform: rotate(0deg) translatey(-362px) rotate(0deg);
}
to {
-webkit-transform: rotate(360deg) translatey(-362px) rotate(-360deg);
}
}
@-keyframes rot-sat {
from {
transform: rotate(0deg) translatey(-362px) rotate(0deg);
}
to {
transform: rotate(360deg) translatey(-362px) rotate(-360deg);
}
}
.sat {
width: 58px;
height: 58px;
border-radius: 50%;
background-color: #d6cd93;
position: absolute;
top: 1066.6666666667px;
left: 50%;
margin: -29px;
-webkit-animation: rot-sat 107.59s infinite linear;
animation: rot-sat 107.59s infinite linear;
z-index: 200;
}
.sat-path {
width: 724px;
height: 724px;
border-radius: 50%;
z-index: 100;
position: absolute;
top: 1066.6666666667px;
left: 50%;
margin: -362px;
border: solid 1px #444;
}
@-webkit-keyframes rot-ura {
from {
-webkit-transform: rotate(0deg) translatey(-648px) rotate(0deg);
}
to {
-webkit-transform: rotate(360deg) translatey(-648px) rotate(-360deg);
}
}
@-keyframes rot-ura {
from {
transform: rotate(0deg) translatey(-648px) rotate(0deg);
}
to {
transform: rotate(360deg) translatey(-648px) rotate(-360deg);
}
}
.ura {
width: 26px;
height: 26px;
border-radius: 50%;
background-color: #bfeef2;
position: absolute;
top: 1066.6666666667px;
left: 50%;
margin: -13px;
-webkit-animation: rot-ura 306.87s infinite linear;
animation: rot-ura 306.87s infinite linear;
z-index: 200;
}
.ura-path {
width: 1296px;
height: 1296px;
border-radius: 50%;
z-index: 100;
position: absolute;
top: 1066.6666666667px;
left: 50%;
margin: -648px;
border: solid 1px #444;
}
@-webkit-keyframes rot-nep {
from {
-webkit-transform: rotate(0deg) translatey(-972px) rotate(0deg);
}
to {
-webkit-transform: rotate(360deg) translatey(-972px) rotate(-360deg);
}
}
@-keyframes rot-nep {
from {
transform: rotate(0deg) translatey(-972px) rotate(0deg);
}
to {
transform: rotate(360deg) translatey(-972px) rotate(-360deg);
}
}
.nep {
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #363ed7;
position: absolute;
top: 1066.6666666667px;
left: 50%;
margin: -12px;
-webkit-animation: rot-nep 601.9s infinite linear;
animation: rot-nep 601.9s infinite linear;
z-index: 200;
}
.nep-path {
width: 1944px;
height: 1944px;
border-radius: 50%;
z-index: 100;
position: absolute;
top: 1066.6666666667px;
left: 50%;
margin: -972px;
border: solid 1px #444;
}
@-webkit-keyframes rot-plu {
from {
-webkit-transform: rotate(0deg) translatey(-1246px) rotate(0deg);
}
to {
-webkit-transform: rotate(360deg) translatey(-1246px) rotate(-360deg);
}
}
@-keyframes rot-plu {
from {
transform: rotate(0deg) translatey(-1246px) rotate(0deg);
}
to {
transform: rotate(360deg) translatey(-1246px) rotate(-360deg);
}
}
.plu {
width: 3px;
height: 3px;
border-radius: 50%;
background-color: #963;
position: absolute;
top: 1066.6666666667px;
left: 50%;
margin: -1.5px;
-webkit-animation: rot-plu 904.65s infinite linear;
animation: rot-plu 904.65s infinite linear;
z-index: 200;
}
.plu-path {
width: 2492px;
height: 2492px;
border-radius: 50%;
z-index: 100;
position: absolute;
top: 1066.6666666667px;
left: 50%;
margin: -1246px;
border: solid 1px #444;
}
@-webkit-keyframes rot-lune {
from {
-webkit-transform: rotate(0deg) translatey(-7px) rotate(0deg);
}
to {
-webkit-transform: rotate(360deg) translatey(-7px) rotate(-360deg);
}
}
@-keyframes rot-lune {
from {
transform: rotate(0deg) translatey(-7px) rotate(0deg);
}
to {
transform: rotate(360deg) translatey(-7px) rotate(-360deg);
}
}
.lune {
width: 2px;
height: 2px;
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
margin: -1.5px;
-webkit-animation: rot-lune 0.27s infinite linear;
animation: rot-lune 0.27s infinite linear;
}
.mar {
background-image: repeating-linear-gradient(
to bottom,
#fff,
#fff 1px,
transparent 1px,
transparent 5px
);
}
@-webkit-keyframes rot-pho {
from {
-webkit-transform: rotate(0deg) translatey(-7px) rotate(0deg);
}
to {
-webkit-transform: rotate(360deg) translatey(-7px) rotate(-360deg);
}
}
@-keyframes rot-pho {
from {
transform: rotate(0deg) translatey(-7px) rotate(0deg);
}
to {
transform: rotate(360deg) translatey(-7px) rotate(-360deg);
}
}
@-webkit-keyframes rot-dem {
from {
-webkit-transform: rotate(0deg) translatey(-9px) rotate(0deg);
}
to {
-webkit-transform: rotate(360deg) translatey(-9px) rotate(-360deg);
}
}
@-keyframes rot-dem {
from {
transform: rotate(0deg) translatey(-9px) rotate(0deg);
}
to {
transform: rotate(360deg) translatey(-9px) rotate(-360deg);
}
}
.pho,
.dem {
width: 1px;
height: 1px;
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
}
.pho {
margin: -1px;
-webkit-animation: rot-pho 0.15s infinite linear;
animation: rot-pho 0.15s infinite linear;
}
.dem {
margin: -1px;
-webkit-animation: rot-dem 0.2s infinite linear;
animation: rot-dem 0.2s infinite linear;
}
.jove {
width: 2px;
height: 2px;
background-color: #fff;
position: absolute;
top: 35px;
left: 50%;
}
@-webkit-keyframes rot-io {
from {
-webkit-transform: rotate(0deg) translatey(-39px) rotate(0deg);
}
to {
-webkit-transform: rotate(360deg) translatey(-39px) rotate(-360deg);
}
}
@-keyframes rot-io {
from {
transform: rotate(0deg) translatey(-39px) rotate(0deg);
}
to {
transform: rotate(360deg) translatey(-39px) rotate(-360deg);
}
}
@-webkit-keyframes rot-eur {
from {
-webkit-transform: rotate(0deg) translatey(-41px) rotate(0deg);
}
to {
-webkit-transform: rotate(360deg) translatey(-41px) rotate(-360deg);
}
}
@-keyframes rot-eur {
from {
transform: rotate(0deg) translatey(-41px) rotate(0deg);
}
to {
transform: rotate(360deg) translatey(-41px) rotate(-360deg);
}
}
@-webkit-keyframes rot-gan {
from {
-webkit-transform: rotate(0deg) translatey(-45px) rotate(0deg);
}
to {
-webkit-transform: rotate(360deg) translatey(-45px) rotate(-360deg);
}
}
@-keyframes rot-gan {
from {
transform: rotate(0deg) translatey(-45px) rotate(0deg);
}
to {
transform: rotate(360deg) translatey(-45px) rotate(-360deg);
}
}
@-webkit-keyframes rot-cal {
from {
-webkit-transform: rotate(0deg) translatey(-53px) rotate(0deg);
}
to {
-webkit-transform: rotate(360deg) translatey(-53px) rotate(-360deg);
}
}
@-keyframes rot-cal {
from {
transform: rotate(0deg) translatey(-53px) rotate(0deg);
}
to {
transform: rotate(360deg) translatey(-53px) rotate(-360deg);
}
}
.io {
-webkit-animation: rot-io 0.2s infinite linear;
animation: rot-io 0.2s infinite linear;
}
.eur {
-webkit-animation: rot-eur 0.35s infinite linear;
animation: rot-eur 0.35s infinite linear;
}
.gan {
-webkit-animation: rot-gan 0.7s infinite linear;
animation: rot-gan 0.7s infinite linear;
}
.cal {
-webkit-animation: rot-cal 1.65s infinite linear;
animation: rot-cal 1.65s infinite linear;
}
.jup {
background-image: repeating-linear-gradient(
6deg,
#797663 22px,
#e1dcde 16px,
#c3a992 30px,
#e9ece2 30px
);
}
.spot {
position: absolute;
width: 16px;
height: 12px;
border-radius: 8px/6px;
top: 45px;
left: 50%;
background-color: #bc833b;
box-shadow: 0px 0px 5px #e1dcde;
border: solid 1px #e1dcde;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
z-index: 300;
}
.nep .spot {
background-color: #29319d;
border: 0;
box-shadow: none;
top: 50%;
left: 45%;
width: 10px;
height: 6px;
margin: -2px;
border-radius: 5px/3px;
border-left: solid 1px #7ed6fe;
}
div[class$="-ring"] {
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
opacity: 0.7;
transform: rotatex(45deg);
}
.a-ring {
border: solid 5px #96866f;
width: 119px;
height: 119px;
margin: -64.5px;
}
.b-ring {
border: solid 10px #554c3c;
width: 104px;
height: 104px;
margin: -62px;
}
.c-ring {
border: solid 9px #574f4a;
width: 95px;
height: 95px;
margin: -56.5px;
}
.f-ring {
border: solid 2px #908e8d;
width: 133px;
height: 133px;
margin: -68.5px;
}
.e-ring {
border: solid 7px #908e8d;
width: 76px;
height: 76px;
margin: -45px;
transform: rotatex(0deg) rotatey(89deg) !important;
}
.plu,
.plu-path {
top: 1354.0666666667px;
}
solar-system-orrery/src/style.scss
Executable
+350
View File
@@ -0,0 +1,350 @@
/**
* I was out the other evening looking at Venus with the setting sun and thought, I wonder where all the planets
* are in relation to each other right now. I knew what an Orrery was, but I'd never built one. So, given my mate
* Donovan's (@donovanh: http://cssanimation.rocks/) penchant for CSS animation, I thought I'd give it a go
* building one in pure CSS.
*
* Many thanks to @aidandore and @iandevlin too for suggestions and improvements
*
* Chin up Pluto. You'll always be a planet to me...
*
* Tady: http://tady.me
* @tadywankenobi
*/
/**
* Move in a circle without wrapper elements
* Idea by Aryeh Gregor, simplified by Lea Verou, borrowed by me!
*/
@mixin vp-anim($radius,$pname, $deg: 360deg) {
@-webkit-keyframes rot-#{$pname} {
from {
-webkit-transform: rotate(0deg)
translatey(-$radius)
rotate(0deg);
}
to {
-webkit-transform: rotate(360deg)
translatey(-$radius)
rotate(-$deg);
}
}
@-moz-keyframes rot-#{$pname} {
from {
-moz-transform: rotate(0deg)
translatey(-$radius)
rotate(0deg);
}
to {
-moz-transform: rotate(360deg)
translatey(-$radius)
rotate(-$deg);
}
}
@-keyframes rot-#{$pname} {
from {
transform: rotate(0deg)
translatey(-$radius)
rotate(0deg);
}
to {
transform: rotate(360deg)
translatey(-$radius)
rotate(-$deg);
}
}
}
$baseUnit: 0.1; // Speed of Orrery. At 1, 1 sec = 1 day
$sunRad: 72px; // Radius of the sun, added to orbit radii
$rFactor: 2; // Adding a radius factor so orbit radii are easier to observe
$middleOffset: 800px;
$scale: 0.75; // Play around with changing this to change the visible motion default: 0.75
$middle: $middleOffset*(1/$scale);
$planets: (
('mer',8.8s*$baseUnit,(6px*$rFactor)+$sunRad,1.75px,#888),
('ven',22.5s*$baseUnit,(9px*$rFactor)+$sunRad,2.75px,#f5f9be),
('ear',36.5s*$baseUnit,(15px*$rFactor)+$sunRad,3.5px,#4b94f9),
('mar',68.7s*$baseUnit,(23px*$rFactor)+$sunRad,3px,#dd411a),
('jup',433.2s*$baseUnit,(78px*$rFactor)+$sunRad,35px,#eaad3b),
('sat',1075.9s*$baseUnit,(145px*$rFactor)+$sunRad,29px,#d6cd93),
('ura',3068.7s*$baseUnit,(288px*$rFactor)+$sunRad,13px,#bfeef2),
('nep',6019s*$baseUnit,(450px*$rFactor)+$sunRad,12px,#363ed7),
('plu',9046.5s*$baseUnit,(587px*$rFactor)+$sunRad,1.5px,#963)
);
body {
background-color: #012;
background-image: url('https://cssanimation.rocks/starwars/images/bg.jpg');
background-size: 33%;
background-repeat: repeat;
min-height: 2700px * $scale;
}
.system {
position:relative;
top: 0; left: 0;
width:100%;
height:100%;
-webkit-transform: scale($scale);
-moz-transform: scale($scale);
transform: scale($scale);
}
.sun {
width: $sunRad*2;
height:$sunRad*2;
border-radius: $sunRad;
position:absolute;
top: $middle;
left:50%;
margin: -$sunRad;
//background-color: yellow;
background-image: url('http://sdo.gsfc.nasa.gov/assets/img/latest/latest_256_HMIIF.jpg');
background-size:$sunRad*2;
background-repeat:no-repeat;
}
@each $planet in $planets {
$name: nth($planet, 1);
$orb: nth($planet,2);
$rad: nth($planet,3);
$prad: nth($planet,4);
$col: nth($planet,5);
@include vp-anim($rad,$name);
.#{$name} {
width: $prad * 2;
height: $prad*2;
border-radius:50%;
background-color:$col;
position: absolute;
top: $middle;
left: 50%;
margin: -$prad;
-webkit-animation: rot-#{$name} $orb infinite linear;
-moz-animation: rot-#{$name} $orb infinite linear;
animation: rot-#{$name} $orb infinite linear;
z-index:200;
}
.#{$name}-path {
$orbitPath: $rad*2;
width: $orbitPath;
height: $orbitPath;
border-radius:50%;
z-index:100;
position:absolute;
top: $middle;
left:50%;
margin:-($orbitPath / 2);
border: solid 1px #444;
}
}
@include vp-anim(7px,lune);
.lune {
width:2px;
height:2px;
background-color: #fff;
position:absolute;
$lunOrb: 2.7s * $baseUnit;
top: 50%;
left:50%;
margin:-1.5px;
-webkit-animation: rot-lune $lunOrb infinite linear;
-moz-animation: rot-lune $lunOrb infinite linear;
animation: rot-lune $lunOrb infinite linear;
}
.mar {
background-image: repeating-linear-gradient(
to bottom,
#fff,
#fff 1px,
transparent 1px,
transparent 5px
);
}
@include vp-anim(7px,pho);
@include vp-anim(9px,dem);
.pho, .dem {
width:1px;
height:1px;
background-color: #fff;
position:absolute;
top: 50%;
left:50%;
}
.pho {
$phoOrb: 1.5s * $baseUnit; // Should be 0.33s but spins like it's having a fit.
margin:-1px;
-webkit-animation: rot-pho $phoOrb infinite linear;
-moz-animation: rot-pho $phoOrb infinite linear;
animation: rot-pho $phoOrb infinite linear;
}
.dem {
$demOrb: 2s * $baseUnit; // Should be 1.25s, spins too fast
margin:-1px;
-webkit-animation: rot-dem $demOrb infinite linear;
-moz-animation: rot-dem $demOrb infinite linear;
animation: rot-dem $demOrb infinite linear;
}
$jupR: 35px;
.jove {
width:2px;
height:2px;
background-color: #fff;
position:absolute;
top: $jupR;
left:50%;
}
@include vp-anim($jupR + 4px,io);
@include vp-anim($jupR + 6px,eur);
@include vp-anim($jupR + 10px,gan);
@include vp-anim($jupR + 18px,cal);
.io {
$jioOrb: 2s*$baseUnit;
-webkit-animation: rot-io $jioOrb infinite linear;
-moz-animation: rot-io $jioOrb infinite linear;
animation: rot-io $jioOrb infinite linear;
}
.eur {
$jeurOrb: 3.5s*$baseUnit;
-webkit-animation: rot-eur $jeurOrb infinite linear;
-moz-animation: rot-eur $jeurOrb infinite linear;
animation: rot-eur $jeurOrb infinite linear;
}
.gan {
$jganOrb: 7s*$baseUnit;
-webkit-animation: rot-gan $jganOrb infinite linear;
-moz-animation: rot-gan $jganOrb infinite linear;
animation: rot-gan $jganOrb infinite linear;
}
.cal {
$jcalOrb: 16.5s*$baseUnit;
-webkit-animation: rot-cal $jcalOrb infinite linear;
-moz-animation: rot-cal $jcalOrb infinite linear;
animation: rot-cal $jcalOrb infinite linear;
}
.jup {
background-image: repeating-linear-gradient(
6deg,
#797663 22px,
#e1dcde 16px,
#c3a992 30px,
#e9ece2 30px
);
}
.spot {
position:absolute;
width:16px;height:12px;
border-radius: 8px / 6px;
top: $jupR+10;
left:50%;
background-color:#bc833b;
box-shadow: 0px 0px 5px #e1dcde;
border:solid 1px #e1dcde;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
z-index:300;
.nep & {
background-color:darken(#343ec5, 10%);
border: 0;
box-shadow: none;
top: 50%;
left:45%;
width: 10px;
height: 6px;
margin: -2px;
border-radius: 5px / 3px;
border-left:solid 1px #7ed6fe;
}
}
$satD: 29px * 2;
div[class$="-ring"] {
border-radius: 50%;
position:absolute;
top: 50%;
left:50%;
opacity: 0.7;
$tilt: 45deg;
-webkit-transform: rotatex($tilt);
-moz-transform: rotatex($tilt);
transform: rotatex($tilt);
}
.a-ring {
$ringD: $satD + 61;
$ringW: 5px;
border:solid $ringW #96866f;
width: $ringD;
height: $ringD;
margin: -($ringD / 2) - $ringW;
}
.b-ring {
$ringD: $satD + 46;
$ringW: 10px;
border:solid $ringW #554c3c;
width: $ringD;
height: $ringD;
margin: -($ringD / 2) - $ringW;
}
.c-ring {
$ringD: $satD + 37;
$ringW: 9px;
border:solid $ringW #574f4a;
width: $ringD;
height: $ringD;
margin: -($ringD / 2) - $ringW;
}
.f-ring {
$ringD: $satD + 75;
$ringW: 2px;
border:solid $ringW #908e8d;
width: $ringD;
height: $ringD;
margin: -($ringD / 2) - $ringW;
}
$uraD: 13px * 2;
.e-ring {
$ringD: $uraD + 50;
$ringW: 7px;
border:solid $ringW #908e8d;
width: $ringD;
height: $ringD;
margin: -($ringD / 2) - $ringW;
$tilt: 0deg;
$axis: 89deg;
-webkit-transform: rotatex($tilt) rotatey($axis) !important;
-moz-transform: rotatex($tilt) rotatey($axis) !important;
transform: rotatex($tilt) rotatey($axis) !important;
}
.plu, .plu-path {
top: $middle + 287.4px;
}