空白页卡片轮播动画
复制提示词，在你的项目里用代码轻松实现有趣的动画效果！
复刻提示词
根据提供的设计稿和录屏，用 HTML、CSS、JavaScript 实现三张照片卡片的循环轮播，以及下方关键词的滚动动画。 准确还原设计稿的初始尺寸、位置、倾角、重叠关系、照片裁切、圆角、白色外描边和阴影。将照片、描边、阴影作为一个完整平面进行变换，旋转中心位于卡片中心。 1. 固定槽位与轮换 三个固定槽位为右后、左后、前景，每轮按“右后→左后、左后→前景、前景→右后”轮换。 每张卡片连续移动到目标槽位，同时平滑改变尺寸和倾角。始终保留三个卡片及各自绑定的原图，不通过替换图片或原地切层伪造轮播。 2. 节奏与插值 每轮停留850ms，运动1050ms，三轮共5700ms。 以下时间均相对于本轮运动开始： - 前景：0～924ms。 - 右后：63～987ms。 - 左后：126～1050ms。 错峰按本轮槽位角色分配，三张卡片的运动大部分重叠。 各卡片将自己的运动窗口归一化为q，限制在0～1；使用p=q²(3−2q)作为缓入缓出进度。位置、尺寸、倾角均按p在起始槽位与目标槽位之间插值。 3. 前景侧翻与空间交接 前景退向右后时，沿自身纵轴侧翻0°→90°→0°： - 侧翻角度：90°×sin²(πp)。 - 在常规位置插值上，额外增加向右、向下各18px×sin(πp)的弧线偏移。 - 虚化：2.5px×sin²(πp)，落位恢复清晰。 - CSS透视距离采用卡片当前图片高度÷0.35。 运动第462ms，前景恰好侧翻至90°时，同步交接层级：退场卡置底，原左后卡置顶，原右后卡居中。其余两张卡片保持正面朝向和清晰状态。 4. 下方文字滚动 初始显示“Track changes in life”，关键词按life→plants→food循环，并始终对应前景照片主题。 前缀“Track changes in ”不做纵向滚动，仅关键词参与切换。文字字号20px、常规字重、行高28px。 每轮在运动第302～622ms内完成文字切换，共320ms，切换中心与第462ms的侧翻交接对齐。使用同样的三次缓入缓出曲线： - 旧词从原位上移8px，透明度1→0，虚化0→3px。 - 新词从下方8px移至原位，透明度0→1，虚化3→0px。 - 三个词保留为独立元素，交叉淡化。 - 测量旧词、新词的真实宽度，并随切换进度插值词槽宽度，使整句话始终平滑居中。 5. 同步与验收 卡片和文字共用同一时间轴，暂停、重播、拖动进度时同时响应。 三轮结束后，卡片姿态、照片身份和文字可见状态准确回到初始状态；全程无倒放、瞬移、穿插、闪烁或循环跳变。 图片与字体加载完成后再开始计时。页面进入后台时冻结时间；系统启用减少动态效果时显示静态初始状态。 在浏览器中检查初始画面、90°交接帧、三种关键词状态及5700ms循环接缝。
动画源代码
会员解锁后可查看并复制完整 Web / Swift 源码。
<!-- # 保存为 index.html 后用浏览器打开。演示图片需联网，也可替换为本地图片。 -->
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>空白页卡片轮播动画</title>
<!-- Save as index.html and open in a browser. No build or packages required.
Demo photos use public HTTPS assets and require internet access.
Small decorative SVG assets are embedded in this file.
Replace the three photo URLs with your own local images for offline use.
SLOTS below uses image-fill dimensions; the 4px white border is outside. -->
<style>
:root { --border:#ddd8cc; font-family:system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; padding:24px; background:#f7f6f2; }
button,input { font:inherit; }
.carousel-demo { max-width:760px; margin:auto; }
.motion-preview { margin: 20px 0 36px; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: #1c1c19; }
.motion-stage { box-sizing: border-box; height: 540px; display: flex; align-items: center; justify-content: center; padding: 32px 24px 24px; }注意事项
- 参考素材越完整，还原越准确。建议将设计稿、参考视频和原始图片一起提供给 AI，帮助它准确理解卡片的位置、照片裁切和动画节奏。
- 同样的动效规则可用于不同框架。例如在 Swift 项目中，可将提示词开头的「HTML、CSS、JavaScript」替换为「SwiftUI」；其他项目也可换成对应框架，保留后续的轮换逻辑、时间安排和验收要求，并按框架能力调整实现方式。