rayelliott
/
css-orbital
1
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity

use custom properties for durations

This commit is contained in:
Ray Elliott 2022-04-19 15:59:24 +01:00
parent b425b2dd1a
commit 118fe49211
1 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
style.css
View File

@ -1,9 +1,12 @@
:root { :root {
--width__inner-content: 10em; --width__inner-content: 11em;
--width__orbital: 7em; --width__orbital: 7.5em;
--radius__orbital: 14em; --radius__orbital: 14em;
--radius__orbital--diagonal: calc(var(--radius__orbital) / 1.4142); --radius__orbital--diagonal: calc(var(--radius__orbital) / 1.4142);
--duration__rotation: 50s;
--duration__pulse: 1.5s;
} }
body, html { body, html {
@ -98,7 +101,8 @@ ul, li {
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
opacity: 0.3; border-radius: 3em;
overflow: hidden;
} }
.image-hover { .image-hover {
@ -164,16 +168,16 @@ ul, li {
} }
.clockwise { .clockwise {
animation: rotate 20s linear infinite; animation: rotate var(--duration__rotation) linear infinite;
} }
.anti-clockwise { .anti-clockwise {
animation: rotate 20s reverse linear infinite; animation: rotate var(--duration__rotation) reverse linear infinite;
} }
.pulse { .pulse {
&::before { &::before {
animation: pulse 2s alternate ease-in-out infinite; animation: pulse var(--duration__pulse) alternate ease-in-out infinite;
} }
} }
@ -191,6 +195,6 @@ ul, li {
transform: scale(1); transform: scale(1);
} }
to { to {
transform: scale(1.2); transform: scale(1.15);
} }
} }