From 5409b60c55d01bf1a10804a2c2b2cd543c8d7f3e Mon Sep 17 00:00:00 2001
From: zxa666 <zxadeguge@gmail.com>
Date: Thu, 12 Sep 2024 18:44:40 +0800
Subject: [PATCH] better footer animation
---
src/components/Footer.tsx | 4 ++-
src/containers/App/App.css | 70 ++++++++++++++++++++++++++++++++++++--
2 files changed, 70 insertions(+), 4 deletions(-)
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 7623084..e17f9e8 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -9,7 +9,9 @@ export function Footer() {
<footer className="pt-0 pb-1 footer py-5 mt-0 text-white">
{/* <hr /> */}
<div className="wave-container bg-rice_yellow">
- <div className="wave"></div>
+ <div className="wave1"></div>
+ <div className="wave2"></div>
+ <div className="wave3"></div>
</div>
{/* The following MUST be on every page: license information and link to the repository on gitlab.igem.org */}
<div className="row bg-wine-red ">
diff --git a/src/containers/App/App.css b/src/containers/App/App.css
index 47cc6f4..fdda5df 100644
--- a/src/containers/App/App.css
+++ b/src/containers/App/App.css
@@ -494,7 +494,7 @@ footer a:hover {
overflow: hidden;
}
-.wave {
+.wave1 {
position: absolute;
bottom: -25px;
left: 0;
@@ -503,10 +503,10 @@ footer a:hover {
background: linear-gradient(90deg, rgba(114, 47, 55, 1) 0%, rgba(114, 47, 55, 0.4) 100%);
border-radius: 100%;
transform: rotate(180deg);
- animation: waveAnimation 10s linear infinite;
+ animation: wave1Animation 10s linear infinite;
}
-@keyframes waveAnimation {
+@keyframes wave1Animation {
0% {
transform: translateX(-100%) rotate(180deg);
}
@@ -515,6 +515,70 @@ footer a:hover {
}
}
+.wave2 {
+ position: absolute;
+ bottom: -25px;
+ left: 0;
+ width: 200%; /* Ensure the wave extends beyond the viewport */
+ height: 50px; /* Height of the wave */
+ background: linear-gradient(90deg, rgba(114, 47, 55, 1) 0%, rgba(114, 47, 55, 0.4) 100%);
+ border-radius: 100%;
+ transform: rotate(180deg);
+ animation: wave2Animation 30s linear infinite;
+}
+
+@keyframes wave2Animation {
+ 0% {
+ transform: translateX(-100%) rotate(180deg);
+ }
+ 100% {
+ transform: translateX(100%) rotate(180deg);
+ }
+}
+
+.wave3 {
+ position: absolute;
+ bottom: -25px;
+ left: 0;
+ width: 200%; /* Ensure the wave extends beyond the viewport */
+ height: 50px; /* Height of the wave */
+ background: linear-gradient(90deg, rgba(114, 47, 55, 0.8) 0%, rgba(114, 47, 55, 0.4) 100%);
+ border-radius: 100%;
+ transform: rotate(180deg);
+ animation: wave3Animation 15s linear infinite;
+}
+
+@keyframes wave3Animation {
+ 0% {
+ transform: translateX(50%) rotate(180deg);
+ }
+ 100% {
+ transform: translateX(-150%) rotate(180deg);
+ }
+}
+
+.wave4 {
+ position: absolute;
+ bottom: -25px;
+ left: 0;
+ width: 200%; /* Ensure the wave extends beyond the viewport */
+ height: 50px; /* Height of the wave */
+ background: linear-gradient(90deg, rgba(114, 47, 55, 0.5) 0%, rgba(114, 47, 55, 0.5) 100%);
+ border-radius: 100%;
+ transform: rotate(180deg);
+ animation: wave4Animation 50s linear infinite;
+}
+
+@keyframes wave4Animation {
+ 0% {
+ transform: translateX(0%) rotate(180deg);
+ }
+ 100% {
+ transform: translateX(-100%) rotate(180deg);
+ }
+}
+
+
.center-block {
height: 40%;
}
\ No newline at end of file
--
GitLab