js+css实现四季猫咪时钟走动动画代码-html代码-BFW代码库

js+css实现四季猫咪时钟走动动画代码

代码语言：html

所属分类：其他

代码由qwen-3.8-max 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>
  html,body{height:100%;background:#000;overflow:hidden;}
  body{margin:0;font-family:ui-rounded,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
       -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
  #stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#000;}
  #app{position:relative;overflow:hidden;cursor:pointer;touch-action:manipulation;
       height:100vh;height:min(100dvh,calc(100vw*16/9));
       width:100vw;width:min(100vw,calc(100dvh*9/16));
       background:
         radial-gradient(120% 60% at 50% 108%, rgba(64,66,118,.34), transparent 62%),
         radial-gradient(85% 42% at 82% 6%,  rgba(38,58,110,.30), transparent 60%),
         radial-gradient(60% 32% at 12% 30%, rgba(96,62,124,.16), transparent 60%),
         #030409;}
  #wrap *{pointer-events:none;}
  .cat{filter:drop-shadow(0 5px 4px rgba(0,0,0,.38));will-change:transform;}
  #hand{will-change:transform;filter:drop-shadow(0 0 6px rgba(255,198,84,.55)) drop-shadow(0 0 18px rgba(255,190,60,.22));}
  .tail{animation:wag 2.4s ease-in-out infinite alternate;transform-box:view-box;}
  @keyframes wag{from{transform:rotate(-7deg)}to{transform:rotate(8deg)}}
  .sdot{width:5px;height:5px;border-radius:9999px;background:rgba(255,255,255,.18);transition:all .45s;}
  .sdot.on{transform:scale(1.4);}
  .swap{animation:popIn .55s ease;}
  @keyframes popIn{0%{opacity:0;transform:translateY(7px)}100%{opacity:1;transform:none}}
  #flash{opacity:0;}
  #flash.go{animation:flashGo .8s ease-out forwards;}
  @keyframes flashGo{0%{opacity:.9;transform:translate(-50%,-50%) scale(.5)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}
  #hint{animation:hintPulse 3.2s ease-in-out infinite;}
  #hint.paused{color:rgba(250,214,110,.65);}
  @keyframes hintPulse{0%,100%{opacity:.4}50%{opacity:.65}}
</style>
</head>
<body>
<div id="stage">
  <div id="app">

    <!-- 星空 -->
    <canvas id="stars" class="absolute inset-0"></canvas>

    <!-- 环境光 & 投影 -->
    <div id="glow" class="absolute rounded-full pointer-events-none"></div>
    <div id="shadow" class="absolute pointer-events-none"></div>

    <!-- 时钟场景（轻微 3D 俯视） -->
    <div id="scene" class="absolute inset-0 pointer-events-none" style="perspective:1200px;">
      <div id="wrap" class=&quo.........完整代码请登录后点击上方下载按钮下载查看