js+css实现钟摆波日期时钟显示时间代码-html代码-BFW代码库

js+css实现钟摆波日期时钟显示时间代码

代码语言：html

所属分类：其他

代码描述：js+css实现钟摆波日期时钟显示时间代码

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

<!doctype html>

<html class="collection-export embed" lang="en">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&display=swap" rel="stylesheet">
<style>
  :root {
    --bg-top: #f8f3e6; --bg: #f3ecda; --bg2: #ebe1c9;
    --ink: rgba(36,22,18,0.78); --dim: rgba(36,22,18,0.55);
    --faint: rgba(36,22,18,0.38); --cyan: #241612; --cyan-soft: rgba(36,22,18,0.62);
    --stage-bg: rgba(36,22,18,0.04); --glow: 0 1px 6px rgba(36,22,18,0.30);
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { height: 100%; min-height: 100%; background: var(--bg); }
  body {
    background: radial-gradient(120% 90% at 50% 0%, var(--bg-top) 0%, var(--bg) 45%, var(--bg2) 100%);
    color: var(--ink); font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 400; overflow: hidden; display: flex; flex-direction: column;
    height: 100vh; min-height: 100vh;
    height: 100dvh; min-height: 100dvh;
  }
  .frame { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; height: 100%; }
  .stage {
    position: relative; flex: 1; min-height: 0;
    box-shadow: inset 0 0 60px rgba(0,0,0,0.05); overflow: hidden;
  }
  canvas { display: block; width: 100%; height: 100%; cursor: pointer; }
  .readout { position: absolute; left: 0; right: 0; bottom: max(clamp(24px, 4vw, 40px), env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; pointer-events: none; text-shadow: var(--glow); }
  .readout .time { display: flex; align-items: baseline; gap: 0.1ch; font-weight: 700; font-size: clamp(32px, 7vw.........完整代码请登录后点击上方下载按钮下载查看