diff --git a/video-gen-app/src/index.css b/video-gen-app/src/index.css index 634ebb66..53195dae 100644 --- a/video-gen-app/src/index.css +++ b/video-gen-app/src/index.css @@ -32,6 +32,90 @@ html, body { ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #9ca3af; } +/* ── Electric Border Animation ─────────── */ +@keyframes electric-pulse { + 0%, 100% { opacity: 0.4; filter: blur(1px); } + 50% { opacity: 1; filter: blur(0); } +} +@keyframes electric-flow { + 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } +} + +.electric-border-card { + position: relative; +} + +.electric-border { + position: absolute; + inset: -2px; + border-radius: 16px; + background: linear-gradient( + 90deg, + #6366f1, + #8b5cf6, + #a855f7, + #6366f1, + #8b5cf6, + #a855f7, + #6366f1 + ); + background-size: 300% 100%; + animation: electric-flow 3s linear infinite, electric-pulse 2s ease-in-out infinite; + z-index: 0; +} + +.electric-border-inner { + position: absolute; + inset: 2px; + border-radius: 14px; + background: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(12px); + z-index: 0; +} + +.electric-border-card:hover .electric-border { + animation-duration: 1.5s, 1s; + opacity: 0.8; +} + +/* ── Shiny Text Animation ─────────────── */ +@keyframes shiny { + 0% { + background-position: -200% center; + } + 100% { + background-position: 200% center; + } +} + +.shiny-text-container { + margin-bottom: 16px; +} + +.shiny-text { + font-size: 24px; + font-weight: 700; + background: linear-gradient( + 90deg, + #6366f1 0%, + #8b5cf6 20%, + #a855f7 40%, + #c084fc 50%, + #a855f7 60%, + #8b5cf6 80%, + #6366f1 100% + ); + background-size: 200% auto; + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + animation: shiny 3s linear infinite; + display: inline-block; + letter-spacing: 1px; +} + /* ── Keyframe Animations ───────────────── */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } diff --git a/video-gen-app/src/pages/LoginPage.tsx b/video-gen-app/src/pages/LoginPage.tsx index a828b8cc..9d3c3946 100644 --- a/video-gen-app/src/pages/LoginPage.tsx +++ b/video-gen-app/src/pages/LoginPage.tsx @@ -261,9 +261,9 @@ const LoginPage: React.FC = () => { }; const features = [ - { icon: , title: 'AI 智能优化', desc: '输入原始提示词,AI 自动为您生成专业级视频描述' }, - { icon: , title: '一键生成视频', desc: '支持多种画质与时长选择,最快 30 秒出片' }, - { icon: , title: '项目维度管理', desc: '按项目组织视频,支持多种行业模板' }, + { icon: , title: 'AI 智能优化', desc: '输入原始提示词,AI 自动为您生成专业级视频、图片描述' }, + { icon: , title: '一键生成视频、图片', desc: '支持多种规格生成视频、图片' }, + { icon: , title: '项目维度管理', desc: '按项目行业分类视频、图片,支持多种行业' }, ]; const inputStyle: React.CSSProperties = { @@ -324,26 +324,38 @@ const LoginPage: React.FC = () => { {siteName} +
+ AI赋能创意,素材触手可及 +
- 专业的 AI 视频生成平台,通过智能提示词优化,
让您的创意快速转化为精美视频 + 专业的 AI 素材生成平台,通过智能提示词优化,
让您的创意快速转化为精美视频、图片
-
+
{features.map((f, i) => ( -
-
{f.icon}
-
+
+
+
+
+
{f.icon}
+
+
{f.title} {f.desc}