各位好，我是最骚源码。

今天给大家分享一个我手搓的暗黑赛博风格单页模板，适合工作室、个人品牌、创意团队的官网展示。

先说效果：

整体是深黑底色 + 电光青主色调，配合扫描线纹理、噪点叠加、浮动光晕，赛博感直接拉满。交互上做了鼠标跟随光晕、视差滚动、故障闪烁文字、无限跑马灯，细节拉到每一帧。

技术栈：

  • 纯 HTML + CSS + 原生 JS，零依赖，一个文件搞定
  • CSS 自定义属性管理全局色彩
  • Intersection Observer 实现滚动入场动画
  • 响应式适配，手机端也能看
  • 字体用的 Google Fonts（Syne + Noto Sans SC）

页面结构：

区块 内容
导航栏 固定顶部，毛玻璃背景
首屏 大字标题 + 故障动画 + CTA 按钮
跑马灯 无限循环服务关键词
服务卡片 6 宫格，hover 顶部渐变线
案例展示 2×2 网格，hover 缩放 + 箭头旋转
数据统计 四列数字展示，渐变色数字
核心优势 2×2 特性卡片
联系表单 左信息 + 右表单布局
页脚 版权 + 社交链接

设计亮点：

  1. 1.光标跟随光晕 — 鼠标移动时带一圈淡淡的电光青光晕，氛围感直接上来
  2. 2.Orb 视差 — 三个漂浮光球跟随鼠标做视差运动，页面有呼吸感
  3. 3.扫描线 + 噪点 — 两层伪元素叠加，模拟 CRT 显示器质感
  4. 4.故障文字 — 标题关键帧做微位移抖动，赛博味拉满
  5. 5.滚动入场 — 所有卡片、统计数据进入视口时依次渐显，节奏感强

配色方案：

--bg: #07070a;        /* 背景 */
--accent: #00f0ff;    /* 主色-电光青 */
--accent2: #ff3d00;   /* 辅色-赤焰橙 */
--warm: #e8c547;      /* 点缀-琥珀金 */
--text: #eae8e1;      /* 正文 */
--muted: #4a4860;     /* 辅助文字 */

 

怎么用：

  1. 1.复制全部代码保存为 index.html
  2. 2.浏览器直接打开即可
  3. 3.改文字、改颜色、改结构随便折腾
  4. 4.想换配色？改 :root 里的 CSS 变量就行，一分钟换肤