当前位置: 首页 > news >正文

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

相关文章:

  • IO多路复用
  • 模型 - QwQ-32B
  • VSCode输入npm xxx,跳转到选择应用
  • 双向选择排序算法
  • qt作业day5
  • 进程相关知识day1
  • 【经验分享】Ubuntu20.04编译RK3568 AI模型报错问题(已解决)
  • 时间序列预测实操
  • better-sqlite3之exec方法
  • hom_mat2d_to_affine_par 的c#实现
  • django中序列化器serializer 的高级使用和需要注意的点
  • Unity中Stack<T>用法以及删除Stack<GameObject>的方法
  • WordPress开发到底是开发什么?
  • 在 Aspire 项目下使用 AgileConfig
  • Python学习第十天
  • 数据库复习(第五版)- 第六章 关系数据理论
  • 阿里云MaxCompute面试题汇总及参考答案
  • Electron-Forge + Vue3 项目初始化
  • 010---基于Verilog HDL的分频器设计
  • 二阶RC+PWM实现DDS
  • 资阳视频网站建设/什么是互联网推广
  • 广州建设网站技术/网络营销有哪些形式
  • 哪家企业网站做的好/百度账号中心
  • 网站模板怎样使用/黑马培训
  • 怎么做好网站运营/顺德搜索seo网络推广
  • 仙侠类网页游戏排行榜/seo的实现方式