🌆 介绍 CYBERCORE CSS：赛博朋克设计框架，用于未来 UI

Source: Dev.to

🌆 介绍 CYBERCORE CSS

一个纯 CSS 框架，用于构建未来感、赛博朋克风格的界面

是否曾想打造一个看起来像是来自《夜城》的 UI？CYBERCORE CSS 是一个受 《赛博朋克 2077》、《银翼杀手》 以及霓虹灯浸染的科幻反乌托邦美学启发的完整 CSS 框架。

⚡ 为什么还有另一个 CSS 框架？

大多数 CSS 框架侧重于简洁、极简的设计。CYBERCORE 为需要个性的项目而生：

• 游戏仪表盘
• 黑客主题作品集
• 科幻 Web 应用
• 带有锋芒的管理面板

它开箱即用地提供了发光的霓虹边框、故障（glitch）效果、扫描线等。

🎯 关键特性

🚀 快速开始

npm install cybercore-css

或使用 CDN：

<!-- Add the CDN link here -->

🎨 调色板

🔵 青色      #00f0ff  → 主色调强调
🔴 洋红      #ff2a6d  → 危险/警报
🟡 黄色      #fcee0a  → 警告
🟢 绿色      #05ffa1  → 成功状态
⚫ 虚空      #0a0a0f  → 深色背景

✨ 炫酷效果

故障文字

## NIGHT CITY

霓虹边框

Glowing border effect
Magenta variant

扫描线与噪点

CRT monitor effect
Subtle static texture

🧩 组件示例

按钮

EXECUTE
TERMINATE
CONFIRM
SCAN

卡片

<div class="card">
  <header>
    <h4>SYSTEM STATUS</h4>
  </header>
  <section>
    <p>All systems operational.</p>
    <p>Online</p>
  </section>
</div>

终端

<div class="terminal">
  <pre>
    $ hack the planet
  </pre>
</div>

🎭 153 个赛博朋克图标

CYBERCORE 包含完整的图标系统，提供赛博朋克风格的 SVG 图标。

import { renderIcon } from 'cybercore-css/icons';

const icon = renderIcon('terminal', { size: 24, color: 'cyan' });

分类包括导航、操作、媒体、安全、技术等。

🔧 自定义

覆盖任意 CSS 变量以匹配你的品牌：

:root {
  --cyber-cyan-500: #00ffaa;
  --glow-cyan: 0 0 10px #00ffaa, 0 0 30px rgba(0, 255, 170, 0.5);
}

📦 包含内容

• 14 个组件 – 按钮、卡片、输入框、表格、终端、模态框、进度条等
• 6 种效果 – 故障、霓虹边框、扫描线、噪点、数据流、文字发光
• 8 个实用模块 – 显示、弹性盒、网格、间距、文字、动画、可访问性
• 153 个图标 – 覆盖 10 大类，提供 4 种样式变体

🌐 浏览器支持

在所有现代浏览器中均可运行（Chrome 105+、Firefox 121+、Safari 15.4+、Edge 105+）。

🔗 链接

• 在线演示：
• GitHub：
• npm：

---

欢迎留下你的反馈！你希望新增哪些功能？在下方评论或在 GitHub 上打开 issue。

⚡ 为未来而构建，为《夜城》而造型。 ⚡

如果你觉得这篇文章有帮助，请在 GitHub 上给仓库点个 ⭐！