无需登录 数据私有 本地保存

动态通知徽章生成器 - 数字抖动/红点特效

11
0
0
0
⚡ 徽章配置
徽章类型
快速预设
3
🔔 抖动通知
🔴 脉动红点
5
💬 新消息
2
🛒 促销提醒
动画效果
动画速度 — 正常 (0.6s)
徽章颜色
徽章数字
支持数字、文字，如 3、99+、新、HOT
徽章大小 — 标准 (26px)
关闭后动画仅播放1次
👁️ 实时预览 点击图标重播动画
3 模拟通知场景 — 铃铛图标
5
邮件场景
2
购物车场景
7
消息场景
📋 生成代码
正在生成代码...

❓ 常见问题与知识点

使用CSS transform 和 opacity 实现的动画由GPU加速，不会触发重排（reflow），对性能影响极小。建议避免使用 width/height/top/left 等会触发重排的属性做动画。本工具生成的所有动画均使用 transform，性能友好。

将生成的CSS复制到全局样式文件或组件样式块中，HTML部分直接放入组件模板即可。对于动态数字，使用框架的数据绑定替换静态数字。例如Vue中使用 {{ count }}，React中使用 {count}。

红点徽章（无数字）适合表示"有新内容但不需要具体数量"的场景，如系统通知、新功能提示、未读状态等，配合脉动动画效果极佳。数字徽章适合需要展示具体数量的场景，如未读消息数、购物车商品数、待处理任务数等，抖动动画能有效吸引注意。

持续循环动画适合需要长期吸引注意力的场景，如红点脉动提示。单次播放适合状态变化时的瞬时反馈，如新消息到达时数字抖动一次。过度使用循环动画可能引起用户反感，请根据实际场景合理选择。建议数字变化时触发1-2次抖动，红点可考虑持续脉动。

为徽章添加 aria-label 属性，例如 aria-label="3条未读通知"。对于红点，使用 aria-label="有新消息"。同时可以添加 role="status" 或 role="alert" 让屏幕阅读器优先播报。动画方面，使用 prefers-reduced-motion 媒体查询为偏好减少动效的用户关闭动画。

使用 transform 的动画不会影响CLS，因为transform不改变元素在文档流中的布局位置。但需要注意：徽章使用绝对定位（absolute）放置在图标容器内，容器需设置 position: relative 并预留足够空间，避免徽章溢出被裁剪或触发意外滚动。
🔧 相关工具