three实现三维科幻电影城市能量护盾代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由hy4 ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：three实现三维科幻电影城市能量护盾代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>AEGIS-09 // 城市能量护盾</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&family=Rajdhani:wght@400;600;700&display=swap" rel="stylesheet" />
<style>
:root{--cy:#7ff0ff;--cy2:#2ab6e8;--warn:#ffb45a;--red:#ff5f5f;--bg:#02060d}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:#cfefff;
  font-family:'Rajdhani','Segoe UI','Microsoft YaHei',sans-serif;user-select:none;-webkit-font-smoothing:antialiased}
canvas{display:block}
#app{position:fixed;inset:0}
#ui{position:fixed;inset:0;z-index:5;pointer-events:none;font-size:13px;letter-spacing:.09em;transition:opacity .35s}
#ui.hidden{opacity:0}
.mono{font-family:'Orbitron','Consolas',monospace}
.panel{position:absolute;background:linear-gradient(135deg,rgba(8,26,42,.80),rgba(3,11,22,.42));
  border:1px solid rgba(96,205,255,.24);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  padding:14px 16px;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  box-shadow:inset 0 0 24px rgba(30,140,200,.09)}
.panel:before{content:'';position:absolute;left:0;top:0;width:34px;height:2px;background:var(--cy);box-shadow:0 0 10px var(--cy)}
.ph{font:600 11px 'Orbitron',monospace;color:var(--cy);letter-spacing:.18em;margin-bottom:12px;
  border-bottom:1px solid rgba(96,205,255,.18);padding-bottom:7px;display:flex;justify-content:space-between}
.ph span{font:400 11px 'Rajdhani',sans-serif;color:#6d9bb5;letter-spacing:.05em}
header{position:absolute;top:31px;left:0;right:0;height:44px;display:flex;align-items:center;
  padding:0 42px;gap:26px;border-top:1px solid rgba(96,205,255,.14);border-bottom:1px solid rgba(96,205,255,.14);
  background:linear-gradient(90deg,rgba(4,16,28,.75),rgba(4,16,28,.15) 45%,rgba(4,16,28,.75))}
.brand{font:700 18px 'Orbitron',monospace;letter-spacing:.22em;color:#e8fbff;text-shadow:0 0 14px rgba(90,220,255,.65)}
.brand span{font:500 10px 'Orbitron',monospace;color:#6d9bb5;letter-spacing:.16em;margin-left:12px}
.status{display:flex;align-items:center;gap:9px;color:#8fb8cc;font-size:12px}
.status b{color:var(--cy);font-weight:700}
.dot{width:7px;height:7px;border-radius:50%;background:#5effc0;box-shadow:0 0 10px #5effc0;animation:pulse 1.8s infinite}
@keyframes pulse{50%{opacity:.35}}
.sep{color:#2d556e;margin:0 4px}
.clock{margin-left:auto;font:600 13px 'Orbitron',monospace;color:#9fd8ee;letter-spacing:.16em}
#left{top:96px;left:42px;width:246px}
.row{display:flex;justify-content:space-between;align-items:baseline;margin:9px 0 2px;color:#88aec2;font-size:12px}
.row b{font:600 13px 'Orbitron',monospace;color:#e6f9ff}
.bar{height:5px;background:rgba(50,120,160,.20);border:1px solid rgba(96,205,255,.18);margin:5px 0 12px;overflow:hidden}
.bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#1688c8,#7ff0ff);
  box-shadow:0 0 12px rgba(110,230,255,.85);transition:width .18s linear}
.bar.warn i{background:linear-gradient(90deg,#c86418,#ffb45a);box-shadow:0 0 12px rgba(255,170,80,.8)}
.spark{height:34px;width:100%;margin-top:6px;opacity:.85}
#right{top:96px;right:42px;width:262px}
#log{height:150px;overflow:hidden;font-size:11.5px;line-height:1.85;color:#8fb8cc}
#log div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:slide .3s ease-out}
@keyframes slide{from{opacity:0;transform:translateX(12px)}}
#log em{font-style:normal;color:#4d7f99;margin-right:7px}
#log .hit{color:var(--warn)}
#log .ok{color:var(--cy)}
.crosshair{position:absolute;left:50%;top:50%;width:74px;height:74px;transform:translate(-50%,-50%);opacity:.42}
.crosshair:before,.crosshair:after{content:'';position:absolute;background:rgba(140,235,255,.75)}
.crosshair:before{left:50%;top:0;width:1px;height:100%;transform:translateX(-50%)}
.crosshair:after{top:50%;left:0;height:1px;width:100%;transform:translateY(-50%)}
.crosshair i{position:absolute;left:50%;top:50%;width:30px;height:30px;trans.........完整代码请登录后点击上方下载按钮下载查看