缩放动画，让一排的圆形点依次放大缩小，看起来像是在循环移动

<template>
  <div class="ani-row">
    <div v-for="n in 3" :key="n" class="dot" :style="{ animationDelay: n * 0.2 + 's' }"></div>
  </div>
</template>

<script>
export default {
  name: 'animation',
};
</script>

<style scoped>
.dot-row {
  display: flex;
  justify-content: space-between;
  width: 200px; /* 根据你的需要调整宽度 */
}

.dot {
  width: 30px; /* 圆形点的大小 */
  height: 30px; /* 圆形点的大小 */
  background-color: red; /* 你可以根据需要设置为图片背景或颜色 */
  border-radius: 50%; /* 使其成为圆形 */
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

/* 为每个点设置不同的动画延迟，以创建依次动画的效果 */
.dot:nth-child(1) {
  animation-delay: 0s;
}
.dot:nth-child(2) {
  animation-delay: 0.2s;
}
.dot:nth-child(3) {
  animation-delay: 0.4s;
}
.dot:nth-child(4) {
  animation-delay: 0.6s;
}
.dot:nth-child(5) {
  animation-delay: 0.8s;
}
</style>

在这个例子中：

• 我们使用 .ani-row 来创建一个包含多个点的行。
• 使用 v-for 指令来循环创建5个点。
• 为每个点应用了 @keyframes pulse 动画，该动画让点在缩放大小之间变化，从而产生放大缩小的效果。
• 通过为每个点设置不同的 animation-delay，我们创建了一个依次动画的效果。

如果你想要使用图片而不是颜色作为点的背景，可以在 .dot 类中替换 background-color 属性为 background-image 并设置 url('path-to-your-image.png')。

请注意，上面的代码中点的数量和动画延迟是固定的，你可以根据需要调整点的数量和延迟时间来创建你的循环动画效果。