From c7033b699574d531b0509dc7f2d79faeb22fda33 Mon Sep 17 00:00:00 2001 From: gww Date: Mon, 22 Dec 2025 18:08:58 +0800 Subject: [PATCH] css --- src/App.css | 56 +++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 50 insertions(+), 6 deletions(-) diff --git a/src/App.css b/src/App.css index 30ba7ab..0633e18 100644 --- a/src/App.css +++ b/src/App.css @@ -135,6 +135,46 @@ position: relative; overflow: hidden; animation: fadeIn 0.9s ease-out; + z-index: 1; +} + +/* Hero 背景光圈效果 */ +.hero::before { + content: ""; + position: absolute; + top: 40%; + left: 50%; + transform: translate(-50%, -50%); + width: 700px; + height: 500px; + background: radial-gradient( + ellipse at center, + rgba(250, 227, 7, 0.4) 0%, + rgba(250, 227, 7, 0.2) 30%, + rgba(250, 227, 7, 0.15) 50%, + transparent 70% + ); + border-radius: 50%; + filter: blur(80px); + pointer-events: none; + z-index: 0; + animation: glowPulse 8s ease-in-out infinite; +} + +.hero .container { + position: relative; + z-index: 1; +} + +@keyframes glowPulse { + 0%, 100% { + opacity: 0.8; + transform: translate(-50%, -50%) scale(1); + } + 50% { + opacity: 1; + transform: translate(-50%, -50%) scale(1.1); + } } @@ -239,18 +279,22 @@ .feature-tag { display: inline-block; - padding: 12px 24px; - background: rgba(255, 255, 255, 0.15); - border: 1px solid rgba(255, 255, 255, 0.3); + padding: 10px 28px; + background: rgba(250, 227, 7, 0.1); + border: 1px solid rgba(250, 227, 7, 0.4); border-radius: 24px; - font-size: 16px; + font-size: 15px; + color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); transition: all 0.3s ease; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 0 20px rgba(250, 227, 7, 0.1); } .feature-tag:hover { - background: rgba(255, 255, 255, 0.25); - transform: translateY(-2px); + background: rgba(250, 227, 7, 0.2); + border-color: rgba(250, 227, 7, 0.6); + transform: translateY(-3px); + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), 0 0 30px rgba(250, 227, 7, 0.2); } .hero-cta {