From b425b2dd1a38005ba534a1580db1c275ab8cc4b9 Mon Sep 17 00:00:00 2001 From: ray Date: Tue, 19 Apr 2022 15:47:39 +0100 Subject: [PATCH] add pulse to orbitals background --- index.html | 16 ++++++++-------- style.css | 47 +++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 49 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index a996d01..5a7513b 100644 --- a/index.html +++ b/index.html @@ -8,14 +8,14 @@
diff --git a/style.css b/style.css index a43724a..62151a5 100644 --- a/style.css +++ b/style.css @@ -16,6 +16,7 @@ body, html { position: relative; width: 80vw; height: 80vh; + overflow: hidden; font-size: 1rem; @@ -131,16 +132,35 @@ ul, li { align-items: center; } -.bg-red { - background-color: rgba(255, 200, 200); +.bg { + &::before { + content: ''; + display: block; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + border-radius: 50%; + } } -.bg-green { - background-color: rgba(200, 255, 200); +.bg--red { + &::before { + background-color: rgba(255, 200, 200); + } } -.bg-blue { - background-color: rgba(200, 200, 255); +.bg--green { + &::before { + background-color: rgba(200, 255, 200); + } +} + +.bg--blue { + &::before { + background-color: rgba(200, 200, 255); + } } .clockwise { @@ -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); + } +}