js+css模拟自然界生态系统代码-html代码-BFW代码库

js+css模拟自然界生态系统代码

代码语言：html

所属分类：其他

代码描述：模拟自然界生态系统网页

下面为部分代码预览，完整代码请点击下载或在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>生态系统模拟 — Ecosystem</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=DM+Mono:wght@300;400&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#060a08;--s1:#0c1210;--s2:#111a15;--bd:#1a2a20;
  --acc:#4fd88a;--acc-d:#1a4a30;
  --prey:#6dcc90;--pred:#e06050;--wat:#4a9dc8;
  --txt:#d0d8d0;--mut:#607060;--dim:#384838;
}
body{background:var(--bg);color:var(--txt);font-family:'DM Mono',monospace;font-size:13px;overflow:hidden;height:100vh}
#app{display:flex;height:100vh}
#cw{flex:1;position:relative;display:flex;align-items:center;justify-content:center;background:var(--bg)}
canvas#W{display:block;cursor:crosshair}
#tt{display:none;position:absolute;pointer-events:none;background:rgba(8,14,10,.95);border:1px solid var(--bd);padding:10px 14px;font-size:11px;line-height:1.7;border-radius:4px;z-index:10;min-width:170px;backdrop-filter:blur(4px)}
#tt .tp{font-family:'Cormorant Garamond',serif;font-size:15px;font-weight:600;margin-bottom:4px}
#tt .tg{color:var(--acc)}
#mo{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--mut);text-align:center;pointer-events:none;z-index:5;text-shadow:0 0 20px rgba(0,0,0,.8)}
#pn{width:310px;min-width:310px;background:var(--s1);border-left:1px solid var(--bd);overflow-y:auto;display:flex;flex-direction:column}
#pn::-webkit-scrollbar{width:3px}
#pn::-webkit-scrollbar-thumb{background:var(--bd)}
.ph{padding:20px 18px 14px;border-bottom:1px solid var(--bd)}
.ph h1{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:700;letter-spacing:.02em}
.ph .sub{font-size:10px;color:var(--mut);margin-top:2px}
.ps{padding:14px 18px;border-bottom:1px solid var(--bd)}
.ps h3{font-family:'Cormorant Garamond',serif;font-size:13px;font-weight:600;color:var(--mut);margin-bottom:10px;text-transform:uppercase;letter-spacing:.1em}
.sr{display:flex;align-items:center;justify-content:space-between;padding:3px 0.........完整代码请登录后点击上方下载按钮下载查看