当前位置：首页 > VUE

vue实现扩散圆

2026-03-08 09:51:44VUE

Vue 实现扩散圆效果

在 Vue 中实现扩散圆效果可以通过 CSS 动画和 Vue 的动态样式绑定结合完成。以下是两种常见实现方式：

纯 CSS 动画实现

通过 @keyframes 定义缩放动画，应用于圆形元素：

<template>
  <div class="circle-container">
    <div class="pulse-circle"></div>
  </div>
</template>

<style>
.circle-container {
  position: relative;
  width: 100px;
  height: 100px;
}

.pulse-circle {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(0, 150, 255, 0.6);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
  }
  70% {
    transform: scale(1.3);
    opacity: 0.3;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}
</style>

Vue 动态渲染多圆扩散

通过 Vue 的 v-for 动态生成多个同心圆，实现更复杂的波纹效果：

<template>
  <div class="ripple-container" @click="addRipple">
    <div 
      v-for="(ripple, index) in ripples" 
      :key="index"
      class="ripple-circle"
      :style="{
        width: ripple.size + 'px',
        height: ripple.size + 'px',
        left: ripple.x + 'px',
        top: ripple.y + 'px',
        opacity: ripple.opacity
      }"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ripples: []
    }
  },
  methods: {
    addRipple(e) {
      const rect = e.target.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;

      this.ripples.push({
        x: x - 25,
        y: y - 25,
        size: 50,
        opacity: 1
      });

      setTimeout(() => {
        this.ripples.shift();
      }, 1000);
    }
  }
}
</script>

<style>
.ripple-container {
  position: relative;
  width: 300px;
  height: 200px;
  background: #f0f0f0;
  overflow: hidden;
}

.ripple-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(0, 150, 255, 0.6);
  transform: translate(-50%, -50%);
  animation: ripple-effect 1s linear;
}

@keyframes ripple-effect {
  to {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
  }
}
</style>

使用第三方库

对于更复杂的效果，可以考虑使用专门动画库：

安装动画库：
```
npm install animejs
```

Vue 组件实现：


<template>
<div ref="circle" class="animated-circle"></div>
</template>

import anime from 'animejs';

export default { mounted() { anime({ targets: this.$refs.circle, scale: [1, 3], opacity: [0.8, 0], duration: 1500, easing: 'easeOutQuad', loop: true }); } }

vue实现扩散圆