vue实现悬浮字体

Vue 实现悬浮字体效果

在 Vue 中实现悬浮字体效果可以通过 CSS 的 hover 伪类结合 Vue 的动态样式绑定来实现。以下是几种常见方法：

使用纯 CSS 实现

<template>
  <div class="hover-text">悬停查看效果</div>
</template>

<style scoped>
.hover-text {
  transition: all 0.3s ease;
}
.hover-text:hover {
  transform: scale(1.1);
  color: #42b983;
}
</style>

使用 Vue 动态样式绑定

<template>
  <div 
    :class="{ 'active': isHovering }"
    @mouseover="isHovering = true"
    @mouseleave="isHovering = false"
  >
    悬停文字
  </div>
</template>

<script>
export default {
  data() {
    return {
      isHovering: false
    }
  }
}
</script>

<style scoped>
.active {
  transform: translateY(-5px);
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
</style>

添加动画效果

<template>
  <div class="animated-text">悬停动画</div>
</template>

<style scoped>
.animated-text {
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.animated-text:hover {
  transform: translateY(-10px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.1);
}
</style>

实现浮动阴影效果

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

<style scoped>
.floating-text {
  position: relative;
  transition: all 0.3s ease;
}
.floating-text:hover {
  transform: translateY(-3px);
}
.floating-text::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 5px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.floating-text:hover::after {
  opacity: 1;
}
</style>

使用第三方动画库

安装 animate.css：

npm install animate.css

在 Vue 中使用：

<template>
  <div 
    class="animated-text"
    @mouseover="addAnimation"
    @mouseleave="removeAnimation"
  >
    悬停动画
  </div>
</template>

<script>
import 'animate.css'
export default {
  methods: {
    addAnimation(e) {
      e.target.classList.add('animate__animated', 'animate__pulse')
    },
    removeAnimation(e) {
      e.target.classList.remove('animate__animated', 'animate__pulse')
    }
  }
}
</script>

这些方法可以根据实际需求进行调整，组合不同的 CSS 属性可以实现更丰富的悬浮效果。