跑路网页单页源码HTML分享-寻日穿戴

我们跑路了！
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>我们跑路了</title>
  <style>
    :root{
      --bg:#080808;
      --red:#ff3b30;
      --yellow:#ffd60a;
      --white:#f4f4f4;
      --muted:#8d8d8d;
      --panel:#111;
    }
    *{box-sizing:border-box}
    html,body{margin:0;min-height:100%;background:var(--bg);color:var(--white);font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;overflow-x:hidden}
    body{
      background:
        radial-gradient(circle at 15% 20%, rgba(255,59,48,.18), transparent 28%),
        radial-gradient(circle at 80% 75%, rgba(255,214,10,.08), transparent 30%),
        #080808;
    }
    .noise{
      position:fixed;inset:0;pointer-events:none;opacity:.05;z-index:9;
      background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
    }
    .tape{
      position:fixed;left:-10vw;right:-10vw;height:48px;background:var(--yellow);color:#000;
      font-weight:900;letter-spacing:8px;display:flex;align-items:center;justify-content:center;
      z-index:5;box-shadow:0 0 20px rgba(255,214,10,.18)
    }
    .tape.top{top:22px;transform:rotate(-2deg)}
    .tape.bottom{bottom:22px;transform:rotate(1.5deg)}
    .wrap{min-height:100vh;display:grid;place-items:center;padding:110px 20px}
    .card{
      width:min(1040px,94vw);
      border:1px solid #282828;background:rgba(12,12,12,.86);
      box-shadow:0 30px 120px rgba(0,0,0,.7);
      position:relative;overflow:hidden;
      backdrop-filter:blur(8px)
    }
    .card:before{
      content:"";position:absolute;inset:0;border:8px solid transparent;
      background:repeating-linear-gradient(135deg,var(--yellow) 0 18px,#111 18px 36px) border-box;
      -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
      -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
    }
    header{padding:55px 55px 25px;text-align:center;position:relative}
    .stamp{
      display:inline-block;border:4px solid var(--red);color:var(--red);
      padding:8px 16px;font-weight:1000;transform:rotate(-7deg);
      letter-spacing:4px;font-size:18px;margin-bottom:18px
    }
    h1{
      margin:0;font-size:clamp(56px,11vw,150px);line-height:.9;letter-spacing:-6px;
      font-weight:1000;text-shadow:7px 7px 0 #2a0000;
      animation:shake 3.6s infinite;
    }
    .subtitle{margin:24px auto 0;max-width:720px;color:#bbb;font-size:18px;line-height:1.8}
    .red{color:var(--red)}
    .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:0;border-top:1px solid #242424}
    .panel{padding:34px 38px;min-height:300px}
    .panel:first-child{border-right:1px solid #242424}
    .panel h2{font-size:16px;color:var(--yellow);letter-spacing:3px;margin:0 0 20px}
    .log{
      background:#050505;border:1px solid #222;padding:18px;
      font-family:Consolas,monospace;font-size:14px;line-height:1.75;
      height:230px;overflow:hidden;box-shadow:inset 0 0 35px rgba(255,0,0,.05)
    }
    .line{opacity:0;animation:show .3s forwards}
    .line:nth-child(2){animation-delay:.5s}.line:nth-child(3){animation-delay:1s}
    .line:nth-child(4){animation-delay:1.5s}.line:nth-child(5){animation-delay:2s}
    .line:nth-child(6){animation-delay:2.5s}.line:nth-child(7){animation-delay:3s}
    .ok{color:#71f79f}.warn{color:var(--yellow)}.bad{color:var(--red)}
    .list{display:grid;gap:12px}
    .item{
      display:flex;justify-content:space-between;gap:20px;
      border-bottom:1px dashed #333;padding:10px 0;color:#aaa
    }
    .item b{color:#fff}
    .status{
      margin:28px 38px 42px;padding:22px;border:1px dashed var(--red);
      display:flex;align-items:center;justify-content:space-between;gap:18px;
      background:rgba(255,59,48,.05)
    }
    .status strong{font-size:22px}
    .dot{
      width:14px;height:14px;border-radius:50%;background:var(--red);
      box-shadow:0 0 16px var(--red);display:inline-block;margin-right:10px;
      animation:blink .8s infinite alternate
    }
    button{
      border:0;background:var(--red);color:#fff;font-size:16px;font-weight:900;
      padding:14px 20px;cursor:pointer;box-shadow:5px 5px 0 #5c0b08;
      transition:.15s transform,.15s box-shadow
    }
    button:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 #5c0b08}
    .toast{
      position:fixed;left:50%;bottom:90px;transform:translate(-50%,30px);
      background:#fff;color:#000;padding:14px 20px;font-weight:900;
      opacity:0;pointer-events:none;transition:.25s;z-index:20
    }
    .toast.show{opacity:1;transform:translate(-50%,0)}
    .plane{
      position:fixed;top:16%;left:-80px;font-size:50px;z-index:3;
      animation:fly 8s linear infinite;filter:drop-shadow(0 0 8px #fff3)
    }
    @keyframes fly{to{left:110vw;top:8%}}
    @keyframes show{to{opacity:1}}
    @keyframes blink{to{opacity:.25}}
    @keyframes shake{
      0%,95%,100%{transform:none}
      96%{transform:translate(-3px,2px) rotate(-.5deg)}
      97%{transform:translate(4px,-1px) rotate(.5deg)}
      98%{transform:translate(-2px,-2px)}
    }
    @media(max-width:760px){
      .grid{grid-template-columns:1fr}.panel:first-child{border-right:0;border-bottom:1px solid #242424}
      header{padding:44px 24px 22px}.panel{padding:28px 24px}
      .status{margin:24px;flex-direction:column;align-items:flex-start}
      h1{letter-spacing:-3px}
      .tape{font-size:12px;letter-spacing:4px}
    }
  </style>
</head>
<body>
  <div class="noise"></div>
  <div class="plane">✈️</div>
  <div class="tape top">⚠ 网站已停止运营 · 仓库已清空 · 客服已离线 ⚠</div>
  <div class="tape bottom">跑路专线 400-RUN-AWAY · 请勿追问 · 问就是在转机</div>

  <main class="wrap">
    <section class="card">
      <header>
        <div class="stamp">FINAL NOTICE</div>
        <h1>我们<span class="red">跑路了</span></h1>
        <p class="subtitle">
          感谢各位一路以来的陪伴。由于老板突然顿悟“世界那么大”，
          公司现已进入 <b class="red">全球流动办公</b> 状态。
        </p>
      </header>

      <div class="grid">
        <div class="panel">
          <h2>跑路进度 / LIVE LOG</h2>
          <div class="log">
            <div class="line ok">[09:12:03] 正在关闭客服系统……完成</div>
            <div class="line ok">[09:13:48] 正在打包发财树……完成</div>
            <div class="line warn">[09:18:21] 老板正在删除群聊……进度 99%</div>
            <div class="line bad">[09:21:07] 财务已失联，最后定位：机场免税店</div>
            <div class="line warn">[09:24:55] 服务器正在冒烟，但还能撑</div>
            <div class="line bad">[09:30:00] 检测到大量“退款”关键词，自动装死</div>
            <div class="line ok">[09:31:11] 跑路程序执行完毕 ✓</div>
          </div>
        </div>

        <div class="panel">
          <h2>当前状态 / STATUS</h2>
          <div class="list">
            <div class="item"><span>客服</span><b>已读不回</b></div>
            <div class="item"><span>老板</span><b>正在转机</b></div>
            <div class="item"><span>财务</span><b>查无此人</b></div>
            <div class="item"><span>办公地址</span><b>已变奶茶店</b></div>
            <div class="item"><span>退款通道</span><b class="red">永久维护</b></div>
          </div>
        </div>
      </div>

      <div class="status">
        <div>
          <span class="dot"></span>
          <strong>系统状态：正在跑路</strong>
          <div style="color:#888;margin-top:6px">最后更新时间：刚刚，而且不会再更新。</div>
        </div>
        <button onclick="contactBoss()">联系老板</button>
      </div>
    </section>
  </main>

  <div class="toast" id="toast">老板已开启飞行模式 ✈️</div>

  <script>
    function contactBoss(){
      const toast=document.getElementById('toast');
      toast.classList.add('show');
      setTimeout(()=>toast.classList.remove('show'),2200);
    }

    document.addEventListener('mousemove', e=>{
      document.body.style.setProperty('--mx', e.clientX+'px');
      document.body.style.setProperty('--my', e.clientY+'px');
    });

    console.log('%c我们跑路了', 'font-size:40px;color:#ff3b30;font-weight:bold');
    console.log('别翻控制台了，财务也不在这里。');
  </script>
</body>
</html>
文章版权归作者所有，未经允许请勿转载。
THE END