init: репозиторий backgrounds
— Добавлен animated-cubes (геометрический полет на Keyframes) — Добавлен solar-system-orrery (модель системы на Orbital Motion) — Добавлен parallax-star (звездное небо на Box-Shadow) — Добавлен fireflies (эффект светлячков и мягкого свечения) — Добавлен steps-sprite-animation (покадровая анимация с jQuery управлением)
This commit is contained in:
@@ -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
File diff suppressed because one or more lines are too long
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