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

add pulse to orbitals background

This commit is contained in:
Ray Elliott 2022-04-19 15:47:39 +01:00
parent 2baaa573f5
commit b425b2dd1a
2 changed files with 49 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
index.html
View File

@ -8,14 +8,14 @@
<body>
<div id="app" class="wrapper">
<ul class="orbitals clockwise">
<li class="orbital bg-red"><div class="orbital-content content-center anti-clockwise"><p>Hallo!</p></div></li>
<li class="orbital bg-green"><div class="orbital-content"></div></li>
<li class="orbital bg-blue"><div class="orbital-content"></div></li>
<li class="orbital bg-red"><div class="orbital-content content-center anti-clockwise"><p>How's things?</p></div></li>
<li class="orbital bg-green"><div class="orbital-content"></div></li>
<li class="orbital bg-blue"><div class="orbital-content"></div></li>
<li class="orbital bg-red"><div class="orbital-content"></div></li>
<li class="orbital bg-green"><div class="orbital-content"></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--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>
</ul>
<div class="inner-content">
<div class="image-hover">

45
style.css
View File

@ -16,6 +16,7 @@ body, html {
position: relative;
width: 80vw;
height: 80vh;
overflow: hidden;
font-size: 1rem;
@ -131,17 +132,36 @@ ul, li {
align-items: center;
}
.bg-red {
.bg {
&::before {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 50%;
}
}
.bg--red {
&::before {
background-color: rgba(255, 200, 200);
}
.bg-green {
background-color: rgba(200, 255, 200);
}
.bg-blue {
.bg--green {
&::before {
background-color: rgba(200, 255, 200);
}
}
.bg--blue {
&::before {
background-color: rgba(200, 200, 255);
}
}
.clockwise {
animation: rotate 20s linear infinite;
@ -151,6 +171,12 @@ ul, li {
animation: rotate 20s reverse linear infinite;
}
.pulse {
&::before {
animation: pulse 2s alternate ease-in-out infinite;
}
}
@keyframes rotate {
from {
transform: rotate(0);
@ -159,3 +185,12 @@ ul, li {
transform: rotate(360deg);
}
}
@keyframes pulse {
from {
transform: scale(1);
}
to {
transform: scale(1.2);
}
}