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

Compare commits

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

2 Commits
b425b2dd1a ... 6538f84d21

Author SHA1 Message Date
Ray Elliott 6538f84d21 pause on hover 2022-04-19 16:23:58 +01:00
Ray Elliott 118fe49211 use custom properties for durations 2022-04-19 15:59:24 +01:00
2 changed files with 73 additions and 14 deletions
Show Stats Expand all files Collapse all files

14
index.html
View File

@ -9,13 +9,13 @@
<div id="app" class="wrapper">
<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--green"><div class="orbital-content"></div></li>
<li class="orbital bg bg--blue"><div class="orbital-content"></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"><div class="orbital-content"></div></li>
<li class="orbital bg bg--blue"><div class="orbital-content"></div></li>
<li class="orbital bg bg--red"><div class="orbital-content"></div></li>
<li class="orbital bg bg--green"><div class="orbital-content"></div></li>
<li class="orbital bg bg--green pulse"><div class="orbital-content"></div></li>
<li class="orbital bg bg--blue pulse"><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--green pulse"><div class="orbital-content"></div></li>
<li class="orbital bg bg--blue pulse"><div class="orbital-content"></div></li>
<li class="orbital bg bg--red pulse"><div class="orbital-content"></div></li>
<li class="orbital bg bg--green pulse"><div class="orbital-content"></div></li>
</ul>
<div class="inner-content">
<div class="image-hover">

73
style.css
View File

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