From b667b391d221dbb3a5e06cad8fead97fa25864d8 Mon Sep 17 00:00:00 2001
From: zxa666 <zxadeguge@gmail.com>
Date: Thu, 26 Sep 2024 18:44:44 +0800
Subject: [PATCH] update footer animation
---
src/components/wave.css | 20 +++++++++++++++++---
src/components/wave.tsx | 3 +++
2 files changed, 20 insertions(+), 3 deletions(-)
diff --git a/src/components/wave.css b/src/components/wave.css
index 6c672c7..0b2c725 100644
--- a/src/components/wave.css
+++ b/src/components/wave.css
@@ -16,25 +16,39 @@
animation: wave-animation-1 10s linear infinite;
}
+.wave9 {
+ animation: wave-animation-6 11s linear infinite;
+}
+
.wave2 {
animation: wave-animation-2 12s linear infinite;
}
+.wave8 {
+ animation: wave-animation-6 13s linear infinite;
+}
+
.wave3 {
animation: wave-animation-3 14s linear infinite;
}
+.wave6 {
+ animation: wave-animation-6 15s linear infinite;
+}
+
.wave4 {
animation: wave-animation-4 16s linear infinite;
}
+.wave7 {
+ animation: wave-animation-6 17s linear infinite;
+}
+
.wave5 {
animation: wave-animation-5 18s linear infinite;
}
-.wave6 {
- animation: wave-animation-6 15s linear infinite;
-}
+
@keyframes wave-animation-1 {
0% { transform: translateX(-50%); }
diff --git a/src/components/wave.tsx b/src/components/wave.tsx
index a202d45..e4d69c1 100644
--- a/src/components/wave.tsx
+++ b/src/components/wave.tsx
@@ -18,8 +18,11 @@ export function WaveAnimation() {
</defs>
<g className="parallax">
<use href="#gentle-wave" x="48" y="-2" className='wave1' fill="rgba(178,66,65,0.7)" />
+ <use href="#gentle-wave" x="48" y="2" className='wave9' fill="rgba(245, 245, 220,0.3)" />
<use href="#gentle-wave" x="48" y="-1" className='wave2' fill="rgba(232,169,166,0.5)" />
+ <use href="#gentle-wave" x="48" y="2" className='wave8' fill="rgba(245, 245, 220,0.3)" />
<use href="#gentle-wave" x="48" y="0" className='wave3' fill="rgba(205,68,50,0.3)" />
+ <use href="#gentle-wave" x="48" y="2" className='wave7' fill="rgba(245, 245, 220,0.3)" />
<use href="#gentle-wave" x="48" y="2" className='wave6' fill="rgba(245, 245, 220,0.3)" />
<use href="#gentle-wave" x="48" y="1" className='wave4' fill="rgba(135,31,35,1)" />
<use href="#gentle-wave" x="48" y="2" className='wave5' fill="rgba(114, 47, 55, 1)" />
--
GitLab