init: репозиторий backgrounds
— Добавлен animated-cubes (геометрический полет на Keyframes) — Добавлен solar-system-orrery (модель системы на Orbital Motion) — Добавлен parallax-star (звездное небо на Box-Shadow) — Добавлен fireflies (эффект светлячков и мягкого свечения) — Добавлен steps-sprite-animation (покадровая анимация с jQuery управлением)
This commit is contained in:
genesis committed
commit
4bbe7f68da
21 files changed
+3287
No files matched your search
@@ -0,0 +1,20 @@
|
|||||||
|
# 🌌 Animated Web Backgrounds
|
||||||
|
|
||||||
|
Коллекция эффектных и легких фонов для веб-проектов.
|
||||||
|
Почти все решения реализованы на **Pure CSS**, что обеспечивает высокую производительность без использования JavaScript (за исключением интерактивных элементов в Steps Animation).
|
||||||
|
|
||||||
|
## Каталог фонов
|
||||||
|
|
||||||
|
| Превью | Компонент (Путь к папке) | Стиль | Технология |
|
||||||
|
| :----- | :------------------------------------------------ | :-------- | :-------------------------- |
|
||||||
|
| 🧊 | **[animated-cubes](./animated-cubes/)** | Геометрия | CSS Keyframes & Scale |
|
||||||
|
| 🪐 | **[solar-system-orrery](./solar-system-orrery/)** | Космос | CSS Orbital Motion |
|
||||||
|
| 🌌 | **[parallax-star](./parallax-star/)** | Космос | CSS Box-Shadow Parallax |
|
||||||
|
| ✨ | **[fireflies](./fireflies/)** | Энергия | CSS Keyframes & Glow |
|
||||||
|
| 🏃 | **[steps-sprite](./steps-animation/)** | Спрайт | CSS Steps & **JS (jQuery)** |
|
||||||
|
|
||||||
|
## Технологии
|
||||||
|
|
||||||
|
- **HTML5** (Минималистичная разметка)
|
||||||
|
- **CSS3** (Animations, Transforms, Custom Properties)
|
||||||
|
- **JavaScript / jQuery** (Только для управления в Steps Animation)
|
||||||
Executable
+15
@@ -0,0 +1,15 @@
|
|||||||
|
# 🧊 Animated Cubes Background
|
||||||
|
|
||||||
|
Геометрический анимированный фон с разлетающимися и вращающимися кубами. Создает эффект глубины и динамики для лендингов или героических (Hero) секций.
|
||||||
|
|
||||||
|
### Особенности
|
||||||
|
|
||||||
|
- **3D Motion**: Использование `scale` и `rotate` в одном ключевом кадре создает иллюзию полета кубов из центра.
|
||||||
|
- **Pure CSS**: Анимация работает без JavaScript, что минимизирует нагрузку на браузер.
|
||||||
|
- **Staggered Effect**: Разное время появления кубов реализовано через `animation-delay`.
|
||||||
|
|
||||||
|
### Технические детали
|
||||||
|
|
||||||
|
- **Animation**: Основной цикл `cube` длится 12 секунд с плавным затуханием (`opacity: 0`).
|
||||||
|
- **Positions**: Кубы распределены по экрану с помощью `vw` (ширина) и `vh` (высота).
|
||||||
|
- **Typography**: Используется шрифт **Montserrat**, импортируемый из Google Fonts.
|
||||||
Executable
+24
@@ -0,0 +1,24 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" >
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Animated Cubes Background</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="hero">
|
||||||
|
<div class="hero__title">Hello World</div>
|
||||||
|
<div class="cube"></div>
|
||||||
|
<div class="cube"></div>
|
||||||
|
<div class="cube"></div>
|
||||||
|
<div class="cube"></div>
|
||||||
|
<div class="cube"></div>
|
||||||
|
<div class="cube"></div>
|
||||||
|
</div>
|
||||||
|
<!-- partial -->
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Executable
+94
@@ -0,0 +1,94 @@
|
|||||||
|
@import url("https://fonts.googleapis.com/css?family=Montserrat:700");
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
background-color: #0040c1;
|
||||||
|
position: relative;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
font-family: "Montserrat", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__title {
|
||||||
|
color: #fff;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
font-size: 50px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cube {
|
||||||
|
position: absolute;
|
||||||
|
top: 80vh;
|
||||||
|
left: 45vw;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border: solid 1px #003298;
|
||||||
|
transform-origin: top left;
|
||||||
|
transform: scale(0) rotate(0deg) translate(-50%, -50%);
|
||||||
|
-webkit-animation: cube 12s ease-in forwards infinite;
|
||||||
|
animation: cube 12s ease-in forwards infinite;
|
||||||
|
}
|
||||||
|
.cube:nth-child(2n) {
|
||||||
|
border-color: #0051f4;
|
||||||
|
}
|
||||||
|
.cube:nth-child(2) {
|
||||||
|
-webkit-animation-delay: 2s;
|
||||||
|
animation-delay: 2s;
|
||||||
|
left: 25vw;
|
||||||
|
top: 40vh;
|
||||||
|
}
|
||||||
|
.cube:nth-child(3) {
|
||||||
|
-webkit-animation-delay: 4s;
|
||||||
|
animation-delay: 4s;
|
||||||
|
left: 75vw;
|
||||||
|
top: 50vh;
|
||||||
|
}
|
||||||
|
.cube:nth-child(4) {
|
||||||
|
-webkit-animation-delay: 6s;
|
||||||
|
animation-delay: 6s;
|
||||||
|
left: 90vw;
|
||||||
|
top: 10vh;
|
||||||
|
}
|
||||||
|
.cube:nth-child(5) {
|
||||||
|
-webkit-animation-delay: 8s;
|
||||||
|
animation-delay: 8s;
|
||||||
|
left: 10vw;
|
||||||
|
top: 85vh;
|
||||||
|
}
|
||||||
|
.cube:nth-child(6) {
|
||||||
|
-webkit-animation-delay: 10s;
|
||||||
|
animation-delay: 10s;
|
||||||
|
left: 50vw;
|
||||||
|
top: 10vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes cube {
|
||||||
|
from {
|
||||||
|
transform: scale(0) rotate(0deg) translate(-50%, -50%);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: scale(20) rotate(960deg) translate(-50%, -50%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes cube {
|
||||||
|
from {
|
||||||
|
transform: scale(0) rotate(0deg) translate(-50%, -50%);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: scale(20) rotate(960deg) translate(-50%, -50%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
Executable
+76
@@ -0,0 +1,76 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css?family=Montserrat:700');
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
background-color: #0040C1;
|
||||||
|
position: relative;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__title {
|
||||||
|
color: #fff;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
font-size: 50px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cube {
|
||||||
|
position: absolute;
|
||||||
|
top: 80vh;
|
||||||
|
left: 45vw;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border: solid 1px darken(#0040C1, 8%);
|
||||||
|
transform-origin: top left;
|
||||||
|
transform: scale(0) rotate(0deg) translate(-50%, -50%);
|
||||||
|
animation: cube 12s ease-in forwards infinite;
|
||||||
|
|
||||||
|
&:nth-child(2n) {
|
||||||
|
border-color: lighten(#0040C1, 10%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(2) {
|
||||||
|
animation-delay: 2s;
|
||||||
|
left: 25vw;
|
||||||
|
top: 40vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(3) {
|
||||||
|
animation-delay: 4s;
|
||||||
|
left: 75vw;
|
||||||
|
top: 50vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(4) {
|
||||||
|
animation-delay: 6s;
|
||||||
|
left: 90vw;
|
||||||
|
top: 10vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(5) {
|
||||||
|
animation-delay: 8s;
|
||||||
|
left: 10vw;
|
||||||
|
top: 85vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(6) {
|
||||||
|
animation-delay: 10s;
|
||||||
|
left: 50vw;
|
||||||
|
top: 10vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes cube {
|
||||||
|
from {
|
||||||
|
transform: scale(0) rotate(0deg) translate(-50%, -50%);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: scale(20) rotate(960deg) translate(-50%, -50%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
Executable
+15
@@ -0,0 +1,15 @@
|
|||||||
|
# ✨ CSS Fireflies Background
|
||||||
|
|
||||||
|
Элегантный и спокойный фон с анимированными светлячками. Полностью реализован на чистом HTML/CSS, создавая глубокую атмосферу за счет хаотичного движения и мягкого мерцания.
|
||||||
|
|
||||||
|
### Особенности
|
||||||
|
|
||||||
|
- **Natural Motion**: Каждый светлячок движется по уникальной траектории, заданной через сложные `@keyframes` (move1, move2 и т.д.).
|
||||||
|
- **Double Animation**: Элементы используют комбинацию зацикленного движения (`drift`) и мерцания (`flash`).
|
||||||
|
- **Zero JS**: Анимация не требует скриптов и работает плавно благодаря аппаратной поддержке трансформаций.
|
||||||
|
|
||||||
|
### Технические детали
|
||||||
|
|
||||||
|
- **Particles**: Светлячки созданы с использованием псевдоэлементов `::before` (тень/тело) и `::after` (свечение).
|
||||||
|
- **Glow**: Эффект свечения реализован через `box-shadow: yellow` с анимацией прозрачности.
|
||||||
|
- **Randomization**: Разнообразие достигается за счет использования `nth-child` с разными задержками и длительностью анимации.
|
||||||
Executable
+31
@@ -0,0 +1,31 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" >
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>CSS Fireflies</title>
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- partial:index.partial.html -->
|
||||||
|
<!-- Quantity should be the same in Sass-->
|
||||||
|
<div class="firefly"></div>
|
||||||
|
<div class="firefly"></div>
|
||||||
|
<div class="firefly"></div>
|
||||||
|
<div class="firefly"></div>
|
||||||
|
<div class="firefly"></div>
|
||||||
|
<div class="firefly"></div>
|
||||||
|
<div class="firefly"></div>
|
||||||
|
<div class="firefly"></div>
|
||||||
|
<div class="firefly"></div>
|
||||||
|
<div class="firefly"></div>
|
||||||
|
<div class="firefly"></div>
|
||||||
|
<div class="firefly"></div>
|
||||||
|
<div class="firefly"></div>
|
||||||
|
<div class="firefly"></div>
|
||||||
|
<div class="firefly"></div>
|
||||||
|
<!-- partial -->
|
||||||
|
<script src="./script.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Executable
+1302
File diff suppressed because it is too large.
Load diff
Executable
+75
@@ -0,0 +1,75 @@
|
|||||||
|
// Quantity should be the same in PUG
|
||||||
|
$quantity: 15
|
||||||
|
|
||||||
|
html, body
|
||||||
|
height: 100%
|
||||||
|
|
||||||
|
body
|
||||||
|
background: url(https://i.pinimg.com/originals/44/6e/3b/446e3b79395a287ca32f7977dd83b290.jpg)
|
||||||
|
background-size: cover
|
||||||
|
|
||||||
|
.firefly
|
||||||
|
position: fixed
|
||||||
|
left: 50%
|
||||||
|
top: 50%
|
||||||
|
width: 0.4vw
|
||||||
|
height: 0.4vw
|
||||||
|
margin: -0.2vw 0 0 9.8vw
|
||||||
|
animation: ease 200s alternate infinite
|
||||||
|
pointer-events: none
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after
|
||||||
|
content: ''
|
||||||
|
position: absolute
|
||||||
|
width: 100%
|
||||||
|
height: 100%
|
||||||
|
border-radius: 50%
|
||||||
|
transform-origin: -10vw
|
||||||
|
|
||||||
|
&::before
|
||||||
|
background: black
|
||||||
|
opacity: 0.4
|
||||||
|
animation: drift ease alternate infinite
|
||||||
|
|
||||||
|
&::after
|
||||||
|
background: white
|
||||||
|
opacity: 0
|
||||||
|
box-shadow: 0 0 0vw 0vw yellow
|
||||||
|
animation: drift ease alternate infinite, flash ease infinite
|
||||||
|
|
||||||
|
|
||||||
|
// Randomize Fireflies Motion
|
||||||
|
@for $i from 1 through $quantity
|
||||||
|
|
||||||
|
$steps: random(12) + 16
|
||||||
|
$rotationSpeed: random(10) + 8s
|
||||||
|
|
||||||
|
.firefly:nth-child(#{$i})
|
||||||
|
animation-name: move#{$i}
|
||||||
|
|
||||||
|
&::before
|
||||||
|
animation-duration: #{$rotationSpeed}
|
||||||
|
|
||||||
|
&::after
|
||||||
|
animation-duration: #{$rotationSpeed}, random(6000) + 5000ms
|
||||||
|
animation-delay: 0ms, random(8000) + 500ms
|
||||||
|
|
||||||
|
@keyframes move#{$i}
|
||||||
|
@for $step from 0 through $steps
|
||||||
|
#{$step * (100 / $steps)}%
|
||||||
|
transform: translateX(random(100) - 50vw) translateY(random(100) - 50vh) scale(random(75) / 100 + .25)
|
||||||
|
|
||||||
|
@keyframes drift
|
||||||
|
0%
|
||||||
|
transform: rotate(0deg)
|
||||||
|
100%
|
||||||
|
transform: rotate(360deg)
|
||||||
|
|
||||||
|
@keyframes flash
|
||||||
|
0%, 30%, 100%
|
||||||
|
opacity: 0
|
||||||
|
box-shadow: 0 0 0vw 0vw yellow
|
||||||
|
5%
|
||||||
|
opacity: 1
|
||||||
|
box-shadow: 0 0 2vw 0.4vw yellow
|
||||||
Executable
+15
@@ -0,0 +1,15 @@
|
|||||||
|
# 🌌 Parallax Star Background
|
||||||
|
|
||||||
|
Многослойный анимированный фон звездного неба с эффектом параллакса. Звезды разного размера движутся с разной скоростью, создавая ощущение полета сквозь глубокий космос.
|
||||||
|
|
||||||
|
### Особенности
|
||||||
|
|
||||||
|
- **Performance Optimized**: Сотни звезд генерируются как тени (`box-shadow`) одного элемента, что значительно экономит ресурсы процессора.
|
||||||
|
- **Parallax Effect**: Три слоя звезд (`#stars`, `#stars2`, `#stars3`) движутся с разной скоростью, создавая иллюзию объема.
|
||||||
|
- **Pure CSS**: Вся логика анимации и визуализации построена на стандартных свойствах CSS без использования тяжелых JS-библиотек.
|
||||||
|
|
||||||
|
### Технические детали
|
||||||
|
|
||||||
|
- **Background**: Используется `radial-gradient` для создания мягкого свечения у горизонта.
|
||||||
|
- **Keyframes**: Анимация `animStar` плавно перемещает слои снизу вверх, зацикливая движение.
|
||||||
|
- **Sass Origin**: Оригинальный код был сгенерирован функцией Sass для рандомизации координат, в текущем репозитории представлена чистая CSS-версия.
|
||||||
Executable
+28
@@ -0,0 +1,28 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" >
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Parallax Star background in CSS</title>
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- partial:index.partial.html -->
|
||||||
|
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
|
||||||
|
<div id='stars'></div>
|
||||||
|
<div id='stars2'></div>
|
||||||
|
<div id='stars3'></div>
|
||||||
|
<div id='title'>
|
||||||
|
<span>
|
||||||
|
PURE CSS
|
||||||
|
</span>
|
||||||
|
<br>
|
||||||
|
<span>
|
||||||
|
PARALLAX PIXEL STARS
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<!-- partial -->
|
||||||
|
<script src="./script.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Executable
+85
@@ -0,0 +1,85 @@
|
|||||||
|
html {
|
||||||
|
height: 100%;
|
||||||
|
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#stars {
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
background: transparent;
|
||||||
|
box-shadow: 791px 689px #FFF , 1793px 1755px #FFF , 1404px 922px #FFF , 1690px 1534px #FFF , 448px 1961px #FFF , 548px 1718px #FFF , 1880px 221px #FFF , 951px 2000px #FFF , 1842px 1157px #FFF , 1929px 1220px #FFF , 725px 895px #FFF , 1668px 625px #FFF , 845px 1456px #FFF , 1682px 1431px #FFF , 1945px 1666px #FFF , 607px 248px #FFF , 665px 398px #FFF , 74px 1511px #FFF , 775px 712px #FFF , 626px 1566px #FFF , 583px 59px #FFF , 628px 300px #FFF , 828px 1996px #FFF , 1202px 1612px #FFF , 866px 1350px #FFF , 959px 1048px #FFF , 434px 1811px #FFF , 939px 1614px #FFF , 1793px 1772px #FFF , 453px 764px #FFF , 241px 1210px #FFF , 962px 897px #FFF , 204px 753px #FFF , 505px 1888px #FFF , 467px 1895px #FFF , 1079px 85px #FFF , 88px 1217px #FFF , 1983px 284px #FFF , 207px 1348px #FFF , 732px 263px #FFF , 1421px 1444px #FFF , 293px 163px #FFF , 1070px 1909px #FFF , 1510px 1064px #FFF , 178px 1855px #FFF , 1842px 261px #FFF , 1812px 606px #FFF , 255px 44px #FFF , 486px 198px #FFF , 693px 1607px #FFF , 1848px 887px #FFF , 1638px 879px #FFF , 1144px 1975px #FFF , 1753px 932px #FFF , 710px 37px #FFF , 750px 738px #FFF , 1865px 1266px #FFF , 1503px 149px #FFF , 469px 1340px #FFF , 1951px 1295px #FFF , 1971px 1158px #FFF , 1801px 1381px #FFF , 229px 1030px #FFF , 1336px 514px #FFF , 1103px 576px #FFF , 1526px 1663px #FFF , 1480px 1530px #FFF , 264px 288px #FFF , 306px 1780px #FFF , 586px 1494px #FFF , 1781px 758px #FFF , 1313px 1087px #FFF , 1461px 293px #FFF , 938px 432px #FFF , 1727px 1090px #FFF , 919px 382px #FFF , 829px 1806px #FFF , 213px 1642px #FFF , 7px 362px #FFF , 1637px 718px #FFF , 1939px 1908px #FFF , 868px 351px #FFF , 1258px 657px #FFF , 237px 1442px #FFF , 1083px 655px #FFF , 527px 930px #FFF , 1077px 105px #FFF , 953px 37px #FFF , 1578px 668px #FFF , 1165px 14px #FFF , 69px 789px #FFF , 415px 1726px #FFF , 814px 811px #FFF , 1866px 1430px #FFF , 593px 1543px #FFF , 1238px 1842px #FFF , 359px 1630px #FFF , 1117px 1036px #FFF , 706px 790px #FFF , 551px 904px #FFF , 1684px 1586px #FFF , 1424px 1866px #FFF , 1276px 1001px #FFF , 1246px 1076px #FFF , 685px 1711px #FFF , 1566px 1080px #FFF , 5px 821px #FFF , 1507px 716px #FFF , 573px 1933px #FFF , 712px 1523px #FFF , 1221px 1303px #FFF , 1831px 1525px #FFF , 766px 825px #FFF , 1236px 387px #FFF , 1726px 1695px #FFF , 424px 129px #FFF , 514px 871px #FFF , 950px 1820px #FFF , 751px 982px #FFF , 1652px 409px #FFF , 347px 506px #FFF , 862px 316px #FFF , 1193px 623px #FFF , 768px 91px #FFF , 855px 724px #FFF , 505px 284px #FFF , 1485px 946px #FFF , 132px 134px #FFF , 1155px 1522px #FFF , 1058px 1392px #FFF , 544px 1625px #FFF , 142px 711px #FFF , 559px 1772px #FFF , 843px 1623px #FFF , 41px 553px #FFF , 802px 770px #FFF , 1237px 478px #FFF , 1497px 794px #FFF , 964px 1778px #FFF , 1614px 32px #FFF , 255px 1628px #FFF , 969px 410px #FFF , 67px 964px #FFF , 745px 474px #FFF , 536px 732px #FFF , 1568px 1510px #FFF , 360px 687px #FFF , 1779px 557px #FFF , 1180px 318px #FFF , 1837px 890px #FFF , 1127px 445px #FFF , 1801px 187px #FFF , 428px 1422px #FFF , 622px 241px #FFF , 360px 1620px #FFF , 1004px 618px #FFF , 1057px 205px #FFF , 678px 1832px #FFF , 235px 1529px #FFF , 791px 258px #FFF , 1844px 1333px #FFF , 989px 1278px #FFF , 138px 230px #FFF , 69px 1560px #FFF , 1226px 269px #FFF , 980px 1186px #FFF , 457px 1383px #FFF , 759px 107px #FFF , 1812px 306px #FFF , 1967px 1404px #FFF , 150px 1658px #FFF , 894px 314px #FFF , 1571px 1456px #FFF , 1921px 181px #FFF , 108px 1669px #FFF , 1296px 1233px #FFF , 1157px 1127px #FFF , 462px 672px #FFF , 1720px 625px #FFF , 1870px 1770px #FFF , 1603px 476px #FFF , 1963px 1137px #FFF , 979px 864px #FFF , 648px 170px #FFF , 1831px 1505px #FFF , 729px 1292px #FFF , 1024px 1683px #FFF , 200px 143px #FFF , 1566px 1202px #FFF , 772px 468px #FFF , 1198px 1677px #FFF , 1758px 535px #FFF , 232px 1233px #FFF , 1395px 935px #FFF , 1774px 1621px #FFF , 1424px 400px #FFF , 962px 1594px #FFF , 967px 981px #FFF , 580px 525px #FFF , 59px 1138px #FFF , 1736px 963px #FFF , 845px 568px #FFF , 1723px 1051px #FFF , 203px 1235px #FFF , 1718px 1458px #FFF , 309px 65px #FFF , 331px 1779px #FFF , 1963px 1340px #FFF , 819px 1710px #FFF , 255px 426px #FFF , 578px 1998px #FFF , 1537px 1626px #FFF , 766px 492px #FFF , 774px 312px #FFF , 475px 831px #FFF , 571px 1900px #FFF , 594px 723px #FFF , 212px 1872px #FFF , 423px 959px #FFF , 48px 506px #FFF , 275px 1617px #FFF , 1460px 1875px #FFF , 1614px 469px #FFF , 642px 1330px #FFF , 962px 902px #FFF , 355px 1904px #FFF , 825px 213px #FFF , 983px 774px #FFF , 828px 1154px #FFF , 698px 1564px #FFF , 637px 195px #FFF , 378px 1596px #FFF , 1485px 1901px #FFF , 878px 686px #FFF , 1964px 814px #FFF , 1356px 347px #FFF , 1334px 1607px #FFF , 90px 1490px #FFF , 1277px 1088px #FFF , 620px 1844px #FFF , 895px 154px #FFF , 1122px 532px #FFF , 1871px 1954px #FFF , 1901px 76px #FFF , 65px 1712px #FFF , 1788px 1947px #FFF , 130px 1569px #FFF , 1985px 735px #FFF , 362px 775px #FFF , 1835px 1515px #FFF , 392px 1635px #FFF , 1777pLine truncated
|
||||||
|
animation: animStar 50s linear infinite;
|
||||||
|
}
|
||||||
|
#stars:after {
|
||||||
|
content: " ";
|
||||||
|
position: absolute;
|
||||||
|
top: 2000px;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
background: transparent;
|
||||||
|
box-shadow: 791px 689px #FFF , 1793px 1755px #FFF , 1404px 922px #FFF , 1690px 1534px #FFF , 448px 1961px #FFF , 548px 1718px #FFF , 1880px 221px #FFF , 951px 2000px #FFF , 1842px 1157px #FFF , 1929px 1220px #FFF , 725px 895px #FFF , 1668px 625px #FFF , 845px 1456px #FFF , 1682px 1431px #FFF , 1945px 1666px #FFF , 607px 248px #FFF , 665px 398px #FFF , 74px 1511px #FFF , 775px 712px #FFF , 626px 1566px #FFF , 583px 59px #FFF , 628px 300px #FFF , 828px 1996px #FFF , 1202px 1612px #FFF , 866px 1350px #FFF , 959px 1048px #FFF , 434px 1811px #FFF , 939px 1614px #FFF , 1793px 1772px #FFF , 453px 764px #FFF , 241px 1210px #FFF , 962px 897px #FFF , 204px 753px #FFF , 505px 1888px #FFF , 467px 1895px #FFF , 1079px 85px #FFF , 88px 1217px #FFF , 1983px 284px #FFF , 207px 1348px #FFF , 732px 263px #FFF , 1421px 1444px #FFF , 293px 163px #FFF , 1070px 1909px #FFF , 1510px 1064px #FFF , 178px 1855px #FFF , 1842px 261px #FFF , 1812px 606px #FFF , 255px 44px #FFF , 486px 198px #FFF , 693px 1607px #FFF , 1848px 887px #FFF , 1638px 879px #FFF , 1144px 1975px #FFF , 1753px 932px #FFF , 710px 37px #FFF , 750px 738px #FFF , 1865px 1266px #FFF , 1503px 149px #FFF , 469px 1340px #FFF , 1951px 1295px #FFF , 1971px 1158px #FFF , 1801px 1381px #FFF , 229px 1030px #FFF , 1336px 514px #FFF , 1103px 576px #FFF , 1526px 1663px #FFF , 1480px 1530px #FFF , 264px 288px #FFF , 306px 1780px #FFF , 586px 1494px #FFF , 1781px 758px #FFF , 1313px 1087px #FFF , 1461px 293px #FFF , 938px 432px #FFF , 1727px 1090px #FFF , 919px 382px #FFF , 829px 1806px #FFF , 213px 1642px #FFF , 7px 362px #FFF , 1637px 718px #FFF , 1939px 1908px #FFF , 868px 351px #FFF , 1258px 657px #FFF , 237px 1442px #FFF , 1083px 655px #FFF , 527px 930px #FFF , 1077px 105px #FFF , 953px 37px #FFF , 1578px 668px #FFF , 1165px 14px #FFF , 69px 789px #FFF , 415px 1726px #FFF , 814px 811px #FFF , 1866px 1430px #FFF , 593px 1543px #FFF , 1238px 1842px #FFF , 359px 1630px #FFF , 1117px 1036px #FFF , 706px 790px #FFF , 551px 904px #FFF , 1684px 1586px #FFF , 1424px 1866px #FFF , 1276px 1001px #FFF , 1246px 1076px #FFF , 685px 1711px #FFF , 1566px 1080px #FFF , 5px 821px #FFF , 1507px 716px #FFF , 573px 1933px #FFF , 712px 1523px #FFF , 1221px 1303px #FFF , 1831px 1525px #FFF , 766px 825px #FFF , 1236px 387px #FFF , 1726px 1695px #FFF , 424px 129px #FFF , 514px 871px #FFF , 950px 1820px #FFF , 751px 982px #FFF , 1652px 409px #FFF , 347px 506px #FFF , 862px 316px #FFF , 1193px 623px #FFF , 768px 91px #FFF , 855px 724px #FFF , 505px 284px #FFF , 1485px 946px #FFF , 132px 134px #FFF , 1155px 1522px #FFF , 1058px 1392px #FFF , 544px 1625px #FFF , 142px 711px #FFF , 559px 1772px #FFF , 843px 1623px #FFF , 41px 553px #FFF , 802px 770px #FFF , 1237px 478px #FFF , 1497px 794px #FFF , 964px 1778px #FFF , 1614px 32px #FFF , 255px 1628px #FFF , 969px 410px #FFF , 67px 964px #FFF , 745px 474px #FFF , 536px 732px #FFF , 1568px 1510px #FFF , 360px 687px #FFF , 1779px 557px #FFF , 1180px 318px #FFF , 1837px 890px #FFF , 1127px 445px #FFF , 1801px 187px #FFF , 428px 1422px #FFF , 622px 241px #FFF , 360px 1620px #FFF , 1004px 618px #FFF , 1057px 205px #FFF , 678px 1832px #FFF , 235px 1529px #FFF , 791px 258px #FFF , 1844px 1333px #FFF , 989px 1278px #FFF , 138px 230px #FFF , 69px 1560px #FFF , 1226px 269px #FFF , 980px 1186px #FFF , 457px 1383px #FFF , 759px 107px #FFF , 1812px 306px #FFF , 1967px 1404px #FFF , 150px 1658px #FFF , 894px 314px #FFF , 1571px 1456px #FFF , 1921px 181px #FFF , 108px 1669px #FFF , 1296px 1233px #FFF , 1157px 1127px #FFF , 462px 672px #FFF , 1720px 625px #FFF , 1870px 1770px #FFF , 1603px 476px #FFF , 1963px 1137px #FFF , 979px 864px #FFF , 648px 170px #FFF , 1831px 1505px #FFF , 729px 1292px #FFF , 1024px 1683px #FFF , 200px 143px #FFF , 1566px 1202px #FFF , 772px 468px #FFF , 1198px 1677px #FFF , 1758px 535px #FFF , 232px 1233px #FFF , 1395px 935px #FFF , 1774px 1621px #FFF , 1424px 400px #FFF , 962px 1594px #FFF , 967px 981px #FFF , 580px 525px #FFF , 59px 1138px #FFF , 1736px 963px #FFF , 845px 568px #FFF , 1723px 1051px #FFF , 203px 1235px #FFF , 1718px 1458px #FFF , 309px 65px #FFF , 331px 1779px #FFF , 1963px 1340px #FFF , 819px 1710px #FFF , 255px 426px #FFF , 578px 1998px #FFF , 1537px 1626px #FFF , 766px 492px #FFF , 774px 312px #FFF , 475px 831px #FFF , 571px 1900px #FFF , 594px 723px #FFF , 212px 1872px #FFF , 423px 959px #FFF , 48px 506px #FFF , 275px 1617px #FFF , 1460px 1875px #FFF , 1614px 469px #FFF , 642px 1330px #FFF , 962px 902px #FFF , 355px 1904px #FFF , 825px 213px #FFF , 983px 774px #FFF , 828px 1154px #FFF , 698px 1564px #FFF , 637px 195px #FFF , 378px 1596px #FFF , 1485px 1901px #FFF , 878px 686px #FFF , 1964px 814px #FFF , 1356px 347px #FFF , 1334px 1607px #FFF , 90px 1490px #FFF , 1277px 1088px #FFF , 620px 1844px #FFF , 895px 154px #FFF , 1122px 532px #FFF , 1871px 1954px #FFF , 1901px 76px #FFF , 65px 1712px #FFF , 1788px 1947px #FFF , 130px 1569px #FFF , 1985px 735px #FFF , 362px 775px #FFF , 1835px 1515px #FFF , 392px 1635px #FFF , 1777pLine truncated
|
||||||
|
}
|
||||||
|
|
||||||
|
#stars2 {
|
||||||
|
width: 2px;
|
||||||
|
height: 2px;
|
||||||
|
background: transparent;
|
||||||
|
box-shadow: 200px 533px #FFF , 16px 1336px #FFF , 140px 1418px #FFF , 767px 1679px #FFF , 637px 372px #FFF , 462px 1026px #FFF , 285px 1837px #FFF , 1447px 283px #FFF , 690px 99px #FFF , 1528px 517px #FFF , 803px 1446px #FFF , 1601px 1443px #FFF , 708px 1714px #FFF , 381px 638px #FFF , 1477px 407px #FFF , 292px 1583px #FFF , 979px 374px #FFF , 1937px 239px #FFF , 807px 1013px #FFF , 1320px 1148px #FFF , 556px 782px #FFF , 1382px 598px #FFF , 560px 347px #FFF , 1750px 1075px #FFF , 777px 876px #FFF , 1184px 1914px #FFF , 1310px 1050px #FFF , 302px 179px #FFF , 673px 169px #FFF , 1206px 752px #FFF , 1377px 15px #FFF , 889px 1363px #FFF , 510px 149px #FFF , 1861px 975px #FFF , 911px 1304px #FFF , 653px 1786px #FFF , 1019px 1957px #FFF , 1449px 895px #FFF , 1755px 1162px #FFF , 575px 195px #FFF , 1916px 717px #FFF , 195px 1267px #FFF , 1545px 1445px #FFF , 637px 1795px #FFF , 1758px 1252px #FFF , 921px 1185px #FFF , 1019px 513px #FFF , 513px 23px #FFF , 187px 540px #FFF , 1219px 1090px #FFF , 1691px 451px #FFF , 1390px 771px #FFF , 458px 496px #FFF , 1073px 556px #FFF , 1367px 1491px #FFF , 1044px 663px #FFF , 173px 1480px #FFF , 1678px 79px #FFF , 1179px 770px #FFF , 551px 1330px #FFF , 104px 846px #FFF , 257px 422px #FFF , 874px 185px #FFF , 493px 1231px #FFF , 87px 979px #FFF , 1374px 844px #FFF , 1132px 687px #FFF , 754px 1958px #FFF , 645px 224px #FFF , 1757px 18px #FFF , 735px 918px #FFF , 329px 1011px #FFF , 1854px 1812px #FFF , 1191px 980px #FFF , 498px 834px #FFF , 592px 1114px #FFF , 1973px 1173px #FFF , 1092px 1308px #FFF , 326px 639px #FFF , 408px 387px #FFF , 1898px 1272px #FFF , 56px 1523px #FFF , 1755px 1376px #FFF , 1472px 439px #FFF , 1063px 88px #FFF , 1043px 567px #FFF , 1950px 817px #FFF , 1571px 1091px #FFF , 681px 1330px #FFF , 1002px 1167px #FFF , 1560px 1145px #FFF , 478px 841px #FFF , 588px 1593px #FFF , 1227px 1580px #FFF , 1027px 1800px #FFF , 97px 1481px #FFF , 1535px 261px #FFF , 1547px 674px #FFF , 1271px 1257px #FFF , 514px 285px #FFF , 1320px 1605px #FFF , 1166px 1941px #FFF , 1709px 1680px #FFF , 440px 1094px #FFF , 304px 340px #FFF , 933px 599px #FFF , 1763px 1799px #FFF , 1359px 1449px #FFF , 725px 390px #FFF , 1061px 337px #FFF , 1802px 1500px #FFF , 1157px 1560px #FFF , 1832px 1918px #FFF , 1296px 1093px #FFF , 1786px 1950px #FFF , 744px 1049px #FFF , 1178px 1932px #FFF , 631px 1776px #FFF , 1237px 558px #FFF , 1654px 450px #FFF , 402px 1757px #FFF , 253px 1703px #FFF , 1119px 1460px #FFF , 1999px 182px #FFF , 1896px 398px #FFF , 709px 1997px #FFF , 454px 19px #FFF , 1623px 1157px #FFF , 1118px 416px #FFF , 1791px 849px #FFF , 858px 1795px #FFF , 942px 647px #FFF , 710px 583px #FFF , 1742px 1652px #FFF , 446px 1232px #FFF , 520px 385px #FFF , 1294px 1975px #FFF , 1132px 1685px #FFF , 478px 1743px #FFF , 1877px 79px #FFF , 222px 1699px #FFF , 314px 710px #FFF , 106px 1669px #FFF , 111px 1510px #FFF , 685px 1052px #FFF , 978px 595px #FFF , 529px 1209px #FFF , 498px 138px #FFF , 303px 1408px #FFF , 1367px 323px #FFF , 1530px 1481px #FFF , 252px 444px #FFF , 602px 232px #FFF , 1727px 1102px #FFF , 72px 97px #FFF , 1194px 1068px #FFF , 1622px 604px #FFF , 483px 1436px #FFF , 435px 159px #FFF , 1087px 1891px #FFF , 136px 371px #FFF , 519px 988px #FFF , 319px 1715px #FFF , 70px 812px #FFF , 1804px 1027px #FFF , 1438px 488px #FFF , 1179px 919px #FFF , 1708px 1170px #FFF , 1578px 1229px #FFF , 703px 1828px #FFF , 1512px 44px #FFF , 895px 435px #FFF , 1993px 1009px #FFF , 1655px 37px #FFF , 1326px 1519px #FFF , 1213px 485px #FFF , 497px 1739px #FFF , 1616px 1294px #FFF , 1051px 1003px #FFF , 178px 1462px #FFF , 289px 1192px #FFF , 1338px 296px #FFF , 401px 751px #FFF , 254px 1271px #FFF , 184px 691px #FFF , 1730px 222px #FFF , 1311px 1853px #FFF , 873px 1029px #FFF , 1278px 1429px #FFF , 1916px 1420px #FFF , 595px 1678px #FFF , 1406px 762px #FFF , 127px 461px #FFF , 1348px 1314px #FFF , 979px 1641px #FFF , 1534px 1535px #FFF , 1386px 751px #FFF , 1724px 1519px #FFF , 1136px 1860px #FFF , 728px 705px #FFF;
|
||||||
|
animation: animStar 100s linear infinite;
|
||||||
|
}
|
||||||
|
#stars2:after {
|
||||||
|
content: " ";
|
||||||
|
position: absolute;
|
||||||
|
top: 2000px;
|
||||||
|
width: 2px;
|
||||||
|
height: 2px;
|
||||||
|
background: transparent;
|
||||||
|
box-shadow: 200px 533px #FFF , 16px 1336px #FFF , 140px 1418px #FFF , 767px 1679px #FFF , 637px 372px #FFF , 462px 1026px #FFF , 285px 1837px #FFF , 1447px 283px #FFF , 690px 99px #FFF , 1528px 517px #FFF , 803px 1446px #FFF , 1601px 1443px #FFF , 708px 1714px #FFF , 381px 638px #FFF , 1477px 407px #FFF , 292px 1583px #FFF , 979px 374px #FFF , 1937px 239px #FFF , 807px 1013px #FFF , 1320px 1148px #FFF , 556px 782px #FFF , 1382px 598px #FFF , 560px 347px #FFF , 1750px 1075px #FFF , 777px 876px #FFF , 1184px 1914px #FFF , 1310px 1050px #FFF , 302px 179px #FFF , 673px 169px #FFF , 1206px 752px #FFF , 1377px 15px #FFF , 889px 1363px #FFF , 510px 149px #FFF , 1861px 975px #FFF , 911px 1304px #FFF , 653px 1786px #FFF , 1019px 1957px #FFF , 1449px 895px #FFF , 1755px 1162px #FFF , 575px 195px #FFF , 1916px 717px #FFF , 195px 1267px #FFF , 1545px 1445px #FFF , 637px 1795px #FFF , 1758px 1252px #FFF , 921px 1185px #FFF , 1019px 513px #FFF , 513px 23px #FFF , 187px 540px #FFF , 1219px 1090px #FFF , 1691px 451px #FFF , 1390px 771px #FFF , 458px 496px #FFF , 1073px 556px #FFF , 1367px 1491px #FFF , 1044px 663px #FFF , 173px 1480px #FFF , 1678px 79px #FFF , 1179px 770px #FFF , 551px 1330px #FFF , 104px 846px #FFF , 257px 422px #FFF , 874px 185px #FFF , 493px 1231px #FFF , 87px 979px #FFF , 1374px 844px #FFF , 1132px 687px #FFF , 754px 1958px #FFF , 645px 224px #FFF , 1757px 18px #FFF , 735px 918px #FFF , 329px 1011px #FFF , 1854px 1812px #FFF , 1191px 980px #FFF , 498px 834px #FFF , 592px 1114px #FFF , 1973px 1173px #FFF , 1092px 1308px #FFF , 326px 639px #FFF , 408px 387px #FFF , 1898px 1272px #FFF , 56px 1523px #FFF , 1755px 1376px #FFF , 1472px 439px #FFF , 1063px 88px #FFF , 1043px 567px #FFF , 1950px 817px #FFF , 1571px 1091px #FFF , 681px 1330px #FFF , 1002px 1167px #FFF , 1560px 1145px #FFF , 478px 841px #FFF , 588px 1593px #FFF , 1227px 1580px #FFF , 1027px 1800px #FFF , 97px 1481px #FFF , 1535px 261px #FFF , 1547px 674px #FFF , 1271px 1257px #FFF , 514px 285px #FFF , 1320px 1605px #FFF , 1166px 1941px #FFF , 1709px 1680px #FFF , 440px 1094px #FFF , 304px 340px #FFF , 933px 599px #FFF , 1763px 1799px #FFF , 1359px 1449px #FFF , 725px 390px #FFF , 1061px 337px #FFF , 1802px 1500px #FFF , 1157px 1560px #FFF , 1832px 1918px #FFF , 1296px 1093px #FFF , 1786px 1950px #FFF , 744px 1049px #FFF , 1178px 1932px #FFF , 631px 1776px #FFF , 1237px 558px #FFF , 1654px 450px #FFF , 402px 1757px #FFF , 253px 1703px #FFF , 1119px 1460px #FFF , 1999px 182px #FFF , 1896px 398px #FFF , 709px 1997px #FFF , 454px 19px #FFF , 1623px 1157px #FFF , 1118px 416px #FFF , 1791px 849px #FFF , 858px 1795px #FFF , 942px 647px #FFF , 710px 583px #FFF , 1742px 1652px #FFF , 446px 1232px #FFF , 520px 385px #FFF , 1294px 1975px #FFF , 1132px 1685px #FFF , 478px 1743px #FFF , 1877px 79px #FFF , 222px 1699px #FFF , 314px 710px #FFF , 106px 1669px #FFF , 111px 1510px #FFF , 685px 1052px #FFF , 978px 595px #FFF , 529px 1209px #FFF , 498px 138px #FFF , 303px 1408px #FFF , 1367px 323px #FFF , 1530px 1481px #FFF , 252px 444px #FFF , 602px 232px #FFF , 1727px 1102px #FFF , 72px 97px #FFF , 1194px 1068px #FFF , 1622px 604px #FFF , 483px 1436px #FFF , 435px 159px #FFF , 1087px 1891px #FFF , 136px 371px #FFF , 519px 988px #FFF , 319px 1715px #FFF , 70px 812px #FFF , 1804px 1027px #FFF , 1438px 488px #FFF , 1179px 919px #FFF , 1708px 1170px #FFF , 1578px 1229px #FFF , 703px 1828px #FFF , 1512px 44px #FFF , 895px 435px #FFF , 1993px 1009px #FFF , 1655px 37px #FFF , 1326px 1519px #FFF , 1213px 485px #FFF , 497px 1739px #FFF , 1616px 1294px #FFF , 1051px 1003px #FFF , 178px 1462px #FFF , 289px 1192px #FFF , 1338px 296px #FFF , 401px 751px #FFF , 254px 1271px #FFF , 184px 691px #FFF , 1730px 222px #FFF , 1311px 1853px #FFF , 873px 1029px #FFF , 1278px 1429px #FFF , 1916px 1420px #FFF , 595px 1678px #FFF , 1406px 762px #FFF , 127px 461px #FFF , 1348px 1314px #FFF , 979px 1641px #FFF , 1534px 1535px #FFF , 1386px 751px #FFF , 1724px 1519px #FFF , 1136px 1860px #FFF , 728px 705px #FFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
#stars3 {
|
||||||
|
width: 3px;
|
||||||
|
height: 3px;
|
||||||
|
background: transparent;
|
||||||
|
box-shadow: 633px 1097px #FFF , 982px 1284px #FFF , 515px 709px #FFF , 859px 139px #FFF , 649px 229px #FFF , 1248px 1199px #FFF , 1468px 1956px #FFF , 1250px 1830px #FFF , 1135px 1406px #FFF , 712px 741px #FFF , 1016px 247px #FFF , 929px 1963px #FFF , 1397px 366px #FFF , 609px 661px #FFF , 1163px 417px #FFF , 1058px 1661px #FFF , 1749px 123px #FFF , 993px 209px #FFF , 851px 161px #FFF , 807px 940px #FFF , 296px 1582px #FFF , 1136px 613px #FFF , 1364px 1382px #FFF , 1993px 780px #FFF , 1151px 1854px #FFF , 1109px 617px #FFF , 1353px 626px #FFF , 1807px 1240px #FFF , 33px 904px #FFF , 1666px 1067px #FFF , 323px 1647px #FFF , 799px 476px #FFF , 1084px 1844px #FFF , 1157px 633px #FFF , 1611px 1947px #FFF , 919px 183px #FFF , 871px 1788px #FFF , 590px 864px #FFF , 1800px 934px #FFF , 1229px 443px #FFF , 161px 1398px #FFF , 899px 1458px #FFF , 1071px 661px #FFF , 1002px 135px #FFF , 1962px 1968px #FFF , 1865px 1534px #FFF , 1616px 599px #FFF , 529px 334px #FFF , 1910px 1093px #FFF , 206px 25px #FFF , 460px 388px #FFF , 1483px 1301px #FFF , 925px 474px #FFF , 1319px 1538px #FFF , 1842px 1759px #FFF , 165px 1865px #FFF , 1873px 198px #FFF , 1718px 1316px #FFF , 340px 1254px #FFF , 431px 40px #FFF , 1627px 342px #FFF , 168px 99px #FFF , 694px 238px #FFF , 1578px 708px #FFF , 1608px 1831px #FFF , 1357px 462px #FFF , 1214px 1066px #FFF , 1488px 291px #FFF , 1218px 1238px #FFF , 353px 785px #FFF , 1649px 649px #FFF , 1262px 1205px #FFF , 1040px 856px #FFF , 1313px 649px #FFF , 305px 798px #FFF , 1165px 1389px #FFF , 108px 12px #FFF , 45px 1452px #FFF , 302px 438px #FFF , 872px 1280px #FFF , 269px 898px #FFF , 422px 950px #FFF , 453px 1122px #FFF , 1107px 1168px #FFF , 585px 103px #FFF , 317px 1707px #FFF , 1003px 1356px #FFF , 1374px 160px #FFF , 756px 100px #FFF , 1677px 986px #FFF , 1001px 453px #FFF , 1062px 1968px #FFF , 1791px 441px #FFF , 734px 1341px #FFF , 1109px 1180px #FFF , 514px 1231px #FFF , 963px 1379px #FFF , 1203px 155px #FFF , 72px 546px #FFF , 533px 1629px #FFF;
|
||||||
|
animation: animStar 150s linear infinite;
|
||||||
|
}
|
||||||
|
#stars3:after {
|
||||||
|
content: " ";
|
||||||
|
position: absolute;
|
||||||
|
top: 2000px;
|
||||||
|
width: 3px;
|
||||||
|
height: 3px;
|
||||||
|
background: transparent;
|
||||||
|
box-shadow: 633px 1097px #FFF , 982px 1284px #FFF , 515px 709px #FFF , 859px 139px #FFF , 649px 229px #FFF , 1248px 1199px #FFF , 1468px 1956px #FFF , 1250px 1830px #FFF , 1135px 1406px #FFF , 712px 741px #FFF , 1016px 247px #FFF , 929px 1963px #FFF , 1397px 366px #FFF , 609px 661px #FFF , 1163px 417px #FFF , 1058px 1661px #FFF , 1749px 123px #FFF , 993px 209px #FFF , 851px 161px #FFF , 807px 940px #FFF , 296px 1582px #FFF , 1136px 613px #FFF , 1364px 1382px #FFF , 1993px 780px #FFF , 1151px 1854px #FFF , 1109px 617px #FFF , 1353px 626px #FFF , 1807px 1240px #FFF , 33px 904px #FFF , 1666px 1067px #FFF , 323px 1647px #FFF , 799px 476px #FFF , 1084px 1844px #FFF , 1157px 633px #FFF , 1611px 1947px #FFF , 919px 183px #FFF , 871px 1788px #FFF , 590px 864px #FFF , 1800px 934px #FFF , 1229px 443px #FFF , 161px 1398px #FFF , 899px 1458px #FFF , 1071px 661px #FFF , 1002px 135px #FFF , 1962px 1968px #FFF , 1865px 1534px #FFF , 1616px 599px #FFF , 529px 334px #FFF , 1910px 1093px #FFF , 206px 25px #FFF , 460px 388px #FFF , 1483px 1301px #FFF , 925px 474px #FFF , 1319px 1538px #FFF , 1842px 1759px #FFF , 165px 1865px #FFF , 1873px 198px #FFF , 1718px 1316px #FFF , 340px 1254px #FFF , 431px 40px #FFF , 1627px 342px #FFF , 168px 99px #FFF , 694px 238px #FFF , 1578px 708px #FFF , 1608px 1831px #FFF , 1357px 462px #FFF , 1214px 1066px #FFF , 1488px 291px #FFF , 1218px 1238px #FFF , 353px 785px #FFF , 1649px 649px #FFF , 1262px 1205px #FFF , 1040px 856px #FFF , 1313px 649px #FFF , 305px 798px #FFF , 1165px 1389px #FFF , 108px 12px #FFF , 45px 1452px #FFF , 302px 438px #FFF , 872px 1280px #FFF , 269px 898px #FFF , 422px 950px #FFF , 453px 1122px #FFF , 1107px 1168px #FFF , 585px 103px #FFF , 317px 1707px #FFF , 1003px 1356px #FFF , 1374px 160px #FFF , 756px 100px #FFF , 1677px 986px #FFF , 1001px 453px #FFF , 1062px 1968px #FFF , 1791px 441px #FFF , 734px 1341px #FFF , 1109px 1180px #FFF , 514px 1231px #FFF , 963px 1379px #FFF , 1203px 155px #FFF , 72px 546px #FFF , 533px 1629px #FFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
#title {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
color: #FFF;
|
||||||
|
text-align: center;
|
||||||
|
font-family: "lato", sans-serif;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 50px;
|
||||||
|
letter-spacing: 10px;
|
||||||
|
margin-top: -60px;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
#title span {
|
||||||
|
background: -webkit-linear-gradient(white, #38495a);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes animStar {
|
||||||
|
from {
|
||||||
|
transform: translateY(0px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateY(-2000px);
|
||||||
|
}
|
||||||
|
}
|
||||||
Executable
+95
@@ -0,0 +1,95 @@
|
|||||||
|
@import compass
|
||||||
|
|
||||||
|
|
||||||
|
// n is number of stars required
|
||||||
|
@function multiple-box-shadow ($n)
|
||||||
|
$value: '#{random(2000)}px #{random(2000)}px #FFF'
|
||||||
|
@for $i from 2 through $n
|
||||||
|
$value: '#{$value} , #{random(2000)}px #{random(2000)}px #FFF'
|
||||||
|
|
||||||
|
@return unquote($value)
|
||||||
|
|
||||||
|
$shadows-small: multiple-box-shadow(700)
|
||||||
|
$shadows-medium: multiple-box-shadow(200)
|
||||||
|
$shadows-big: multiple-box-shadow(100)
|
||||||
|
|
||||||
|
html
|
||||||
|
height: 100%
|
||||||
|
background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%)
|
||||||
|
overflow: hidden
|
||||||
|
|
||||||
|
#stars
|
||||||
|
width: 1px
|
||||||
|
height: 1px
|
||||||
|
background: transparent
|
||||||
|
box-shadow: $shadows-small
|
||||||
|
animation : animStar 50s linear infinite
|
||||||
|
|
||||||
|
&:after
|
||||||
|
content: " "
|
||||||
|
position: absolute
|
||||||
|
top: 2000px
|
||||||
|
width: 1px
|
||||||
|
height: 1px
|
||||||
|
background: transparent
|
||||||
|
box-shadow: $shadows-small
|
||||||
|
|
||||||
|
#stars2
|
||||||
|
width: 2px
|
||||||
|
height: 2px
|
||||||
|
background: transparent
|
||||||
|
box-shadow: $shadows-medium
|
||||||
|
animation : animStar 100s linear infinite
|
||||||
|
|
||||||
|
&:after
|
||||||
|
content: " "
|
||||||
|
position: absolute
|
||||||
|
top: 2000px
|
||||||
|
width: 2px
|
||||||
|
height: 2px
|
||||||
|
background: transparent
|
||||||
|
box-shadow: $shadows-medium
|
||||||
|
|
||||||
|
#stars3
|
||||||
|
width: 3px
|
||||||
|
height: 3px
|
||||||
|
background: transparent
|
||||||
|
box-shadow: $shadows-big
|
||||||
|
animation : animStar 150s linear infinite
|
||||||
|
|
||||||
|
&:after
|
||||||
|
content: " "
|
||||||
|
position: absolute
|
||||||
|
top: 2000px
|
||||||
|
width: 3px
|
||||||
|
height: 3px
|
||||||
|
background: transparent
|
||||||
|
box-shadow: $shadows-big
|
||||||
|
|
||||||
|
#title
|
||||||
|
position: absolute
|
||||||
|
top: 50%
|
||||||
|
left: 0
|
||||||
|
right: 0
|
||||||
|
|
||||||
|
color: #FFF
|
||||||
|
text-align: center
|
||||||
|
font-family: 'lato',sans-serif
|
||||||
|
font-weight: 300
|
||||||
|
font-size: 50px
|
||||||
|
letter-spacing: 10px
|
||||||
|
|
||||||
|
margin-top: -60px
|
||||||
|
padding-left: 10px
|
||||||
|
|
||||||
|
span
|
||||||
|
background: -webkit-linear-gradient(white, #38495a)
|
||||||
|
-webkit-background-clip: text
|
||||||
|
-webkit-text-fill-color: transparent
|
||||||
|
|
||||||
|
@keyframes animStar
|
||||||
|
from
|
||||||
|
transform: translateY(0px)
|
||||||
|
to
|
||||||
|
transform: translateY(-2000px)
|
||||||
|
|
||||||
Executable
+15
@@ -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`).
|
||||||
Executable
+54
@@ -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>
|
||||||
Executable
+696
@@ -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;
|
||||||
|
}
|
||||||
Executable
+350
@@ -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;
|
||||||
|
}
|
||||||
Executable
+15
@@ -0,0 +1,15 @@
|
|||||||
|
# 🏃 Steps Sprite Animation
|
||||||
|
|
||||||
|
Интерактивная демонстрация покадровой анимации с использованием CSS-свойства `animation-timing-function: steps()`. Этот метод позволяет оживить спрайт-листы, превращая их в плавную анимацию персонажа.
|
||||||
|
|
||||||
|
### Особенности
|
||||||
|
|
||||||
|
- **Sprite Sheets**: Использование одного изображения (спрайта) для создания многокадровой анимации.
|
||||||
|
- **Steps Logic**: Применение функции `steps(10)`, которая разбивает движение фона на дискретные кадры, имитируя классическую мультипликацию.
|
||||||
|
- **Interactive Control**: Возможность изменять скорость анимации и просматривать полную ленту спрайта с помощью встроенных контроллов (JS/jQuery).
|
||||||
|
|
||||||
|
### Технологии
|
||||||
|
|
||||||
|
- **HTML5 / CSS3**: Основная логика анимации и стилизация элементов интерфейса.
|
||||||
|
- **jQuery**: Используется для управления скоростью (`animation-duration`) и переключения режимов отображения.
|
||||||
|
- **WebKit Optimization**: Специальные стили для кастомизации ползунков (range input) и чекбоксов в браузерах на движке WebKit.
|
||||||
Executable
+30
@@ -0,0 +1,30 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" >
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Steps Animation</title>
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- partial:index.partial.html -->
|
||||||
|
<div id="animation">
|
||||||
|
<div id="frame"></div>
|
||||||
|
<div id="roll"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><label><input id="show" type="checkbox"> show sprite</label></li>
|
||||||
|
<li>
|
||||||
|
<div id="duration">
|
||||||
|
<label id="duration-label" class="isRight">1</label>
|
||||||
|
<input id="duration-input" type="range" min="0.2" value="1" max="4" step="0.1">
|
||||||
|
</div>
|
||||||
|
animation-duration
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<!-- partial -->
|
||||||
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script><script src="./script.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Executable
+26
@@ -0,0 +1,26 @@
|
|||||||
|
if ($.browser.webkit) {
|
||||||
|
$("html").addClass("WebKit");
|
||||||
|
}
|
||||||
|
|
||||||
|
$("#show").change(function () {
|
||||||
|
$("#animation").toggleClass("showRoll");
|
||||||
|
});
|
||||||
|
|
||||||
|
var labelSide = "right";
|
||||||
|
|
||||||
|
$("#duration-input").change(function () {
|
||||||
|
var val = $(this).val();
|
||||||
|
var valRounded = Math.round(val * 10) / 10;
|
||||||
|
var mid = $(this).attr("max") / 2;
|
||||||
|
$("#frame").css("animation-duration", val + "s");
|
||||||
|
$("#roll").css("animation-duration", val + "s");
|
||||||
|
$("#duration-label").text(valRounded);
|
||||||
|
|
||||||
|
if (val > mid && labelSide == "right") {
|
||||||
|
labelSide = "left";
|
||||||
|
$("#duration-label").removeClass("isRight").addClass("isLeft");
|
||||||
|
} else if (val <= mid && labelSide == "left") {
|
||||||
|
labelSide = "right";
|
||||||
|
$("#duration-label").removeClass("isLeft").addClass("isRight");
|
||||||
|
}
|
||||||
|
});
|
||||||
Executable
+226
@@ -0,0 +1,226 @@
|
|||||||
|
/* -------------- Animation -------------- */
|
||||||
|
|
||||||
|
#animation {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* -------------- Frame -------------- */
|
||||||
|
|
||||||
|
.showRoll #frame {
|
||||||
|
border-color: hsl(0,0%,70%);
|
||||||
|
}
|
||||||
|
|
||||||
|
#frame {
|
||||||
|
width: 50px;
|
||||||
|
height: 72px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
background: url(https://s.cdpn.io/79/sprite-steps.png) no-repeat left top;
|
||||||
|
animation: frame-animation 1s steps(10) infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes frame-animation { 0% { background-position: 0px 0; } 100% { background-position: -500px 0; } }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* -------------- Roll -------------- */
|
||||||
|
|
||||||
|
.showRoll #roll {
|
||||||
|
opacity: .2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#roll {
|
||||||
|
opacity: 0;
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 500px;
|
||||||
|
height: 72px;
|
||||||
|
border: 1px solid hsl(0,0%,70%);
|
||||||
|
background: hsl(0,0%,100%) url(https://s.cdpn.io/79/sprite-steps.png) no-repeat left top;
|
||||||
|
transition: opacity .3s linear;
|
||||||
|
animation: roll-animation 1s steps(10) infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes roll-animation {
|
||||||
|
0% { transform: translateX(0); }
|
||||||
|
100% { transform: translateX(-500px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Global ------------------------------------------------------ */
|
||||||
|
|
||||||
|
html {
|
||||||
|
height: 100%;
|
||||||
|
font:62.5%/1 "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
|
||||||
|
background: #f0f0f0 url(../img/bg.png);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 50px;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
text-align: center;
|
||||||
|
overflow: hidden;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: hsl(210,100%,60%);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: hsl(210,100%,70%);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:active {
|
||||||
|
color: hsl(210,100%,50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 11px;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: hsl(0,0%,60%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hl {
|
||||||
|
color: hsl(0,0%,20%);
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
margin: 40px 0;
|
||||||
|
list-style: none;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
color: hsl(0,0%,60%);
|
||||||
|
}
|
||||||
|
.WebKit ul {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
padding: 5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Show Sprite Checkbox ------------------------------------------------------ */
|
||||||
|
|
||||||
|
.WebKit #show {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
outline: none;
|
||||||
|
border-radius: 20px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin: -2px 6px 0 0;
|
||||||
|
vertical-align: middle;
|
||||||
|
border: 10px solid hsl(0,0%,80%);
|
||||||
|
background: hsl(0,0%,40%);
|
||||||
|
box-shadow: 0 1px 0 hsla(0,0%,100%,.6);
|
||||||
|
-webkit-transition: border-width .2s cubic-bezier(.26, .08, .15, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.WebKit #show:checked:active,
|
||||||
|
.WebKit #show:active {
|
||||||
|
border: 0px solid hsl(0,0%,80%);
|
||||||
|
-webkit-transition-duration: .1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.WebKit #show:checked {
|
||||||
|
border: 5px solid hsl(0,0%,80%);
|
||||||
|
box-shadow: inset 0 1px 2px hsla(0,0%,0%,.4), 0 1px 0 hsla(0,0%,100%,.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Animation Duration ------------------------------------------------------ */
|
||||||
|
|
||||||
|
#duration {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
margin: -4px 6px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Label */
|
||||||
|
|
||||||
|
#duration-label {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.WebKit #duration-label {
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
z-index: 1;
|
||||||
|
top: 6px;
|
||||||
|
font-size: 11px;
|
||||||
|
color: hsl(0,0%,60%);
|
||||||
|
text-shadow: 0 1px 0 hsla(0,0%,100%,.3);
|
||||||
|
pointer-events: none;
|
||||||
|
-webkit-transition: -webkit-transform .2s cubic-bezier(.26, .08, .15, 1),
|
||||||
|
color .6s .2s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.WebKit #duration-label.isRight {
|
||||||
|
right: 50%;
|
||||||
|
margin-right: -20px;
|
||||||
|
left: auto;
|
||||||
|
-webkit-transform: translate3d(20px,0,0);
|
||||||
|
}
|
||||||
|
.WebKit #duration-label.isLeft {
|
||||||
|
right: auto;
|
||||||
|
margin-left: -20px;
|
||||||
|
left: 50%;
|
||||||
|
-webkit-transform: translate3d(-20px,0,0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.WebKit #duration:active #duration-label {
|
||||||
|
color: hsl(0,0%,30%);
|
||||||
|
-webkit-transition-delay: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Input */
|
||||||
|
|
||||||
|
.WebKit #duration-input {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: middle;
|
||||||
|
width: 100px;
|
||||||
|
border-radius: 20px;
|
||||||
|
background: hsl(0,0%,80%);
|
||||||
|
box-shadow: 0 1px 0 hsla(0,0%,100%,.6);
|
||||||
|
overflow: hidden;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.WebKit #duration-input::-webkit-slider-thumb {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
border-radius: 20px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border: 5px solid hsl(0,0%,80%);
|
||||||
|
background: hsl(0,0%,40%);
|
||||||
|
box-shadow: inset 0 1px 2px hsla(0,0%,0%,.4);
|
||||||
|
-webkit-transition: border-width .2s cubic-bezier(.26, .08, .15, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.WebKit #duration-input:active::-webkit-slider-thumb {
|
||||||
|
border: 0px solid hsl(0,0%,80%);
|
||||||
|
-webkit-transition-duration: .1;
|
||||||
|
}
|
||||||
Reference in new issue
Block a user