可爱小狗摆尾巴
用纯 CSS（可选少量 JS）在页面右下角放出一只简笔画小狗，尾巴左右摆动几秒后自动消失。适合「保存成功」「跟进打卡成功」等轻量庆祝，不要做成挡操作的全屏遮罩。
何时使用
- 用户要「可爱一点的成功反馈」「小狗摆尾巴」「轻量庆祝动效」
- 不想用礼花/全屏 modal，只要角落小惊喜
硬约束
- 动效必须肉眼可见（尾巴摆动幅度足够大）。
- 容器
pointer-events: none，不得拦截页面点击。 - 默认约 2.5～3.5 秒后自动移除 DOM。
- 成功挂载 / 失败都要有简短提示（console 或 toast）。
核心实现
<!-- 可注入到 body 末尾 -->
<div class="puppy-wag-root" aria-hidden="true">
<div class="puppy">
<div class="puppy-body"></div>
<div class="puppy-head"></div>
<div class="puppy-ear l"></div>
<div class="puppy-ear r"></div>
<div class="puppy-tail"></div>
</div>
</div>
.puppy-wag-root {
position: fixed; right: 24px; bottom: 24px; z-index: 9999;
pointer-events: none; width: 96px; height: 96px;
}
.puppy { position: relative; width: 80px; height: 64px; }
.puppy-body {
position: absolute; left: 8px; bottom: 8px; width: 52px; height: 36px;
background: #f0c27a; border-radius: 28px 28px 18px 18px;
}
.puppy-head {
position: absolute; right: 4px; top: 10px; width: 34px; height: 34px;
background: #f5d09a; border-radius: 50%;
box-shadow: inset -6px -4px 0 #e8b86a;
}
.puppy-ear { position: absolute; width: 12px; height: 20px; background: #d4a017; border-radius: 10px; }
.puppy-ear.l { right: 28px; top: 4px; transform: rotate(-18deg); }
.puppy-ear.r { right: 6px; top: 6px; transform: rotate(18deg); }
.puppy-tail {
position: absolute; left: 0; bottom: 28px; width: 10px; height: 28px;
background: #e0b060; border-radius: 8px;
transform-origin: bottom center;
animation: wag 0.35s ease-in-out infinite alternate;
}
@keyframes wag {
from { transform: rotate(-28deg); }
to { transform: rotate(32deg); }
}
export function showPuppyWag(ms = 3000): void {
const wrap = document.createElement('div');
wrap.className = 'puppy-wag-root';
wrap.innerHTML = `...`; // 填入上方结构
document.body.appendChild(wrap);
window.setTimeout(() => wrap.remove(), ms);
console.info('小狗摆尾巴已播放');
}
验收
- 调用后右下角出现小狗，尾巴明显左右摆。
- 动画期间仍能点击页面其它按钮。
- 超时后节点消失，无残留遮罩。
