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

Compare commits

base: rayelliott:6538f84d21ea05f1c6652869e143793ddbfa4680
Branches Tags
rayelliott:master
..
compare: rayelliott:b425b2dd1a38005ba534a1580db1c275ab8cc4b9
Branches Tags
rayelliott:master

No commits in common. "6538f84d21ea05f1c6652869e143793ddbfa4680" and "b425b2dd1a38005ba534a1580db1c275ab8cc4b9" have entirely different histories.
6538f84d21 ... b425b2dd1a

2 changed files with 14 additions and 73 deletions
Show Stats Expand all files Collapse all files

14
index.html
View File

@ -9,13 +9,13 @@
<div id="app" class="wrapper"> <div id="app" class="wrapper">
<ul class="orbitals clockwise"> <ul class="orbitals clockwise">
<li class="orbital bg bg--red pulse"><div class="orbital-content content-center anti-clockwise"><p>Hallo!</p></div></li> <li class="orbital bg bg--red pulse"><div class="orbital-content content-center anti-clockwise"><p>Hallo!</p></div></li>
<li class="orbital bg bg--green pulse"><div class="orbital-content"></div></li> <li class="orbital bg bg--green"><div class="orbital-content"></div></li>
<li class="orbital bg bg--blue pulse"><div class="orbital-content"></div></li> <li class="orbital bg bg--blue"><div class="orbital-content"></div></li>
<li class="orbital bg bg--red pulse"><div class="orbital-content content-center anti-clockwise"><p>How's things?</p></div></li> <li class="orbital bg bg--red"><div class="orbital-content content-center anti-clockwise"><p>How's things?</p></div></li>
<li class="orbital bg bg--green pulse"><div class="orbital-content"></div></li> <li class="orbital bg bg--green"><div class="orbital-content"></div></li>
<li class="orbital bg bg--blue pulse"><div class="orbital-content"></div></li> <li class="orbital bg bg--blue"><div class="orbital-content"></div></li>
<li class="orbital bg bg--red pulse"><div class="orbital-content"></div></li> <li class="orbital bg bg--red"><div class="orbital-content"></div></li>
<li class="orbital bg bg--green pulse"><div class="orbital-content"></div></li> <li class="orbital bg bg--green"><div class="orbital-content"></div></li>
</ul> </ul>
<div class="inner-content"> <div class="inner-content">
<div class="image-hover"> <div class="image-hover">

73
style.css
View File

@ -1,12 +1,9 @@
:root { :root {
--width__inner-content: 11em; --width__inner-content: 10em;
--width__orbital: 7.5em; --width__orbital: 7em;
--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 {
@ -101,8 +98,7 @@ ul, li {
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
border-radius: 3em; opacity: 0.3;
overflow: hidden;
} }
.image-hover { .image-hover {
@ -167,72 +163,17 @@ ul, li {
} }
} }
.orbitals:hover {
&.clockwise,
& .anti-clockwise {
animation-play-state: paused;
}
}
.orbital.pulse:hover {
&::before {
animation-play-state: paused;
}
}
.clockwise { .clockwise {
animation: rotate var(--duration__rotation) linear infinite running; animation: rotate 20s linear infinite;
} }
.anti-clockwise { .anti-clockwise {
animation: rotate var(--duration__rotation) reverse linear infinite running; animation: rotate 20s reverse linear infinite;
} }
.pulse { .pulse {
&::before { &::before {
animation: pulse var(--duration__pulse) alternate ease-in-out infinite running; animation: pulse 2s alternate ease-in-out infinite;
}
&:nth-child(2) {
&::before {
animation-delay: 2s;
}
}
&:nth-child(3) {
&::before {
animation-delay: 0.4s;
}
}
&:nth-child(4) {
&::before {
animation-delay: 1.5s;
}
}
&:nth-child(5) {
&::before {
animation-delay: 0.7s;
}
}
&:nth-child(6) {
&::before {
animation-delay: 0.2s;
}
}
&:nth-child(7) {
&::before {
animation-delay: 1.1s;
}
}
&:nth-child(8) {
&::before {
animation-delay: 0.4s;
}
} }
} }
@ -250,6 +191,6 @@ ul, li {
transform: scale(1); transform: scale(1);
} }
to { to {
transform: scale(1.1); transform: scale(1.2);
} }
} }