当前位置: 首页 > 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
  • ecshop做企业网站/百度网址大全首页链接
  • 培训型网站 建设方案/如何建立自己的网页
  • 怎么做hs网站/南宁网络推广外包
  • 新手学做网站pdf下载/查找网站
  • 怎么建设自己网站(儿童)步骤/青岛网站建设方案
  • 营销型公司网站有哪些/推广产品