H5签到日历中“已签到”印章的缩放+震动效果通过纯CSS动画实现：用@keyframes定义stamp-down动画，包含0%微缩下压、60%过冲抖动、100%回弹到位三阶段，配合cubic-bezier缓动曲线与box-shadow变化增强真实感，JS仅负责添加.stamp-trigger类触发一次动画。
在 H5 签到日历中实现“已签到”印章盖下时的缩放 + 震动过渡效果，核心是结合 CSS 动画（@keyframes）与 transform 变换，用短时、非线性、带位移抖动的关键帧模拟“盖章”瞬间的物理反馈。不需要 JS 控制动画流程，纯 CSS 即可完成，但需 JS 触发类名切换来启动动画。
1. 印章元素结构与基础样式
为每个签到日期单元格中的印章图标（如 ✅ 或自定义 SVG/图片）单独包裹一个 <span class="stamp"></span>，确保它能独立运行动画：
✓
关键样式要点：
- 设置
display: inline-flex或display: inline-block，并居中对齐（align-items: center; justify-content: center） - 初始状态设为
transform: scale(0); opacity: 0;，隐藏印章 - 添加
transition: transform 0.1s, opacity 0.1s;用于入场前的微过渡（可选）
2. 缩放 + 震动动画定义（CSS @keyframes）
定义一个名为 stamp-down 的动画，持续约 0.3–0.4 秒，包含三个关键阶段：
-
0%：微缩（
scale(0.8)）+ 向下轻微位移（translateY(2px)），模拟按压感 -
60%：快速放大过冲（
scale(1.15)）+ 水平随机抖动（translateX(-3px)） -
100%：回弹到位（
scale(1)+translateX(0) translateY(0)），并保持不透明
示例代码：
@keyframes stamp-down {
0% { transform: scale(0.8) translateY(2px); opacity: 0.9; }
60% { transform: scale(1.15) translateX(-3px) translateY(-1px); }
100% { transform: scale(1) translateX(0) translateY(0); opacity: 1; }
}
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
3. 触发动画：JS 添加动画类 + 一次生效控制
当用户签到成功或页面加载判断为“已签到”时，给对应 .stamp 元素添加动画类，并确保动画只执行一次（避免重复点击触发多次）：
const stamp = document.querySelector('.calendar-day.active .stamp');
if (stamp && !stamp.classList.contains('animated')) {
stamp.classList.add('animated', 'stamp-trigger');
// 动画结束后清理类名，便于下次复用（可选）
stamp.addEventListener('animationend', () => {
stamp.classList.remove('stamp-trigger');
}, { once: true });
}
CSS 中绑定动画：
.stamp-trigger {
animation: stamp-down 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
使用 cubic-bezier(0.22, 0.61, 0.36, 1) 这类缓入缓出曲线，让震动更自然，避免机械感。
4. 增强真实感的小技巧
-
阴影配合：在动画中加入
box-shadow变化（如 0% 无影 → 60% 深色短距阴影 → 100% 恢复），强化“压下-回弹”层次 -
音效轻提示（可选）：在
stamp-trigger添加瞬间播放 0.1s “叩”声（Web Audio API 或 - 避免过度震动：位移控制在 ±3px 内，缩放幅度不超过 1.2x，否则易造成视觉不适或误判为 UI 异常
不复杂但容易忽略：动画必须作用于独立的 stamp 元素，且不能和父容器的 transition 冲突；用 animation-fill-mode: forwards 可省去 JS 清理类名步骤，让最终态保持 scale(1) 和 opacity(1)。
