From 95af7d3f5b00dfc8941fbef0e7c8834a21cc7f95 Mon Sep 17 00:00:00 2001
From: Xingan Zhao <2081098605@qq.com>
Date: Wed, 2 Oct 2024 09:16:33 +0800
Subject: [PATCH] fix:sponsor animation
---
src/components/Footer.tsx | 5 +----
src/containers/App/App.css | 26 +++++++-------------------
2 files changed, 8 insertions(+), 23 deletions(-)
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index bd9a44f..4e1d20d 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -6,7 +6,7 @@ export function Footer() {
const teamSlug = stringToSlug(teamName);
return (
- <footer className="pt-0 pb-1 py-5 mt--8 text-white">
+ <footer className="pt-0 pb-1 py-5 text-white">
{/* <div className="wave-container bg-rice_yellow">
<div className="wave1"></div>
<div className="wave2"></div>
@@ -27,9 +27,6 @@ export function Footer() {
<div className="slide-small fade2">
<img className="fade-img" src="https://static.igem.wiki/teams/5378/school-badge/smu.webp" alt="Image 2" />
</div>
- <div className="slide-big fade3">
- <img className="fade-img" src="https://static.igem.wiki/teams/5378/school-badge/yanyintech.webp" alt="Image 3" />
- </div>
</div>
{/* <img
diff --git a/src/containers/App/App.css b/src/containers/App/App.css
index c45073e..6cd451e 100644
--- a/src/containers/App/App.css
+++ b/src/containers/App/App.css
@@ -645,42 +645,30 @@ footer a:hover {
}
.fade1 {
- animation: fade1 9s infinite;
+ animation: fade1 6s infinite;
}
@keyframes fade1 {
0% { opacity: 0; }
5% { opacity: 1; }
- 30% { opacity: 1; }
- 35% { opacity: 0; }
+ 45% { opacity: 1; }
+ 50% { opacity: 0; }
100% { opacity: 0; }
}
.fade2 {
- animation: fade2 9s infinite;
+ animation: fade2 6s infinite;
}
@keyframes fade2 {
0% { opacity: 0; }
- 30% { opacity: 0; }
- 35% { opacity: 1; }
- 65% { opacity: 1; }
- 70% { opacity: 0; }
- 100% { opacity: 0; }
-}
-
-.fade3 {
- animation: fade3 9s infinite;
-}
-
-@keyframes fade3 {
- 0% { opacity: 0; }
- 65% { opacity: 0; }
- 70% { opacity: 1; }
+ 50% { opacity: 0; }
+ 55% { opacity: 1; }
95% { opacity: 1; }
100% { opacity: 0; }
}
+
.wave-container {
position: relative;
width: 100%;
--
GitLab