按钮
Fluorescent button with hard offset shadow and terminal-style mono type
- 基础骨架
font-mono font-bold uppercase tracking-widest rounded-none transition-all duration-150 ease-out- 变体
- 荧光绿、电紫、赛博粉、线框
- 状态
- hover、active、disabled
酸性平面设计组件配方
font-mono font-bold uppercase tracking-widest rounded-none transition-all duration-150 ease-out bg-[#39ff14] text-[#0a0a0a] border-2 border-[#39ff14] shadow-[4px_4px_0px_#a020f0] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0px_#a020f0] hover:brightness-110 active:translate-x-[4px] active:translate-y-[4px] active:shadow-none卡片
Dark card with fluorescent border, hard offset shadow, and scanline-ready surface
- 基础骨架
bg-[#0a0a0a] rounded-none border-2 border-[#39ff14] shadow-[5px_5px_0px_#a020f0] transition-all duration-150 ease-out- 变体
- 默认、紫色、粉色、酸黄
- 状态
- hover
输入框
Terminal-style input with fluorescent text cursor and dark field
- 基础骨架
w-full rounded-none border-2 border-[#39ff14]/60 bg-[#0a0a0a] text-[#39ff14] placeholder:text-[#39ff14]/25 font-mono focus:outline-none transition-all duration-150 ease-out- 变体
- 默认、紫色、粉色
- 状态
- focus、disabled
扭曲横幅
Full-width banner with skewed transform and fluorescent gradient background
- 基础骨架
relative w-full py-6 px-8 bg-gradient-to-r from-[#39ff14] via-[#a020f0] to-[#ff6ec7] skew-y-[-2deg] rounded-none font-mono uppercase tracking-widest [text-shadow:2px_0_#ff0000,-2px_0_#00ffff]- 变体
- 默认、紫色、粉色
- 状态
- 静态
扫描线覆盖层
Decorative overlay panel with CSS scanline effect for retro CRT feel
- 基础骨架
relative bg-[#0a0a0a] border-2 border-[#39ff14]/30 rounded-none overflow-hidden p-6 bg-[repeating-linear-gradient(0deg,transparent,transparent_2px,rgba(57,255,20,0.03)_2px,rgba(57,255,20,0.03)_4px)]- 变体
- 默认、密集、微妙
- 状态
- 静态
故障徽章
Small inline badge with offset shadow and monospace text
- 基础骨架
inline-flex items-center justify-center font-mono font-bold uppercase tracking-wider rounded-none bg-[#0a0a0a]- 变体
- 绿色、紫色、粉色、黄色
- 状态
- 静态
酸性进度条
Progress bar with fluorescent fill and hard edges
- 基础骨架
relative h-6 bg-[#0a0a0a] border-2 border-[#39ff14]/40 rounded-none overflow-hidden [&>.fill]:mix-blend-screen- 变体
- 绿色、紫色、粉色
- 状态
- 静态
扭曲分隔线
Horizontal divider with zigzag distortion pattern
- 基础骨架
relative w-full h-6 flex items-center justify-center bg-[linear-gradient(90deg,#39ff14,#a020f0,#ff6ec7,#e6ff00)] [clip-path:polygon(0_40%,5%_60%,10%_35%,15%_55%,20%_30%,25%_65%,30%_40%,35%_60%,40%_25%,45%_70%,50%_35%,55%_55%,60%_30%,65%_65%,70%_45%,75%_55%,80%_30%,85%_60%,90%_40%,95%_55%,100%_35%,100%_65%,95%_45%,90%_60%,85%_40%,80%_70%,75%_45%,70%_55%,65%_35%,60%_70%,55%_45%,50%_65%,45%_30%,40%_75%,35%_40%,30%_60%,25%_35%,20%_70%,15%_45%,10%_65%,5%_40%,0_60%)] shadow-[2px_0_#ff0000,-2px_0_#00ffff]- 变体
- 默认、粗、点状
- 状态
- 静态