代码语言：html

所属分类：其他

代码由minimax-m3.1-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">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>星空四季 · 小猫时钟</title>
<style>
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{width:100%;height:100%;background:#000;overflow:hidden}
  body{
    font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
    -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;
    touch-action:manipulation;
  }
  #stage{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    overflow:hidden;background:#000;--s:390px;
    background-image:
      radial-gradient(58% 34% at 16% 17%, rgba(74,54,132,0.34), rgba(0,0,0,0) 70%),
      radial-gradient(46% 30% at 86% 12%, rgba(18,74,120,0.30), rgba(0,0,0,0) 72%),
      radial-gradient(70% 42% at 50% 97%, rgba(104,40,92,0.22), rgba(0,0,0,0) 72%),
      radial-gradient(34% 26% at 74% 56%, rgba(28,96,98,0.17), rgba(0,0,0,0) 74%);
  }
  canvas{position:absolute;display:block}
  #bg{left:0;top:0;width:100%;height:100%}
  #actors{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
  #vignette{
    position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(76% 58% at 50% 46%, rgba(0,0,0,0) 40%, rgba(0,0,0,.5) 76%, rgba(0,0,0,.9) 100%);
  }
  #season{
    position:absolute;left:50%;top:calc(var(--s)*0.082);transform:translateX(-50%);
    width:calc(var(--s)*0.62);height:calc(var(--s)*0.22);pointer-events:none;
  }
  .slot{
    position:absolute;left:50%;top:0;transform:translateX(-50%);text-align:center;
    opacity:0;transition:opacity .5s ease;will-change:opacity;
  }
  .cn{
    font-family:"Songti SC","STSong","Noto Serif SC",serif;
    font-size:calc(var(--s)*0.050);line-height:1.08;letter-spacing:calc(var(--s)*0.010);
    color:rgba(255,249,238,.88);text-shadow:0 0 calc(var(--s)*0.034) rgba(255,214,150,.42);
  }
  .en{
    margin-top:calc(var(--s)*0.014);font-size:calc(var(--s)*0.0195);
    letter-spacing:calc(var(--s)*0.018);color:rgba(255,240,220,.42);font-weight:300;
  }
  #hint{
    position:absolute;left:0;right:0;bottom:calc(var(--s)*0.082);text-align:center;
    font-size:calc(var(--s)*0.025);letter-spacing:calc(var(--s)*0.013);
    color:rgba(255,255,255,.34);opacity:0;transition:opacity .8s ease;pointer-events:none;
  }
</style>
</head>
<body>
<div id="stage">
  <canvas id="bg"></canvas>
  <canvas id="dial"></canvas>
  <canvas id="glow"></canvas>
  <svg id="actors" viewBox="0 0 900 1600" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
    <defs>
      <linearGradient id="goldV" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stop-color="#FFF3C0"/>
        <stop offset="0.34" stop-color="#F2CB5E"/>
        <stop offset="0.78" stop-color="#D39C2D"/>
        <stop offset="1" stop-color="#A5701A"/>
      </linearGradient>
      <linearGradient id="goldTail" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stop-color="#D9A431"/>
        <stop offset="1" stop-color="#8E5E13"/>
      </linearGradient>
      <radialGradient id="hubG" cx="0.35" cy="0.3" r="0.85">
        <stop offset="0" stop-color="#FFF6D2"/>
        <stop offset="0.45&quo.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论