当前位置：首页 > VUE

vue实现悬浮字体

2026-01-15 02:45:44VUE

实现悬浮字体的方法

在Vue中实现悬浮字体效果，可以通过CSS的position和transform属性结合Vue的响应式数据来实现动态效果。以下是几种常见方法：

使用CSS动画实现基础悬浮效果

<template>
  <div class="floating-text">悬浮文字</div>
</template>

<style>
.floating-text {
  animation: float 3s ease-in-out infinite;
  font-size: 24px;
  color: #42b983;
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}
</style>

结合鼠标事件实现交互式悬浮

<template>
  <div 
    class="hover-text"
    @mouseenter="isHovering = true"
    @mouseleave="isHovering = false"
    :style="hoverStyle"
  >
    悬停时浮动的文字
  </div>
</template>

<script>
export default {
  data() {
    return {
      isHovering: false
    }
  },
  computed: {
    hoverStyle() {
      return {
        transform: this.isHovering ? 'translateY(-5px)' : 'none',
        transition: 'transform 0.3s ease'
      }
    }
  }
}
</script>

使用第三方动画库（如Animate.css）

<template>
  <div class="animated infinite bounce">弹跳文字效果</div>
</template>

<script>
import 'animate.css'
</script>

实现跟随鼠标的悬浮文字

<template>
  <div 
    class="follow-text"
    :style="{ left: mouseX + 'px', top: mouseY + 'px' }"
    @mousemove="updatePosition"
  >
    跟随鼠标的文字
  </div>
</template>

<script>
export default {
  data() {
    return {
      mouseX: 0,
      mouseY: 0
    }
  },
  methods: {
    updatePosition(e) {
      this.mouseX = e.clientX + 10
      this.mouseY = e.clientY + 10
    }
  }
}
</script>

<style>
.follow-text {
  position: absolute;
  pointer-events: none;
  z-index: 9999;
}
</style>