three模拟三维龙卷风动画代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three模拟三维龙卷风动画代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>龙卷风模拟器 · 精细版</title>
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
<style>
:root{ --amber:#ffb31f; --red:#ff4b3e; --ink:#e8ebef; --dim:#8a939e; }
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#14171c;
 font-family:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;color:var(--ink)}
canvas{display:block}
#tape{position:fixed;top:0;left:0;right:0;height:30px;z-index:12;overflow:hidden;
 background:#17130a;border-bottom:1px solid #6b5518;
 background-image:repeating-linear-gradient(45deg,rgba(255,179,31,.08) 0 14px,transparent 14px 34px)}
#tape .track{display:inline-block;white-space:nowrap;line-height:30px;
 font:600 13px 'Rajdhani';letter-spacing:.28em;color:var(--amber);animation:marquee 24s linear infinite}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
#title{position:fixed;top:46px;left:20px;z-index:10;display:flex;gap:14px;align-items:center;pointer-events:none}
#title svg{width:46px;height:46px;filter:drop-shadow(0 2px 8px rgba(255,179,31,.35));animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
#title h1{font-size:27px;font-weight:700;letter-spacing:.08em;line-height:1.1;text-shadow:0 2px 12px #000}
#title p{font:600 11px 'Rajdhani';letter-spacing:.34em;color:var(--dim);margin-top:3px}
.panel{background:rgba(13,16,21,.86);border:1px solid #2c343d;
 clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
 box-shadow:0 6px 24px rgba(0,0,0,.45)}
#stats{position:fixed;top:46px;right:20px;z-index:10;padding:14px 18px;min-width:238px;border-left:3px solid var(--red)}
#stats .row{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;border-bottom:1px dashed #232a33}
#stats .row:last-child{border-bottom:none}
#stats .lb{font-size:12px;color:var(--dim);letter-spacing:.18em}
#stats .vl{font-family:'Rajdhani';font-weight:700;font-size:21px;color:#fff}
#stats .vl i{font-style:normal;font-size:11px;color:var(--dim);margin-left:4px;letter-spacing:.1em}
#stats .row.hero .vl{font-size:34px;color:var(--amber)}
#v-stat{font-size:14px;font-family:'Noto Sans SC';font-weight:700}
#deck{position:fixed;left:20px;bottom:20px;z-index:10;padding:14px 18px;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.ctl{display:flex;align-items:center;gap:10px}
.ctl label{font-size:12px;color:var(--dim);letter-spacing:.2em}
.ctl input[type=range]{width:130px;accent-color:var(--amber);cursor:pointer}
.ctl span{font:700 15px 'Rajdhani';color:var(--amber);min-width:34px}
.btns{display:flex;gap:8px}
.btn{background:#161b21;border:1px solid #39424c;color:#cfd6dd;padding:8px 14px;cursor:pointer;
 font:600 12px 'Rajdhani','Noto Sans SC';letter-spacing:.16em;transition:all .18s}
.btn:hover{border-color:var(--amber);color:var(--amber)}
.btn.on{background:var(--amber);color:#1a1206;border-color:var(--amber)}
#hint{position:fixed;right:20px;bottom:20px;z-index:10;font-size:12px;color:var(--dim);
 letter-spacing:.12em;text-align:right;pointer-events:none;text-shadow:0 1px 4px #000}
#hint span{display:block;font:600 11px 'Rajdhani';letter-spacing:.24em;margin-top:4px;color:#5b646e}
#flash{position:fixed;inset:0;background:#dfe9ff;opacity:0;pointer-events:none;z-index:5}
#vig{position:fixed;inset:0;pointer-events:none;z-index:4;
 background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.5) 100%)}
#grain{position:fixed;inset:-120px;z-index:4;pointer-events:none;opacity:.06;
 background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='300' height='300' filter='url(%23n)' opacity='0.9'/></svg>");
 animation:grain 1.1s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-30px,20px)}40%{transform:translate(20px,-35px)}
 60%{transform:translate(-25px,-15px)}80%{transform:translate(30px,25px)}100%{transform:translate(0,0)}}
#boot{position:fixed;inset:0;z-index:50;background:#0d1015;display:flex;flex-direction:column;
 align-items:center;justify-content:center;gap:14px;transition:opacity .9s ease}
#boot.hide{opacity:0;pointer-events:none}
#boot h2{font-size:34px;font-weight:700;letter-spacing:.2em}
#boot p{font:600 12px 'Rajdhani&#.........完整代码请登录后点击上方下载按钮下载查看