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>EvoSystem - 生态系统演化模拟器</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Lucide Icons -->
<script src="https://unpkg.com/lucide@latest"></script>
<style>
body {
background-color: #0b0f19;
font-family: system-ui, -apple-system, sans-serif;
}
/* 玻璃拟态卡片 */
.glass-panel {
background: rgba(17, 24, 39, 0.7);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
}
/* 自定义滚动条 */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0b0f19; }
::-webkit-scrollbar-thumb { background: #1f2937; border-radius: 3px; }
</style>
</head>
<body class="text-gray-100 h-screen flex flex-col overflow-hidden select-none">
<!-- 顶部导航栏 -->
<header class="glass-panel px-6 py-4 flex items-center justify-between border-b border-gray-800 shrink-0 z-10">
<div class="flex items-center space-x-3">
<div class="bg-emerald-500 text-slate-950 p-2 rounded-lg font-black text-xl tracking-wider">EVO</div>
<div>
<h1 class="text-md font-bold">EvoSystem 自然选择模拟终端</h1>
<p class="text-xs text-gray-400">基于基因突变与热动力学多状态机模型</p>
</div>
</div>
<!-- 实时数据顶栏 -->
<div class="flex items-center space-x-6 text-sm">
<div class="flex items-center space-x-2">
<span class="w-3 h-3 rounded-full bg-blue-500 animate-pulse"></span>
<span class="text-gray-400">猎物 (Prey):</span>
<span id="stat-prey-count" class="font-bold font-mono text-blue-400">0</span>
</div>
<div class="h-6 w-px bg-gray-800"></div>
<div class="flex items-center space-x-2">
<span class="w-3 h-3 rounded-full bg-rose-500 animate-pulse"></span>
<span class="text-gray-400">捕食者 (Predator):</span>
<span id="stat-predator-count" class="font-bold font-mono text-rose-400">0</span>
</div>
<div class="h-6 w-px bg-gray-800"></div>
<div class="flex items-center space-x-2">
<span class="w-3 h-3 rounded-full bg-emerald-500"></span>
<span class="text-gray-400">植物 (Grass):</span>
<span id="stat-grass-count" class="font-bold font-mono text-emerald-400">0</span>
</div>
</div>
</header>
<!-- 主工作区：左控制面板 + 中画布 + 右基因图表 -->
<div class="flex-1 flex overflow-hidden">
<!-- 左侧：参数控制区 -->
<aside class="w-80 glass-panel border-r border-gray-800 p-5 flex flex-col overflow-y-auto shrink-0">
<h2 class="text-sm font-bold text-gray-300 uppercase tracking-wider mb-4 flex items-center gap-2">
<i data-lucide="sliders" class="w-4 h-4 text-emerald-400"></i> 环境与生态因子调节
</h2>
<!-- 植物生长率 -->
<div class="space-y-4 flex-1">
<div class="space-y-1.5">
<div class="flex justify-between text-xs font-semibold">
<span class="text-gray-400">植物（草）生长速度</span>
<span id="va.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0