代码语言：html

所属分类：其他

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

代码描述：剧本分镜脚本转三维白模动画

代码标签： three 剧本 分镜 脚本 转 三维 白模动画 代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>《海边搭讪》· 3D白模分镜动画</title>
<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=Noto+Serif+SC:wght@600;900&family=Noto+Sans+SC:wght@300;400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
  :root{
    --bg:#0e0e0f; --panel:#141416; --line:#2a2a2c; --line2:#3a3a3d;
    --tx:#e9e9e9; --dim:#8d8d90; --dim2:#5c5c60;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%}
  body{
    background:
      radial-gradient(1100px 520px at 50% -8%, #1c1c1e 0%, var(--bg) 62%),
      var(--bg);
    color:var(--tx);
    font-family:"Noto Sans SC",sans-serif;
    display:flex;flex-direction:column;align-items:center;
    min-height:100vh;padding:16px 18px 10px;
    overflow-x:hidden;
  }
  body::before{ /* 页面颗粒 */
    content:"";position:fixed;inset:0;pointer-events:none;opacity:.05;z-index:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .wrap{width:min(1240px,96vw);position:relative;z-index:1;display:flex;flex-direction:column;gap:12px}

  /* ── 页眉 ─────────────────────────── */
  header{
    display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
    border-bottom:1px solid var(--line);padding-bottom:12px;
  }
  .title-block{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
  h1{
    font-family:"Noto Serif SC",serif;font-weight:900;font-size:clamp(22px,2.4vw,30px);
    letter-spacing:.06em;line-height:1;
  }
  h1 .brk{color:var(--dim2)}
  .chip{
    font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.28em;
    border:1px solid var(--line2);padding:5px 10px 4px;color:var(--dim);
    transition:.25s;cursor:default;
  }
  .chip:hover{color:#fff;border-color:#fff;background:#ffffff12}
  .meta{
    font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.18em;
    color:var(--dim2);display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end;
  }
  .meta b{color:var(--dim);font-weight:500}

  /* ── 16:9 舞台 ─────────────────────── */
  .stage-outer{display:flex;justify-content:center}
  #stage{
    position:relative;width:100%;aspect-ratio:16/9;background:#101011;
    border:1px solid var(--line);overflow:hidden;
    box-shadow:0 30px 80px -30px #000c, 0 0 0 1px #000;
  }
  #stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
  #stage::after{ /* 暗角 */
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(120% 90% at 50% 46%, transparent 62%, #00000038 100%);
  }
  .grain{
    position:absolute;inset:-40px;pointer-events:none;opacity:.06;z-index:5;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    animation:grain 1.2s steps(3) infinite;
  }
  @keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-14px,9px)}66%{transform:translate(11px,-13px)}100%{transform:translate(0,0)}}
  .corner{position:absolute;width:16px;height:16px;border:1px solid #ffffff55;pointer-events:none;z-index:6}
  .c-tl{top:10px;left:10px;border-right:0;border-bottom:0}
  .c-tr{top:10px;right:10px;border-left:0;border-bottom:0}
  .c-bl{bottom:10px;left:10px;border-right:0;border-top:0}
  .c-br{bottom:10px;right:10px;border-left:0;border-top:0}

  /* 镜头信息（左上） */
  #shotinfo{
    position:absolute;top:22px;left:26px;z-index:7;pointer-events:none;
    font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacin.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论