<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>视频效果动态图鉴 · 48 种</title><style>
:root{color-scheme:dark;--bg:#131416;--panel:#1d1f22;--border:#343638;--ink:#f6f3ed;--muted:#a5aaa9;--accent:#ff9865}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.7 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif}main{max-width:1380px;min-width:0;margin:auto;padding:22px 36px 36px}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}h1{font-size:26px;letter-spacing:.5px;margin:0;font-weight:650}header p{color:var(--muted);margin:3px 0 0}.wordmark{font:11px monospace;color:var(--accent);letter-spacing:2px}.count{font:30px monospace;color:var(--accent)}.count small{font:12px sans-serif;color:var(--muted);margin-left:12px}.tabs{display:flex;border-bottom:1px solid var(--border);gap:28px;margin-bottom:16px}button,input,select{font:inherit}button{cursor:pointer;background:none;color:var(--ink);border:1px solid var(--border);border-radius:5px;padding:7px 12px;transition:background .15s,border-color .15s}button:hover{background:#2a2d30;border-color:#707477}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.tab{border:0;border-bottom:2px solid transparent;border-radius:0;padding:10px 0 13px;font-size:16px;color:var(--muted)}.tab.on{color:var(--ink);border-bottom-color:var(--accent)}.tab em{font:11px monospace;background:#323437;color:#d7d8d6;padding:2px 6px;margin-left:9px;border-radius:3px}.workspace{display:grid;grid-template-columns:minmax(380px,1fr) 260px;gap:22px}.screen{background:#0c0d0f;border:1px solid var(--border);border-radius:6px;overflow:hidden;position:relative}.screen canvas{display:block;width:100%;height:min(43vh,450px);object-fit:contain}.screen-top{display:flex;justify-content:space-between;padding:9px 13px;color:#bbc0bd;border-bottom:1px solid var(--border);font-size:11px;letter-spacing:.8px}.lamp{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:8px}.controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}.controls select{background:var(--panel);border:1px solid var(--border);border-radius:4px;color:var(--ink);padding:8px}.controls label{margin-left:auto;font-size:12px;color:var(--muted);cursor:pointer}.controls input{accent-color:var(--accent);vertical-align:middle}.scrub{height:2px;background:#383b3d;margin-top:12px;overflow:hidden}.scrub i{display:block;height:100%;width:0;background:var(--accent)}.details{padding:5px 0}.eyebrow{font-size:11px;color:var(--accent);letter-spacing:1px}.details h2{font-size:27px;line-height:1.3;margin:11px 0 14px}.details p{font-size:14px;margin:0 0 19px;color:#dcdfdc}.label{font-size:11px;color:var(--muted);display:block;margin-bottom:4px}.detail-block{border-top:1px solid var(--border);padding-top:13px;margin-top:13px}.detail-block p{margin:0;line-height:1.7;font-size:13px}.ability{font-size:13px;color:#9addc4}.note{color:var(--muted)!important;font-size:12px!important;margin-top:10px!important}.type-input{margin-top:12px}.type-input input{width:100%;background:#26282b;border:1px solid #46494d;border-radius:4px;padding:8px;color:var(--ink)}.list-head{display:flex;align-items:center;justify-content:space-between;margin:25px 0 11px}.list-head h3{font-size:14px;margin:0;font-weight:500}.list-head input{width:260px;padding:7px 11px;border:1px solid var(--border);border-radius:4px;background:var(--panel);color:var(--ink);font-size:12px}.catalog{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.item{text-align:left;display:flex;gap:10px;align-items:center;padding:10px 12px;min-height:59px}.item.on{border-color:var(--accent);background:#302620}.num{font:11px monospace;color:#7b817f;width:22px}.item.on .num{color:var(--accent)}.item strong{font-size:13px;font-weight:500;display:block}.item small{display:block;font-size:10px;color:var(--muted);line-height:1.5}.hint{font-size:12px;color:var(--muted);margin-top:15px}.footer{border-top:1px solid var(--border);padding-top:14px;margin-top:24px;color:#868d88;font-size:11px}.footer a{color:#b5bfbb;margin-left:14px;text-decoration:none}.footer a:hover{text-decoration:underline}.empty{grid-column:1/-1;color:var(--muted);padding:22px}.error{color:#ffae89;padding:15px}#loading{position:absolute;inset:50% 0 auto;text-align:center;color:var(--muted)}
.homebar{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding-bottom:18px;margin-bottom:24px;gap:24px}.homebar a{color:var(--muted);text-decoration:none;font-size:13px}.homebar .homebrand{font-size:23px;font-weight:800;letter-spacing:-1px;color:var(--ink)}.homebrand span{color:var(--accent)}.homebar>div{display:flex;gap:25px}.homebar a:hover,.homebar a[aria-current]{color:var(--accent)}a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.source-jump{margin-top:20px;color:var(--accent)}.materials{border-top:1px solid var(--border);margin-top:28px;padding-top:22px;scroll-margin-top:20px}.material-heading{display:flex;align-items:center;justify-content:space-between;gap:24px}.material-heading .eyebrow{margin:0 0 6px}.material-heading h2{font-size:21px;margin:0}.material-heading h2 span{font-size:14px;font-weight:400;color:var(--accent);margin-left:12px}.download-bundle{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:3px;font-size:13px}.material-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px}.material-tabs,.material-actions{display:flex;gap:7px}.material-toolbar button{font-size:12px}.material-tabs button.on{color:var(--accent);border-color:var(--accent)}.code-view{font:13px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace;background:#101214;border:1px solid var(--border);padding:20px;margin:12px 0 0;max-height:420px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2;color:#dce4df}.material-status{font-size:12px;color:#9addc4;min-height:22px;margin:5px 0}.material-actions button:disabled{opacity:.5;cursor:wait}[hidden]{display:none!important}</style></head><body><main><nav class="homebar" aria-label="站点导航"><a class="homebrand" href="/">HAIHOME<span>.</span></a><div><a href="/">首页</a><a href="https://ppt-router.haihome.top/">PPT 风格库 ↗</a><a href="/image_style_router/">图片风格库</a><a href="/video-effects/" aria-current="page">视频效果图鉴</a><a href="/projects/">作品与工具</a></div></nav><header><div><div class="wordmark">MOTION / TYPE / CINEMATOGRAPHY</div><h1>视频效果动态图鉴</h1><p>看见区别，再决定怎么用。点击下方名称切换演示。</p></div><div class="count">48<small>项精选示范 · 非行业总数</small></div></header><nav class="tabs" id="tabs" aria-label="效果分类"></nav><section class="workspace"><div><div class="screen"><div class="screen-top"><span><i class="lamp"></i><span id="modeLabel">照片效果演示</span></span><span id="counter"></span></div><canvas id="view" width="960" height="540" aria-label="当前效果动态演示"></canvas><div id="loading">正在载入演示素材…</div></div><div class="scrub"><i id="bar"></i></div><div class="controls"><button id="prev" aria-label="上一个效果">← 上一个</button><button id="play">暂停</button><button id="restart">重播</button><button id="next" aria-label="下一个效果">下一个 →</button><select id="speed" aria-label="播放速度"><option value="0.5">0.5×</option><option value="1" selected>1×</option><option value="1.5">1.5×</option></select><label><input id="autonext" type="checkbox"> 自动轮播全部</label></div></div><aside class="details"><div id="kind" class="eyebrow"></div><h2 id="name"></h2><p id="desc"></p><div class="detail-block"><span class="label">适合用在哪里</span><p id="use"></p></div><div class="detail-block"><span class="label">几张图片能不能做</span><div id="ability" class="ability"></div><p id="note" class="note"></p></div><div class="type-input" id="typeInput" hidden><label for="words" class="label">试试自己的文字</label><input id="words" maxlength="14" value="去见山海" placeholder="输入短标题"></div><button id="openMaterials" class="source-jump">查看提示词与代码 ↓</button></aside></section><section><div class="list-head"><h3 id="listTitle"></h3><input id="search" type="search" placeholder="在当前分类搜索：名称、用途、类型" aria-label="搜索当前分类"></div><div id="catalog" class="catalog"></div><p class="hint" id="hint"></p></section><section id="materials" class="materials" aria-labelledby="materialTitle"><div class="material-heading"><div><p class="eyebrow">复现 / 修改 / 带走</p><h2 id="materialTitle" tabindex="-1">提示词与代码 <span id="materialName"></span></h2></div><a id="downloadBundle" class="download-bundle" href="/video-effects/video-effects-source.zip" download>下载全部源码 ZIP ↗</a><span id="offlineHint" hidden>当前已是离线源码包</span></div><div class="material-toolbar"><div class="material-tabs" aria-label="资料类型"><button data-material-mode="prompt" aria-pressed="true">复现提示词</button><button data-material-mode="core" aria-pressed="false">核心代码</button><button data-material-mode="html" aria-pressed="false">完整 HTML</button></div><div class="material-actions"><button id="copyMaterial">复制当前内容</button><button id="downloadPrompt">下载提示词</button><button id="downloadExample">下载当前 HTML</button></div></div><p id="materialHint" class="hint"></p><pre class="code-view" tabindex="0" aria-label="当前资料内容"><code id="materialText"></code></pre><p id="materialStatus" class="material-status" role="status" aria-live="polite"></p><p class="hint">全部源码包包含 48 个独立示例、提示词、原始绘制引擎和测试图片。解压后打开 video-effects/index.html，无需安装依赖。</p></section><footer class="footer">术语参考与素材来源：<a href="https://helpx.adobe.com/premiere/desktop/add-video-effects/effects-and-transitions-library/list-of-video-transitions.html" target="_blank" rel="noreferrer">Adobe · 视频转场</a><a href="https://helpx.adobe.com/after-effects/desktop/animating-text/text-animation/animating-text.html" target="_blank" rel="noreferrer">Adobe · 文字动画</a><a href="https://www.adobe.com/creativecloud/video/production/cinematography/camera-shots-and-angles.html" target="_blank" rel="noreferrer">Adobe · 镜头语言</a><a href="https://www.pexels.com/photo/scenic-view-of-a-coastal-cliff-5087480/" target="_blank" rel="noreferrer">Max Avans / Pexels</a><a href="https://www.pexels.com/photo/cliff-and-beach-on-sea-coast-at-sunset-20350962/" target="_blank" rel="noreferrer">Viktoria Shevchenko / Pexels</a><p>图鉴为原理与风格示范。镜头语言使用简化三维场景；文字样式受本机字体影响。本页用于浏览与比较效果，暂不提供视频导出。</p></footer></main><script>__CATALOG__</script><script>const ASSET_URLS=__ASSETS__;</script><script>__ENGINE__</script><script>const MATERIALS=__MATERIALS__;</script><script>__MATERIALS_JS__</script></body></html>
