canvas实现文字物理窗帘交互效果代码-html代码-BFW代码库

canvas实现文字物理窗帘交互效果代码

代码语言：html

所属分类：其他

代码描述：canvas实现文字物理窗帘交互效果代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>墨帘 · 文字物理窗帘</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  
  html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #050302;
    font-family: "STKaiti", "KaiTi", "楷体", "Songti SC", serif;
  }
  
  body {
    background: 
      radial-gradient(ellipse 90% 50% at 50% 0%, rgba(140, 85, 25, 0.4) 0%, transparent 55%),
      radial-gradient(ellipse 70% 90% at 50% 100%, rgba(30, 18, 8, 0.7) 0%, transparent 70%),
      linear-gradient(180deg, #0d0805 0%, #070402 50%, #030201 100%);
  }
  
  /* 顶部飞檐建筑 */
  .roof-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    pointer-events: none;
    height: 200px;
  }
  
  .roof-wrap svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 6px 25px rgba(200, 140, 50, 0.25));
  }
  
  /* 标题 */
  .title {
    position: fixed;
    top: 34px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 11;
    text-align: center;
    pointer-events: none;
    mix-blend-mode: screen;
  }
  .title h1 {
    font-size: 20px;
    letter-spacing: 12px;
    color: #f4d27a;
    font-weight: 400;
    text-indent: 12px;
    text-shadow: 0 0 20px rgba(244, 200, 100, 0.5), 0 0 3px rgba(244, 200, 100, 0.9);
  }
  .title .sub {
    font-size: 10px;
    color: #a07840;
    margin-top: 5px;
    letter-spacing: 5px;
    text-indent: 5px;
    opacity: 0.75;
  }
  
  /* 落款印章 */
  .seal {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 11;
    pointer-events: none;
  }
  .seal-text {
    writing-mode: vertical-rl;
    color: #c03828;
    font-size: 13px;
    letter-spacing: 5px;
    padding: 8px 5px;
    border: 1.5px solid #c03828;
    background: rgba(176, 48, 32, 0.1);
    text-shadow: 0 0 6px rgba(220, 60, 40, 0.4);
  }
  
  /* 底部提示 */
  .hint {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    color: #6a4f2a;
    font-size: 11px;
    letter-spacing: 5px;
    text-indent: 5px;
    z-index: 11;
    pointer-events: none;
    opacity: 0.7;
    animation: breathe 3s ease-in-out infinite;
  }
  @keyframes breathe {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.85; }
  }
  
  /* 侧边角标 */
  .corner {
    position: fixed;
    z-index: 11;
    pointer-events: none;
    color: #5a3f1a;
    font-size: 10px;
    letter-spacing: 3px;
    opacity: 0.55;
  }
  .corner.tl { top: 150px; left: 28px; writing-mode: vertical-rl; }
  .corner.tr { top: 150px; right: 28px; writing-mode: vertical-rl; }
  
  canvas {
    display: block;
    position: fixed;
    t.........完整代码请登录后点击上方下载按钮下载查看