代码语言：html

所属分类：其他

代码由glm-5.3-flash ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：四季猫咪时钟

代码标签： 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, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
<meta name="theme-color" content="#000000" />
<title>四季草地时钟 · 星空下的喵</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
  /* ========= 基础样式（内联兜底，即使无网络也保持布局正确） ========= */
  :root{ color-scheme: dark; }
  html,body{ height:100%; }
  body{
    margin:0; background:#000; overflow:hidden;
    -webkit-user-select:none; user-select:none;
    -webkit-touch-callout:none; touch-action:manipulation;
    font-family:'PingFang SC','HarmonyOS Sans SC','Noto Sans SC','Microsoft YaHei',system-ui,sans-serif;
    cursor:pointer;
  }
  /* 夜空底色（极淡的星云，营造电影感） */
  #nebula{ position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(42% 34% at 22% 16%, rgba(92,66,148,.14), transparent 70%),
      radial-gradient(52% 40% at 80% 84%, rgba(40,58,118,.13), transparent 70%),
      radial-gradient(34% 26% at 70% 10%, rgba(158,92,58,.08), transparent 70%);
  }
  /* 星空：闪烁白点 */
  #stars{ position:fixed; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
  .star{ position:absolute; border-radius:999px; background:#fff;
    animation:twinkle var(--d,3s) ease-in-out var(--dl,0s) infinite alternate; }
  @keyframes twinkle{ from{ opacity:.12 } to{ opacity:.95 } }

  /* 9:16 竖屏舞台（尺寸由 JS 精确控制） */
  #stage{ position:relative; z-index:10; }

  /* 顶部季节小字 */
  #seasonLabel{ position:absolute; top:4.4%; left:0; right:0; z-index:40; text-align:center;
    font-size:clamp(11px,3.4vw,15px); letter-spacing:.42em; text-indent:.42em;
    color:rgba(255,242,210,.85); pointer-events:none;
    font-family:'Noto Serif SC','Source Han Serif SC','Songti SC','STSong','SimSun',serif;
    text-shadow:0 0 14px rgba(255,214,140,.4), 0 0 40px rgba(255,190,110,.2);
    animation:labelIn 1.2s .3s ease-out both; }
  @keyframes labelIn{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }
  #seasonLabel.pop{ animation:labelPop .8s ease-out; }
  @keyframes labelPop{
    0%{ opacity:0; letter-spacing:.62em; text-indent:.62em; filter:blur(4px); }
    100%{ opacity:1; letter-spacing:.42em; text-indent:.42em; filter:blur(0); }
  }

  /* 暂停状态：全屏暗幕 + 居中大字（一眼可见，不是按钮） */
  #pauseVeil{ position:absolute; inset:0; z-index:35; display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,.34); opacity:0; pointer-events:none; transition:opacity .35s ease; }
  #pauseVeil.show{ opacity:1; }
  #pauseText{ font-size:clamp(14px,4.2vw,18px); letter-spacing:.4em; text-indent:.4em;
    color:rgba(255,244,214,.95); padding:.72em 1.05em; border-radius:999px;
    background:rgba(12,9,5,.55); box-shadow:0 0 36px rgba(0,0,0,.5);
    font-family:'Noto Serif SC','Source Han Serif SC','Songti SC','STSong','SimSun',serif;
    text-shadow:0 0 18px rgba(255,214,140,.55); }
  /* 底部轻提示（自动消失） */
  #tip{ position:absolute; bottom:5.5%; left:0; right:0; z-index:40; text-align:center;
    font-size:clamp(10px,2.9vw,13px); letter-spacing:.3em; text-indent:.3em;
    color:rgba(255,246,220,.62); opacity:0; transition:opacity .6s ease; pointer-events:none; }
  #tip.show{ opacity:1; }

  /* 电影感暗角 */
  #vignette{ position:absolute; inset:0; z-index:30; pointer-events:none;
    background:radial-gradient(130% 96% at 50% 44%, transparent 52%, rgba(0,0,0,.45) 100%); }

  /* 3D 俯视场景 */
  #scene{ position:absolute; left:50%; top:46%; transform.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论