需求背景
在日常开发中会遇到有消息的需求 这时候就会伴有一个有消息时候出现红点 点内有未读消息数 并伴有放大缩小闪动的效果
实现过程
红点数量直接借助了arco里的组件 也可以自己去做一个
<a-badge
:count="useMessage.unreadNotifyCount.unreadCount || 0"
:max-count="99"
class="dot-animate"
/>
.dot-animate {
transform-origin: center center; //缩放位置
animation: blink 1.5s ease-in-out infinite; //，动画时长为1.5秒，使用ease-in-out的过渡效
果（即动画开始时加速，结束时减速），并且动画无限循环
}
@keyframes blink {
0%,
100% {
transform: scale(0.6);
}
50% {
transform: scale(1);
}
}
//动画开始时（0%）和结束时（100%）都会缩小到原始尺寸的0.6倍（通过transform: scale(0.6)实现），而在动画的中间点（50%）时，元素会恢复到原始尺寸（transform: scale(1)）。