HTML源码 – 纯前端黑客特效单页源码

这是一款全屏黑客科技感特效单页源码，内嵌CSS代码，源码很简单，上传服务器访问域名即可，喜欢的自行部署吧！

核心效果（全自动流程）

流程时序（可自定义）：

1. 初始阶段（绿色）
   • 页面加载后自动显示绿色保护伞界面
   • 代码列表开始逐字符打字动画（模拟系统指令输入）
   • 背景代码流下落，扫描线上下滚动，顶部显示「SYSTEM SCANNING… 0%」
2. 扫描阶段（绿色→红色过渡）
   • 扫描进度从 0% 自动增长到 100%
   • 进度条实时更新，模拟系统扫描电脑的过程
3. 警报触发（红色）
   • 扫描完成后自动触发红色警报
   • 所有元素瞬间从绿色变为红色（背景网格、面板、LOGO、文字）
   • 显示超大红色「LOCKDOWN」闪烁文字
   • 左右警告三角出现并脉冲闪烁
   • 扫描线变红，顶部提示「CONTAINMENT FAILURE – LOCKDOWN INITIATED!」
   • 代码列表自动替换为警报内容

HTML代码

复制全部代码，新建 .html 文件（如 umbrella-auto.html）

自定义修改指南

1. 调整时间 / 速度（最常用）

修改 config 配置对象即可：

const config = {
    typeSpeed: 50,        // 打字速度（越小越快）
    progressInterval: 300,// 扫描进度更新间隔（越小进度走得越快）
    stage: {
        waitAfterType: 1000, // 打字完成后等待时间
        scanToAlert: 3000,   // 扫描到警报的过渡时间
        alertDelay: 1000     // 警报触发延迟
    }
};

2. 修改代码文本
   绿色阶段文本：修改 greenCodeText 里的内容
   红色阶段文本：修改 redCodeText 里的内容
3. 调整颜色
   绿色系：#00b400/#00cc00/#00ff00
   红色系：#b40000/#cc0000/#ff0000
4. 调整扫描线速度
   修改 CSS 里的 animation: scanMove 3s linear infinite;（3s 改为更小数值更快）