js实现可修改参数的模拟钟摆动画代码-html代码-BFW代码库

js实现可修改参数的模拟钟摆动画代码

代码语言：html

所属分类：动画

代码描述：js实现可修改参数的模拟钟摆动画代码

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

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pendulum Physics Simulation</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600&family=DM+Mono:wght@300;400&display=swap" rel="stylesheet">
<style>
  *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
  :root{
    --bg:#0a0a0c;
    --surface:#111114;
    --accent:#e8b84b;
    --accent-dim:#a07a2e;
    --accent-glow:rgba(232,184,75,0.15);
    --text-primary:#e8e4dc;
    --text-muted:#5a5650;
    --rod:#8a8580;
    --pivot:#c0bdb8;
  }
  html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text-primary);font-family:'DM Mono',monospace}

  body::before{
    content:'';position:fixed;inset:0;
    background:
      radial-gradient(ellipse at 50% 0%,rgba(232,184,75,0.03) 0%,transparent 50%),
      radial-gradient(ellipse at 20% 80%,rgba(30,25,15,0.5) 0%,transparent 50%),
      var(--bg);
    pointer-events:none;z-index:0;
  }

  .layout{
    display:grid;grid-template-columns:1fr 320px;grid-template-rows:auto 1fr;
    height:100vh;gap:0;position:relative;z-index:1;
  }

  header{
    grid-column:1/-1;padding:28px 40px 0;
    display:flex;align-items:baseline;gap:20px;
  }
  header h1{
    font-family:'Cormorant Garamond',serif;font-weight:300;
    font-size:1.6rem;letter-spacing:0.08em;color:var(--text-primary);
  }
  header .sub{
    font-size:0.65rem;color:var(--text-muted);letter-spacing:0.15em;text-transform:uppercase;
  }

  .canvas-wrap{
    position:relative;display:flex;align-items:center;justify-content:center;
    padding:20px;
  }
  canvas{
    width:100%;height:100%;
    display:block;
  }

  .panel{
    background:var(--surface);
    border-left:1px solid rgba(255,255,255,0.04);
    padding:32px 28px;
    display:flex;flex-direction:column;gap:28px;
    overflow-y:auto;
  }
.........完整代码请登录后点击上方下载按钮下载查看