一个前端vue3文字hover效果

效果

组件代码

<template>
  <span class="word-text" :style="[
    { transitionDuration: `${props.speed}ms` }
  ]">
    <slot></slot>
  </span>
</template>
  
<script setup>
const props = defineProps({
  // 动画速率 单位ms
  speed: {
    type: Number,
    default: 1000
  }
});
</script>
  
<style scoped>
.word-text {
  color: #ccc;
  background: linear-gradient(to right, #000, #000) no-repeat right bottom;
  background-size: 0% 2px;
  transition: background-size;
}
.word-text:hover {
  background-position-x: left;
  background-size: 100% 2px;
}
</style>

使用

<template>
  <WordLine>你好我是文字啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</WordLine>
</template>
  
<script setup>
import WordLine from "./WordLine.vue";
</script>