303 lines
9.8 KiB
HTML
303 lines
9.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<style>
|
|
/* ========== 全局重置：去掉浏览器默认边距 ========== */
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
/* ========== 画布尺寸 ========== */
|
|
/*
|
|
width / height：最终视频的输出分辨率
|
|
- 当前 1080 x 1920 是竖屏 9:16（手机全屏）
|
|
- 想改分辨率就改这两个数字
|
|
例如 720 x 1280 就是 720p 竖屏
|
|
- overflow: hidden → 超出画布的部分裁掉，不会出滚动条
|
|
- background: #000 → 背景黑色，视频没铺满时露出的颜色
|
|
*/
|
|
body {
|
|
width: 1080px;
|
|
height: 1920px;
|
|
overflow: hidden;
|
|
background: #000;
|
|
}
|
|
|
|
/* .clip：所有元素都要有这个 class，才能用 left/top 精确控制位置 */
|
|
.clip { position: absolute; }
|
|
|
|
/* .text-element：所有文字元素都要有这个 class */
|
|
.text-element {
|
|
font-family: Arial, Helvetica, sans-serif; /* 字体 */
|
|
text-align: center; /* 文字水平居中 */
|
|
display: flex; /* 弹性盒子布局（不用管） */
|
|
align-items: center; /* 垂直居中 */
|
|
justify-content: center; /* 水平居中 */
|
|
white-space: pre-wrap; /* 保留换行符，文字超出自动换行 */
|
|
word-break: break-word; /* 长单词撑破时强制换行 */
|
|
}
|
|
|
|
/* ========== 入场动画 ========== */
|
|
/* 给元素加上 class="anim-xxx" 就能用对应的动画效果 */
|
|
/*
|
|
动画时长怎么改？
|
|
数字越小动画越快，越大越慢
|
|
例如 0.5s → 改成 1s 就慢一倍，改成 0.2s 就快一倍
|
|
*/
|
|
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
|
@keyframes slideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
|
|
@keyframes slideLeft { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
|
|
@keyframes scaleIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
|
|
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
|
|
|
|
.anim-fadeIn { animation: fadeIn 0.5s ease-out; }
|
|
.anim-slideUp { animation: slideUp 0.6s ease-out; }
|
|
.anim-slideLeft { animation: slideLeft 0.6s ease-out; }
|
|
.anim-scaleIn { animation: scaleIn 0.5s ease-out; }
|
|
.anim-pulse { animation: pulse 1.5s ease-in-out infinite; }
|
|
</style>
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<!--
|
|
======================================================================
|
|
id="stage" → 舞台容器，所有元素都放在这里面
|
|
|
|
重要属性说明：
|
|
data-composition-id="main" → 不要改，程序内部标识
|
|
data-width / data-height → 必须和上面 body 的宽高一致
|
|
======================================================================
|
|
-->
|
|
<div id="stage" data-composition-id="main" data-start="0" data-width="1080" data-height="1920">
|
|
|
|
<!--
|
|
======================================================================
|
|
★ data-key 属性 ★
|
|
每个元素必须有一个 data-key 属性，程序会根据 data-key 的名字，
|
|
把你传的 data 数据替换到元素内容上。
|
|
|
|
例如：
|
|
模板里 <div data-key="title">标题文字</div>
|
|
你传参时 data: { "title": "你好世界" }
|
|
程序就会把"标题文字"替换成"你好世界"
|
|
|
|
★ data-start / data-duration 属性 ★
|
|
data-start="0" → 第 0 秒开始显示
|
|
data-duration="0" → 持续显示到视频结束（0=一直显示）
|
|
|
|
★ data-track-index 属性 ★
|
|
控制元素的前后层级，数字越大越靠前（盖住数字小的）
|
|
track-index=0 是背景视频专用，其他元素从 1 开始
|
|
======================================================================
|
|
-->
|
|
|
|
<!--
|
|
======================================================================
|
|
data-key="title" 标题
|
|
|
|
最终效果：居中靠上，红色大字
|
|
======================================================================
|
|
|
|
★ 你可以改下面这些参数来调整效果 ★
|
|
|
|
left: 50% + transform: translateX(-50%)
|
|
水平居中，不要改
|
|
|
|
top: 70px
|
|
距离顶部 70 像素
|
|
→ 改大数字，标题往下移；改小数字，标题往上移
|
|
|
|
font-size: 48px
|
|
字号（字体大小）
|
|
→ 改大数字，字变大；改小数字，字变小
|
|
|
|
color: #D82828
|
|
文字颜色，十六进制颜色码
|
|
→ 常见颜色：
|
|
#FFFFFF = 白色 #000000 = 黑色
|
|
#D82828 = 红色 #333333 = 深灰
|
|
→ 也可以直接写英文 red / white / black
|
|
-->
|
|
<div data-key="title" data-start="0" data-duration="0" data-track-index="1"
|
|
class="clip text-element"
|
|
style="
|
|
left: 50%;
|
|
top: 70px;
|
|
transform: translateX(-50%);
|
|
font-size: 48px;
|
|
color: #D82828;
|
|
">标题文字</div>
|
|
|
|
<!--
|
|
======================================================================
|
|
data-key="product_image_1" 产品图片
|
|
|
|
注意：这是 <img> 图片标签，不是文字
|
|
|
|
★ 可调参数 ★
|
|
|
|
width: 200px / height: 200px
|
|
图片的宽和高
|
|
→ 改大图片变大，改小图片变小
|
|
|
|
left: 0px
|
|
距离左边 0 像素（贴左边缘）
|
|
→ 改大数字，图片往右移
|
|
|
|
top: 200px
|
|
距离顶部 200 像素
|
|
→ 改大数字，图片往下移；改小数字，图片往上移
|
|
|
|
提示：
|
|
如果你有多张产品图片，可以复制这个元素，
|
|
把 data-key 改成 product_image_2、product_image_3 ...
|
|
然后在传参时给对应的 key 传不同的图片 URL
|
|
-->
|
|
<img data-key="product_image_1" data-start="0" data-duration="0" data-track-index="2"
|
|
class="clip"
|
|
style="
|
|
width: 200px;
|
|
height: 200px;
|
|
left: 0px;
|
|
top: 200px;
|
|
"
|
|
src="占位图片.jpg" />
|
|
|
|
<!--
|
|
======================================================================
|
|
data-key="product_desc" 产品卖点描述（第一行）
|
|
|
|
★ 可调参数 ★
|
|
|
|
top: 830px
|
|
距离顶部 830 像素
|
|
→ 改大数字，文字往下移；改小数字，文字往上移
|
|
|
|
font-size: 34px
|
|
字号
|
|
→ 改大字变大，改小字变小
|
|
|
|
color: #333333
|
|
文字颜色
|
|
→ #333333 = 深灰色
|
|
→ 改成 #000000 就是纯黑色
|
|
→ 改成 #FFFFFF 就是白色
|
|
|
|
提示：文字内容里可以用 \n 换行
|
|
-->
|
|
<div data-key="product_desc" data-start="0" data-duration="0" data-track-index="3"
|
|
class="clip text-element"
|
|
style="
|
|
left: 50%;
|
|
top: 830px;
|
|
transform: translateX(-50%);
|
|
font-size: 34px;
|
|
color: #333333;
|
|
">产品卖点描述</div>
|
|
|
|
<!--
|
|
======================================================================
|
|
data-key="product_info" 产品信息（第二行描述，更靠下的位置）
|
|
|
|
用法和上面的 product_desc 一样，只是位置不同
|
|
|
|
★ 可调参数 ★
|
|
|
|
top: 950px
|
|
距离顶部 950 像素
|
|
→ 比 product_desc 更靠下
|
|
|
|
font-size: 28px
|
|
字号比第一行略小
|
|
|
|
color: #444444
|
|
文字颜色，比第一行稍浅
|
|
-->
|
|
<div data-key="product_info" data-start="0" data-duration="0" data-track-index="4"
|
|
class="clip text-element"
|
|
style="
|
|
left: 50%;
|
|
top: 950px;
|
|
transform: translateX(-50%);
|
|
font-size: 28px;
|
|
color: #444444;
|
|
">第二行描述文字</div>
|
|
|
|
<!--
|
|
======================================================================
|
|
data-key="disclaimer" 底部免责声明
|
|
|
|
最终效果：贴在底部，白字黑底半透明
|
|
|
|
★ 注意 ★
|
|
这个元素内部有一个 <span> 标签，背景色写在 span 上，
|
|
程序会自动识别 span 上的背景色并应用到最终视频。
|
|
|
|
★ 可调参数 ★
|
|
|
|
top: calc(100% - 45px)
|
|
距离底部 45 像素（100% 是父容器的全部高度）
|
|
→ 改大 45 这个数字，文字往上移（离底部更远）
|
|
→ 改小 45 这个数字，文字往下移（贴底部更近）
|
|
|
|
font-size: 20px
|
|
字号
|
|
|
|
color: #FFFFFF
|
|
文字颜色（白色）
|
|
|
|
★ 下面 <span> 标签里的样式 ★
|
|
|
|
background: rgba(0, 0, 0, 0.70)
|
|
黑底半透明背景
|
|
→ 括号里前三个数字 0,0,0 是黑色（改成 255,255,255 就是白色底）
|
|
→ 最后一个数字 0.70 是不透明度
|
|
1.0 = 完全不透明（纯黑底）
|
|
0.5 = 半透明
|
|
0.0 = 完全透明（看不见背景）
|
|
|
|
padding: 12px 24px
|
|
背景的内边距
|
|
→ 上下 12px，左右 24px
|
|
→ 改大数字，背景范围变大（文字周围的空隙变大）
|
|
→ 改小数字，背景范围变小
|
|
|
|
border-radius: 8px
|
|
背景圆角
|
|
→ 改大数字（如 20px），圆角更明显
|
|
→ 改成 0，就是直角
|
|
-->
|
|
<div data-key="disclaimer" data-start="0" data-duration="0" data-track-index="5"
|
|
class="clip text-element"
|
|
style="
|
|
left: 50%;
|
|
top: calc(100% - 45px);
|
|
transform: translateX(-50%);
|
|
font-size: 20px;
|
|
color: #FFFFFF;
|
|
">
|
|
<span style="background:rgba(0,0,0,0.70); padding:12px 24px; border-radius:8px;">
|
|
免责声明文字
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!--
|
|
======================================================================
|
|
以下脚本不要改，这是程序内部使用的 GSAP 时间轴初始化
|
|
======================================================================
|
|
-->
|
|
<script>
|
|
(function() {
|
|
var tl = gsap.timeline({ paused: true });
|
|
tl.to('#stage', { duration: 0, opacity: 1 }, 0);
|
|
window.__timelines = window.__timelines || {};
|
|
window.__timelines['main'] = tl;
|
|
})();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|