From 8ef173c7d836c382f9c33d299c5c8e52f6447530 Mon Sep 17 00:00:00 2001
From: hongjli <3117313295@qq.com>
Date: 星期二, 08 四月 2025 11:19:57 +0800
Subject: [PATCH] 主页优化
---
src/app/page.tsx | 65 ++++++++++++++++++--------------
1 files changed, 37 insertions(+), 28 deletions(-)
diff --git a/src/app/page.tsx b/src/app/page.tsx
index f380896..6223957 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -17,22 +17,22 @@
// 瀹氫箟鍔ㄧ敾鍙樹綋
const fadeInUp = {
hidden: { opacity: 0, y: 50 },
- visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } }
+ visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: "easeOut" } }
};
const fadeInLeft = {
hidden: { opacity: 0, x: -100 },
- visible: { opacity: 1, x: 0, transition: { duration: 0.7, ease: [0.25, 0.1, 0.25, 1] } }
+ visible: { opacity: 1, x: 0, transition: { duration: 0.5, ease: [0.25, 0.1, 0.25, 1] } }
};
const fadeInRight = {
hidden: { opacity: 0, x: 100 },
- visible: { opacity: 1, x: 0, transition: { duration: 0.7, ease: [0.25, 0.1, 0.25, 1] } }
+ visible: { opacity: 1, x: 0, transition: { duration: 0.5, ease: [0.25, 0.1, 0.25, 1] } }
};
const fadeInScale = {
hidden: { opacity: 0, scale: 0.95 },
- visible: { opacity: 1, scale: 1, transition: { duration: 0.8, ease: "easeOut" } }
+ visible: { opacity: 1, scale: 1, transition: { duration: 0.6, ease: "easeOut" } }
};
// 鎸夐挳鍑哄満鍔ㄧ敾
@@ -42,8 +42,8 @@
opacity: 1,
y: 0,
transition: {
- delay: i * 0.2,
- duration: 0.6,
+ delay: i * 0.15,
+ duration: 0.4,
ease: [0.25, 0.1, 0.25, 1],
},
}),
@@ -60,20 +60,22 @@
{/* 鍏徃鍚嶇О鍜岀洰鏍囨弿杩� */}
<motion.div
initial={{ opacity: 0, y: 30 }}
- animate={{ opacity: 1, y: 0 }}
- transition={{ duration: 0.8, ease: "easeOut" }}
- className="text-center mb-32 relative"
+ whileInView={{ opacity: 1, y: 0 }}
+ viewport={{ once: false, margin: "-100px" }}
+ transition={{ duration: 0.6, ease: "easeOut" }}
+ className="text-center mb-32 relative will-change-transform"
>
{/* 鑳屾櫙瑁呴グ鏁堟灉 */}
<div className="absolute inset-0 -z-10 overflow-hidden pointer-events-none">
<motion.div
className="absolute top-1/2 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/30 to-transparent"
initial={{ scaleX: 0 }}
- animate={{ scaleX: 1 }}
+ whileInView={{ scaleX: 1 }}
+ viewport={{ once: false, margin: "-100px" }}
transition={{ duration: 1.2, delay: 0.3 }}
/>
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
- {[...Array(3)].map((_, i) => (
+ {[...Array(2)].map((_, i) => (
<motion.div
key={i}
className="absolute rounded-full border border-[#6ADBFF]/20"
@@ -82,9 +84,11 @@
top: "50%",
width: "160px",
height: "160px",
+ willChange: "transform, opacity"
}}
initial={{ scale: 0, x: "-50%", y: "-50%", opacity: 0.1 }}
- animate={{ scale: [0, 5 + i], opacity: [0.2, 0] }}
+ whileInView={{ scale: [0, 5 + i], opacity: [0.2, 0] }}
+ viewport={{ once: false, margin: "-100px" }}
transition={{
duration: 3,
repeat: Infinity,
@@ -98,7 +102,8 @@
<motion.h1
className="text-4xl md:text-5xl font-bold mb-3 relative inline-block"
initial={{ opacity: 0, filter: "blur(10px)" }}
- animate={{ opacity: 1, filter: "blur(0px)" }}
+ whileInView={{ opacity: 1, filter: "blur(0px)" }}
+ viewport={{ once: false, margin: "-100px" }}
transition={{ duration: 0.8, delay: 0.2 }}
>
<span className="text-transparent bg-clip-text bg-gradient-to-r from-[#6ADBFF] to-[#5E72EB] relative">
@@ -122,7 +127,8 @@
<motion.div
className="absolute inset-0 bg-gradient-to-r from-[#6ADBFF] to-[#5E72EB]"
initial={{ scaleX: 0 }}
- animate={{ scaleX: 1 }}
+ whileInView={{ scaleX: 1 }}
+ viewport={{ once: false, margin: "-100px" }}
transition={{ duration: 0.8, delay: 0.5, ease: "easeOut" }}
style={{ originX: 0 }}
/>
@@ -131,14 +137,16 @@
<motion.div
className="text-gray-300 max-w-2xl mx-auto text-lg relative"
initial={{ opacity: 0, y: 10 }}
- animate={{ opacity: 1, y: 0 }}
+ whileInView={{ opacity: 1, y: 0 }}
+ viewport={{ once: false, margin: "-100px" }}
transition={{ duration: 0.6, delay: 0.7 }}
>
鏅鸿兘鍖栦緵搴旈摼绠＄悊锛�
<motion.span
className="inline-block text-[#6ADBFF] px-1"
initial={{ opacity: 0 }}
- animate={{ opacity: 1 }}
+ whileInView={{ opacity: 1 }}
+ viewport={{ once: false, margin: "-100px" }}
transition={{ duration: 0.4, delay: 1.1 }}
>
AI妯℃嫙APS鍦烘櫙
@@ -149,7 +157,8 @@
<motion.div
className="absolute left-1/2 bottom-[-22px] w-16 h-[2px] -translate-x-1/2"
initial={{ scale: 0 }}
- animate={{ scale: 1 }}
+ whileInView={{ scale: 1 }}
+ viewport={{ once: false, margin: "-100px" }}
transition={{ duration: 0.5, delay: 1.2 }}
>
<div className="w-full h-full bg-gradient-to-r from-[#6ADBFF]/0 via-[#6ADBFF] to-[#6ADBFF]/0"></div>
@@ -164,10 +173,10 @@
custom={0}
initial="hidden"
whileInView="visible"
- viewport={{ once: false, margin: "-150px" }}
+ viewport={{ once: false, margin: "-100px" }}
variants={buttonVariants}
whileTap={{ scale: 0.97, transition: { duration: 0.1 } }}
- className="group relative"
+ className="group relative will-change-transform"
>
<div className="absolute -inset-0.5 rounded-xl bg-gradient-to-r from-[#6ADBFF] to-[#5E72EB] opacity-30 blur group-hover:opacity-100 group-hover:blur-md transition-all duration-500 group-hover:duration-200 group-active:opacity-70"></div>
<div className="relative flex items-center gap-2 px-10 py-4 rounded-lg backdrop-blur-sm bg-[#131C41]/90 border border-[#6ADBFF]/30 transition-all duration-300 shadow-[0_0_15px_rgba(106,219,255,0.15)] group-hover:shadow-[0_0_25px_rgba(106,219,255,0.25)] group-active:shadow-[0_0_10px_rgba(106,219,255,0.3)]">
@@ -204,10 +213,10 @@
custom={1}
initial="hidden"
whileInView="visible"
- viewport={{ once: false, margin: "-150px" }}
+ viewport={{ once: false, margin: "-100px" }}
variants={buttonVariants}
whileTap={{ scale: 0.97, transition: { duration: 0.1 } }}
- className="group relative"
+ className="group relative will-change-transform"
>
<div className="absolute -inset-0.5 rounded-xl bg-gradient-to-r from-[#FF6A88] to-[#5E72EB] opacity-30 blur group-hover:opacity-100 group-hover:blur-md transition-all duration-500 group-hover:duration-200 group-active:opacity-70"></div>
<div className="relative flex items-center gap-2 px-10 py-4 rounded-lg backdrop-blur-sm bg-[#131C41]/90 border border-[#FF6A88]/30 transition-all duration-300 shadow-[0_0_15px_rgba(255,106,136,0.15)] group-hover:shadow-[0_0_25px_rgba(255,106,136,0.25)] group-active:shadow-[0_0_10px_rgba(255,106,136,0.3)]">
@@ -272,9 +281,9 @@
<motion.div
initial="hidden"
whileInView="visible"
- viewport={{ once: false, margin: "-150px" }}
+ viewport={{ once: false, margin: "-100px" }}
variants={fadeInLeft}
- className="relative"
+ className="relative will-change-transform"
>
<div className="absolute -left-3 top-0 h-full w-1 bg-gradient-to-b from-[#6ADBFF] via-[#5E72EB] to-transparent"></div>
<div className="backdrop-blur-sm bg-white/5 rounded-xl p-8 border border-[#6ADBFF]/20 h-full">
@@ -289,9 +298,9 @@
<motion.div
initial="hidden"
whileInView="visible"
- viewport={{ once: false, margin: "-150px" }}
+ viewport={{ once: false, margin: "-100px" }}
variants={fadeInRight}
- className="relative"
+ className="relative will-change-transform"
>
<div className="absolute -left-3 top-0 h-full w-1 bg-gradient-to-b from-[#FF6A88] via-[#5E72EB] to-transparent"></div>
<div className="backdrop-blur-sm bg-white/5 rounded-xl p-8 border border-[#FF6A88]/20 h-full">
@@ -307,9 +316,9 @@
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
- viewport={{ once: false, margin: "-150px" }}
- transition={{ duration: 0.7, ease: [0.25, 0.1, 0.25, 1], delay: 0.2 }}
- className="mt-20 w-full grid grid-cols-2 md:grid-cols-4 gap-8"
+ viewport={{ once: false, margin: "-100px" }}
+ transition={{ duration: 0.5, ease: [0.25, 0.1, 0.25, 1], delay: 0.2 }}
+ className="mt-20 w-full grid grid-cols-2 md:grid-cols-4 gap-8 will-change-transform"
>
<div className="text-center">
<div className="text-4xl font-bold text-[#6ADBFF] mb-2">98%</div>
--
Gitblit v1.9.3