用CSS动画+JavaScript实现点赞飘浮效果：动态创建绝对定位的“+1”元素，应用floatUp动画（透明度渐隐+上移40px），动画结束自动移除，并同步更新原数字。
直接用 CSS 动画 + JavaScript 控制即可，关键在于动态创建元素、设置初始状态、触发动画，并在动画结束后自动移除。
1. 创建飘浮数字元素
点赞时，不修改原数字，而是克隆一个新 <span>，设为绝对定位，位置与原数字重合：
- 获取原数字元素的
getBoundingClientRect()，计算屏幕坐标 - 用
document.createElement('span')创建新元素，内容为"+1" - 设
position: fixed（或absolute，需父容器相对定位），left/top对齐原位置 - 添加临时 class（如
like-float）用于绑定动画
2. 定义 CSS 动画（透明度 + 上移 + 缓动）
用 @keyframes 描述从「完全不透明、原位」到「完全透明、上移 40px」的过程：
.like-float {
position: fixed;
pointer-events: none;
font-size: 14px;
font-weight: bold;
color: #ff6b6b;
z-index: 10;
animation: floatUp 0.6s ease-out forwards;
}
@keyframes floatUp {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-40px);
}
}
注意：forwards 保证动画停在终点状态；ease-out 让上升有“轻飘”感。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
3. 动画结束自动清理 DOM
避免内存堆积，监听 animationend 事件，在动画完成时移除该元素：
- 给飘浮元素绑定
element.addEventListener('animationend', () => element.remove()) - 建议加个简单判断：只响应
floatUp动画，避免误触发（e.animationName === 'floatUp'）
4. 同步更新原数字（可选但推荐）
飘浮动画是视觉反馈，真实计数仍需更新原 DOM：
- 先执行
currentCount++ - 再更新原元素文本：
originEl.textContent = currentCount - 若需数字变化过渡（如缓动数字增长），可用
requestAnimationFrame逐帧更新，但点赞场景通常直接跳变更自然
整个过程不依赖第三方库，兼容主流移动端 H5 浏览器。动画参数（时长、位移量、颜色）可根据品牌风格灵活调整。
