当前位置：首页 > VUE

vue实现气泡

2026-01-13 06:56:26VUE

实现气泡效果的方法

在Vue中实现气泡效果可以通过CSS动画结合组件动态渲染完成。以下是两种常见实现方式：

使用CSS动画和动态组件

创建一个气泡组件，通过CSS定义上升动画效果，动态控制气泡生成和消失：

<template>
  <div class="bubble-container">
    <div 
      v-for="(bubble, index) in bubbles" 
      :key="index"
      class="bubble"
      :style="{
        left: bubble.left + 'px',
        width: bubble.size + 'px',
        height: bubble.size + 'px',
        animationDuration: bubble.duration + 's'
      }"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bubbles: []
    }
  },
  methods: {
    createBubble() {
      const newBubble = {
        left: Math.random() * window.innerWidth,
        size: Math.random() * 30 + 10,
        duration: Math.random() * 5 + 3
      }
      this.bubbles.push(newBubble)

      setTimeout(() => {
        this.bubbles.shift()
      }, newBubble.duration * 1000)
    }
  },
  mounted() {
    setInterval(this.createBubble, 800)
  }
}
</script>

<style>
.bubble-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.bubble {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  animation: rise linear infinite;
}

@keyframes rise {
  to {
    transform: translateY(-100vh);
    opacity: 0;
  }
}
</style>

使用第三方库

通过vue-typed-js等库实现更复杂的气泡效果：

npm install vue-typed-js

<template>
  <div class="bubble-effect">
    <vue-typed-js 
      :strings="['']" 
      :loop="true" 
      @onComplete="spawnBubble">
      <span class="typing"></span>
    </vue-typed-js>
  </div>
</template>

<script>
import { VueTypedJs } from 'vue-typed-js'

export default {
  components: {
    VueTypedJs
  },
  methods: {
    spawnBubble() {
      const bubble = document.createElement('div')
      bubble.className = 'floating-bubble'
      bubble.style.left = `${Math.random() * 100}%`
      bubble.style.width = `${Math.random() * 40 + 10}px`
      bubble.style.height = bubble.style.width
      bubble.style.animationDuration = `${Math.random() * 6 + 3}s`
      this.$el.appendChild(bubble)

      setTimeout(() => {
        bubble.remove()
      }, 9000)
    }
  }
}
</script>

<style>
.floating-bubble {
  position: absolute;
  bottom: 0;
  background: radial-gradient(circle, white, transparent 70%);
  border-radius: 50%;
  animation: float-up linear forwards;
  opacity: 0.7;
}

@keyframes float-up {
  to {
    transform: translateY(-100vh);
    opacity: 0;
  }
}
</style>

气泡样式优化技巧

调整CSS属性可获得不同视觉效果：

增加box-shadow: 0 0 10px rgba(255,255,255,0.8)增强立体感
使用background: radial-gradient(circle, #4facfe 0%, #00f2fe 100%)实现渐变色彩
添加filter: blur(1px)制造柔和边缘效果

交互式气泡实现

结合鼠标事件创建交互效果：

<template>
  <div 
    class="interactive-bubbles"
    @mousemove="createInteractiveBubble"
  >
    <div 
      v-for="(bubble, index) in interactiveBubbles"
      :key="index"
      class="interactive-bubble"
      :style="bubble.style"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      interactiveBubbles: []
    }
  },
  methods: {
    createInteractiveBubble(event) {
      const bubble = {
        style: {
          left: `${event.clientX}px`,
          top: `${event.clientY}px`,
          width: `${Math.random() * 40 + 10}px`,
          height: `${Math.random() * 40 + 10}px`,
          animationDuration: `${Math.random() * 3 + 2}s`
        }
      }
      this.interactiveBubbles.push(bubble)

      setTimeout(() => {
        this.interactiveBubbles = this.interactiveBubbles.filter(b => b !== bubble)
      }, 3000)
    }
  }
}
</script>

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

.interactive-bubble {
  position: absolute;
  background-color: rgba(100, 200, 255, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: float-and-fade linear forwards;
  pointer-events: none;
}

@keyframes float-and-fade {
  to {
    transform: translate(-50%, -200px);
    opacity: 0;
  }
}
</style>

以上方法可根据具体需求调整参数，如气泡大小、速度、透明度等，实现多样化的气泡效果。

vue实现气泡