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

pause on hover

This commit is contained in:
Ray Elliott 2022-04-19 16:23:58 +01:00
parent 118fe49211
commit 6538f84d21
2 changed files with 66 additions and 11 deletions
Show Stats Download Patch File Download Diff File 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"><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"><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"><div class="orbital-content content-center anti-clockwise"><p>How's things?</p></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"><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"><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"><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"><div class="orbital-content"></div></li> <li class="orbital bg bg--green pulse"><div class="orbital-content"></div></li>
</ul> </ul>
<div class="inner-content"> <div class="inner-content">
<div class="image-hover"> <div class="image-hover">

63
style.css
View File

@ -167,17 +167,72 @@ 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; animation: rotate var(--duration__rotation) linear infinite running;
} }
.anti-clockwise { .anti-clockwise {
animation: rotate var(--duration__rotation) reverse linear infinite; animation: rotate var(--duration__rotation) reverse linear infinite running;
} }
.pulse { .pulse {
&::before { &::before {
animation: pulse var(--duration__pulse) 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;
}
} }
} }
@ -195,6 +250,6 @@ ul, li {
transform: scale(1); transform: scale(1);
} }
to { to {
transform: scale(1.15); transform: scale(1.1);
} }
} }