From a8ff9492f29bd982896715c49bad6ac2628761c9 Mon Sep 17 00:00:00 2001 From: HossamGouda <37816302+HossamGouda@users.noreply.github.com> Date: Sun, 13 Oct 2024 03:53:51 +0300 Subject: [PATCH] added my cool animation : (#2730) Co-authored-by: Laureline Paris <32878345+LaurelineP@users.noreply.github.com> --- Art/HossamGouda-CirclePulse/index.html | 12 ++++++++++++ Art/HossamGouda-CirclePulse/meta.json | 4 ++++ Art/HossamGouda-CirclePulse/styles.css | 27 ++++++++++++++++++++++++++ 3 files changed, 43 insertions(+) create mode 100644 Art/HossamGouda-CirclePulse/index.html create mode 100644 Art/HossamGouda-CirclePulse/meta.json create mode 100644 Art/HossamGouda-CirclePulse/styles.css diff --git a/Art/HossamGouda-CirclePulse/index.html b/Art/HossamGouda-CirclePulse/index.html new file mode 100644 index 000000000..717728509 --- /dev/null +++ b/Art/HossamGouda-CirclePulse/index.html @@ -0,0 +1,12 @@ + + + + + + + Circle Pulse Animation + + +
+ + diff --git a/Art/HossamGouda-CirclePulse/meta.json b/Art/HossamGouda-CirclePulse/meta.json new file mode 100644 index 000000000..1b2f3a5ac --- /dev/null +++ b/Art/HossamGouda-CirclePulse/meta.json @@ -0,0 +1,4 @@ +{ + "artName": "Circle Pulse", + "githubHandle": "HossamGouda" +} diff --git a/Art/HossamGouda-CirclePulse/styles.css b/Art/HossamGouda-CirclePulse/styles.css new file mode 100644 index 000000000..32e6578f7 --- /dev/null +++ b/Art/HossamGouda-CirclePulse/styles.css @@ -0,0 +1,27 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background-color: #f0f0f0; +} + +.circle { + width: 100px; + height: 100px; + border-radius: 50%; + background-color: #3498db; + animation: pulse 2s infinite; +} + +@keyframes pulse { + 0%, 100% { + transform: scale(1); + opacity: 1; + } + 50% { + transform: scale(1.2); + opacity: 0.7; + } +}