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">
<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">

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 {
animation: rotate var(--duration__rotation) linear infinite;
animation: rotate var(--duration__rotation) linear infinite running;
}
.anti-clockwise {
animation: rotate var(--duration__rotation) reverse linear infinite;
animation: rotate var(--duration__rotation) reverse linear infinite running;
}
.pulse {
&::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);
}
to {
transform: scale(1.15);
transform: scale(1.1);
}
}