reactus/test1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(app/layout): 引入 Press Start 2P + VT323 像素字体，添加游戏全局样式和动画

Browse Source
This commit is contained in:
Cloud Bot
2026-03-21 07:57:02 +00:00
parent d01ea7d73d
commit 84816cf39e
2 changed files with 144 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
app/globals.css
View File

@@ -1,6 +1,139 @@
@import "tailwindcss";
@import "tw-animate-css";
/* =============================================
* 游戏专属 CSS 变量（大厂保卫战）
* ============================================= */
:root {
--game-bg: #0F0F23;
--game-primary: #7C3AED;
--game-secondary: #A78BFA;
--game-cta: #F43F5E;
--game-text: #E2E8F0;
--game-path: #3d2b1f;
--game-buildable: #1e3a5f;
--game-hover: #2d5a8e;
--game-border: #0a1628;
--game-hud: rgba(10, 22, 40, 0.9);
}
/* =============================================
* 像素字体 class
* ============================================= */
.font-pixel {
font-family: 'Press Start 2P', monospace;
}
.font-vt323 {
font-family: 'VT323', monospace;
}
/* =============================================
* CRT 扫描线效果（主页封面）
* ============================================= */
.crt-overlay {
position: relative;
overflow: hidden;
}
.crt-overlay::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0, 0, 0, 0.08) 2px,
rgba(0, 0, 0, 0.08) 4px
);
pointer-events: none;
z-index: 10;
}
/* =============================================
* 霓虹发光动画
* ============================================= */
@keyframes neon-pulse {
0%, 100% {
text-shadow:
0 0 7px #A78BFA,
0 0 10px #A78BFA,
0 0 21px #A78BFA,
0 0 42px #7C3AED;
}
50% {
text-shadow:
0 0 4px #A78BFA,
0 0 7px #A78BFA,
0 0 13px #A78BFA,
0 0 26px #7C3AED;
}
}
@keyframes neon-border-pulse {
0%, 100% {
box-shadow:
0 0 5px #A78BFA,
0 0 10px #A78BFA,
0 0 20px #7C3AED,
inset 0 0 5px rgba(167, 139, 250, 0.1);
}
50% {
box-shadow:
0 0 3px #A78BFA,
0 0 6px #A78BFA,
0 0 12px #7C3AED,
inset 0 0 3px rgba(167, 139, 250, 0.05);
}
}
@keyframes glitch-skew {
0%, 100% { transform: skewX(0); }
2% { transform: skewX(-1deg); }
4% { transform: skewX(0.5deg); }
6% { transform: skewX(0); }
88% { transform: skewX(0); }
90% { transform: skewX(1deg); }
92% { transform: skewX(-0.5deg); }
94% { transform: skewX(0); }
}
@keyframes scanline-move {
0% { transform: translateY(-100%); }
100% { transform: translateY(100vh); }
}
.neon-title {
color: #A78BFA;
animation: neon-pulse 2.5s ease-in-out infinite, glitch-skew 8s ease-in-out infinite;
}
.neon-border {
border: 1px solid #A78BFA;
animation: neon-border-pulse 2.5s ease-in-out infinite;
}
@keyframes float-text {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-6px); }
}
.game-cover-scanline {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: rgba(167, 139, 250, 0.15);
animation: scanline-move 6s linear infinite;
pointer-events: none;
z-index: 11;
}
@custom-variant dark (&:is(.dark *));
@theme inline {

14
app/layout.tsx
View File

@@ -8,8 +8,8 @@ import { AgentationGuard } from "@/components/AgentationGuard";
import RouteChange from "./RouteChange";
export const metadata: Metadata = {
title: 'Nova Chat',
description: 'Generated by create Nova Chat',
title: '大厂保卫战',
description: '保住KPI，战胜空降VP。一款讽刺大厂文化的塔防游戏。',
};
interface RootLayoutProps {
@@ -18,7 +18,15 @@ interface RootLayoutProps {
export default function RootLayout(props: RootLayoutProps) {
return (
<html lang="en" suppressHydrationWarning>
<html lang="zh-CN" suppressHydrationWarning>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
<link
href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323:wght@400&display=swap"
rel="stylesheet"
/>
</head>
<body className="antialiased">
<ThemeProvider>
{props.children}