HERO SECTION
视频背景首屏Video Background Hero
背景播放一段渐隐循环的短视频，正中放一枚带脉冲光环的圆形播放按钮。
效果预览
▶
90 秒看懂
看看别人怎么省下每周 12 小时
适合用在哪
产品宣传片、品牌故事、活动预热页。
容易踩的坑
- 背景视频超过 5MB 且未设 poster，移动端流量消耗大，加载前首屏一片黑。
- 缺少 muted 和 playsinline 属性，iOS 不会自动播放，或直接跳进全屏。
- 没有暂停控件也不响应 prefers-reduced-motion，超过 5 秒的自动动画不符合 WCAG 2.2.2。
设计提示词 · Prompt
视频背景首屏（Video Background Hero）：背景播放静音自动循环的视频（或动态渐变作为降级），在其上盖一层 40-60% 的深色遮罩保证文字可读。正中放一枚 64-80px 的圆形播放按钮——半透明白底（16%）+ 1px 白描边 + 背景模糊，按钮外侧再做一圈 2.4s 无限循环的脉冲光环（scale .85→1.4、透明度 1→0）。按钮下方是白色标题和副文案。如果做不了视频，可用两层彩色径向渐变 + 18s 缓入缓出的漂移动画替代，效果接近。
Video Background Hero: the background plays a muted, autoplaying, looping video (or an animated gradient as a fallback), covered by a 40-60% dark overlay to keep text legible. In the center, place a 64-80px circular play button — semi-transparent white background (16%) + 1px white stroke + background blur — with a 2.4s infinitely looping pulse ring around it (scale .85→1.4, opacity 1→0). Below the button sit a white headline and supporting copy. If video isn't feasible, two layers of colored radial gradients + an 18s ease-in-out drifting animation give a similar effect.
常见搭配
同一页面里经常和「视频背景首屏」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s s--abs d-hero-video"> <div class="d-hero-video__play">▶</div> <h3 class="d-h1">90 秒看懂</h3> <p class="d-sub">看看别人怎么省下每周 12 小时</p> </div>