vue中使用transform做一个呼吸提示点（基础型）

需求背景

在日常开发中会遇到有消息的需求  这时候就会伴有一个有消息时候出现红点  点内有未读消息数 并伴有放大缩小闪动的效果

实现过程

红点数量直接借助了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)）。