js+css实现太阳系起源与演化互动教学动画代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：js+css实现太阳系起源与演化互动教学动画代码

下面为部分代码预览，完整代码请点击下载或在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>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.5.1.css">
<script>
tailwind.config={theme:{extend:{fontFamily:{display:['Cinzel','serif'],body:['Noto Sans SC','sans-serif']}}}}
</script>
<style>
:root{--bg:#0A0E1A;--fg:#E8E0D4;--muted:#8A8078;--accent:#D4A76A;--card:rgba(20,18,25,0.78);--border:rgba(212,167,106,0.2)}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Noto Sans SC',sans-serif;background:#000;color:var(--fg);overflow:hidden;height:100vh;width:100vw}
#solarCanvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0}
.glass{background:var(--card);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border);border-radius:14px}
.font-display{font-family:'Cinzel',serif}
.timeline-track{position:relative;height:6px;border-radius:3px;cursor:pointer}
.timeline-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px rgba(212,167,106,0.6),inset 0 0 4px rgba(255,255,255,0.3);cursor:grab;z-index:10;transition:box-shadow .2s}
.timeline-thumb:hover,.timeline-thumb:active{box-shadow:0 0 28px rgba(212,167,106,0.9),inset 0 0 4px rgba(255,255,255,0.4);cursor:grabbing}
.stage-dot{position:absolute;top:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.2);z-index:5;transition:all .3s}
.stage-dot.active{background:var(--accent);box-shadow:0 0 10px rgba(212,167,106,0.5)}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.82);z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .35s}
.modal-overlay.show{opacity:1;pointer-events:all}
.modal-content{max-width:700px;width:90%;max-height:82vh;overflow-y:auto;transform:translateY(24px) scale(.97);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.modal-overlay.show .modal-content{transform:translateY(0) scale(1)}
.sim-panel{position:fixed;top:0;right:-420px;width:400px;height:100vh;z-index:60;transition:right .45s cubic-bezier(.16,1,.3,1);overflow-y:auto;padding:28px}
.sim-panel.open{right:0}
input[type=range]{-webkit-appearance:none;width:100%;height:5px;border-radius:3px;background:rgba(255,255,255,0.12);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 0 8px rgba(212,167,106,0.4)}
.btn-primary{background:linear-gradient(135deg,var(--accent),#B8864A);color:#1A1410;font-weight:600;padding:8px 20px;border-radius:8px;border:none;cursor:pointer;transition:all .2s;font-family:inherit;font-size:.9rem}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(212,167,106,0.3)}
.btn-ghost{background:transparent;color:var(--fg);border:1px solid var(--border);padding:8px 16px;border-radius:8px;cursor:pointer;transition:all .2s;font-family:inherit;font-size:.85rem}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(212,167,106,0.25);border-radius:3px}
.formula{font-family:'Times New Roman',serif;font-style:italic;color:var(--accent);font-size:1.05em;letter-spacing:.5px}
@keyframes fadeInUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeInUp .5s ease-out}
@keyframes pulseRing{0%,100%{box-shadow:0 0 0 0 rgba(212,167,106,0.3)}50%{box-shadow:0 0 0 8px rgba(212,167,106,0)}}
.pulse-ring{animation:pulseRing 2s infinite}
@media(max-width:768px){.sim-panel{width:100%;right:-100%}.info-panel{left:8px!important;right:8px!important;max-width:none!important}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:0.01ms!important}}
</style>
</head>
<body>

<canvas id="solarCanvas"></canvas>

<!-- 顶部标题 -->
<header class="fixed top-0 left-0 right-0 z-30 flex items-center justify-between px-5 py-3 pointer-events-none">
  <div class="pointer-events-auto">
    <h1 class="font-display text-lg md:text-xl tracking-widest" style="color:var(--accent)">SOLAR SYSTEM</h1>
    <p class="text-xs tracking-wider opacity-60" style="font-weight:300">起源与演化 · 互动教学</p>
  </div>
  <div class="flex gap-2 pointer-events-auto">
    <button id="btnSimulator" class="btn-ghost text-xs flex items-center gap-1.5" title="参数模拟器">
      <i class="fas fa-sliders-h"></i><span class="hidden md:inline">参数模拟器</span>
    </button>
    <button id="btnHelp" class="btn-ghost text-xs w-8 h-8 flex items-center justify-center rounded-full" title=".........完整代码请登录后点击上方下载按钮下载查看