当前位置：首页 > VUE

vue实现扩散圆圈

2026-02-19 12:53:50VUE

Vue 实现扩散圆圈效果

扩散圆圈效果可以通过 CSS 动画结合 Vue 的动态样式绑定实现。以下是一个完整的实现方案：

vue实现扩散圆圈

基本实现思路

使用 Vue 的 v-for 动态生成多个圆圈元素
通过 CSS 动画控制圆圈的缩放和透明度变化
利用 Vue 的数据绑定控制动画参数

具体实现代码

<template>
  <div class="container">
    <div 
      v-for="(circle, index) in circles" 
      :key="index"
      class="ripple-circle"
      :style="{
        width: `${circle.size}px`,
        height: `${circle.size}px`,
        left: `${circle.x}px`,
        top: `${circle.y}px`,
        animationDelay: `${index * 0.3}s`
      }"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      circles: [],
      maxCircles: 5,
      currentIndex: 0
    }
  },
  methods: {
    addCircle(event) {
      if (this.circles.length >= this.maxCircles) {
        this.circles.shift()
      }

      this.circles.push({
        x: event.clientX - 25,
        y: event.clientY - 25,
        size: 50,
        active: true
      })
    }
  },
  mounted() {
    window.addEventListener('click', this.addCircle)
  },
  beforeDestroy() {
    window.removeEventListener('click', this.addCircle)
  }
}
</script>

<style>
.container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.ripple-circle {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(66, 165, 245, 0.6);
  transform: scale(0);
  animation: ripple 1.5s ease-out;
  pointer-events: none;
}

@keyframes ripple {
  to {
    transform: scale(3);
    opacity: 0;
  }
}
</style>

实现说明

创建 Vue 组件并设置初始数据，包括存储圆圈的数组、最大圆圈数量和当前索引
在模板中使用 v-for 循环渲染圆圈元素，通过动态样式绑定位置和大小
添加点击事件监听器，在点击位置生成新的圆圈
使用 CSS 关键帧动画实现扩散效果，圆圈从初始大小逐渐放大并淡出
限制同时显示的圆圈数量，避免性能问题

自定义选项

可以通过修改以下参数来自定义效果：

修改 maxCircles 控制同时显示的圆圈数量
调整 CSS 中的 animation-duration 改变动画速度
更改 background-color 调整圆圈颜色
修改 ripple 动画中的 scale 值控制最终扩散大小

优化版本（自动连续动画）

如果需要自动连续播放的扩散效果，可以使用以下修改：

// 在 mounted 中添加定时器
mounted() {
  this.interval = setInterval(() => {
    this.circles.push({
      x: Math.random() * window.innerWidth,
      y: Math.random() * window.innerHeight,
      size: 30 + Math.random() * 70,
      active: true
    })

    if (this.circles.length > this.maxCircles) {
      this.circles.shift()
    }
  }, 800)
},
beforeDestroy() {
  clearInterval(this.interval)
}