一个前端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>