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

Vue.js组件开发-实现字母向上浮动

使用Vue实现字母向上浮动的效果

实现步骤

  1. 创建Vue项目:使用Vue CLI来创建一个新的Vue项目。
  2. 定义组件结构:在组件的模板中,定义包含字母的元素。
  3. 添加样式:使用CSS动画来实现字母向上浮动的效果。
  4. 绑定动画类:在Vue组件中,为字母元素绑定动画类。

完整代码

<template><!-- 包裹字母的容器 --><div class="floating-letters-container"><!-- 遍历letters数组,为每个字母创建一个span元素 --><spanv-for="(letter, index) in letters":key="index":class="['floating-letter', `delay-${index % 5}`]">{{ letter }}</span></div>
</template><script>
export default {data() {return {// 要显示的字母字符串text: "Hello, World!",// 将字符串拆分为字母数组letters: [],};},mounted() {// 在组件挂载后,将字符串拆分为字母数组this.letters = this.text.split("");},
};
</script><style scoped>
/* 定义字母浮动的动画 */
@keyframes float-up {0% {/* 初始位置:透明度为0,向下偏移20px */opacity: 0;transform: translateY(20px);}100% {/* 最终位置:透明度为1,回到原始位置 */opacity: 1;transform: translateY(0);}
}/* 包裹字母的容器样式 */
.floating-letters-container {display: flex;justify-content: center;align-items: center;font-size: 36px;
}/* 每个字母的样式 */
.floating-letter {/* 应用浮动动画,持续时间为1秒,缓动函数为ease-out,播放一次 */animation: float-up 1s ease-out 1;/* 动画完成后保持最终状态 */animation-fill-mode: forwards;/* 初始透明度为0 */opacity: 0;margin: 0 5px;
}/* 定义不同的延迟时间,使字母依次浮动 */
.delay-0 {animation-delay: 0s;
}
.delay-1 {animation-delay: 0.1s;
}
.delay-2 {animation-delay: 0.2s;
}
.delay-3 {animation-delay: 0.3s;
}
.delay-4 {animation-delay: 0.4s;
}
</style>

代码注释

  • 模板部分

    • <div class="floating-letters-container">:包裹所有字母的容器,用于布局。
    • v-for="(letter, index) in letters":遍历letters数组,为每个字母创建一个<span>元素。
    • :class="['floating-letter', delay-${index % 5}]":为每个字母元素添加floating-letter类和不同的延迟类,以实现不同的动画延迟。
  • 脚本部分

    • data():定义组件的数据,包括textletters
    • mounted():在组件挂载后,将text字符串拆分为字母数组,并赋值给letters
  • 样式部分

    • @keyframes float-up:定义字母向上浮动的动画,从透明度为0、向下偏移20px到透明度为1、回到原始位置。
    • .floating-letters-container:设置包裹字母的容器的布局样式。
    • .floating-letter:为每个字母元素添加浮动动画,并设置初始透明度为0。
    • .delay-0.delay-4:定义不同的动画延迟时间,使字母依次浮动。

使用说明

  1. 创建Vue项目:使用命令创建一个新的项目:
npm install -g @vue/cli
vue create my-project
cd my-project
  1. 替换组件代码:将上述代码复制到src/components目录下的一个新的.vue文件中,例如FloatingLetters.vue
  2. 在主组件中使用:在src/App.vue中引入并使用FloatingLetters组件:
<template><div id="app"><FloatingLetters /></div>
</template><script>
import FloatingLetters from './components/FloatingLetters.vue';export default {components: {FloatingLetters,},
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>
  1. 运行项目:在终端中运行以下命令启动开发服务器:
npm run serve

打开浏览器,访问http://localhost:8080,查看到字母向上浮动的效果。

http://www.lryc.cn/news/531027.html

相关文章:

  • 自研有限元软件与ANSYS精度对比-Bar2D2Node二维杆单元模型-四连杆实例
  • 04树 + 堆 + 优先队列 + 图(D1_树(D11_伸展树))
  • c语言练习题【数据类型、递归、双向链表快速排序】
  • SliverAppBar的功能和用法
  • 五、定时器实现呼吸灯
  • Elasticsearch的索引生命周期管理
  • 【大模型理论篇】最近大火的DeepSeek-R1初探系列1
  • 【数据结构】(4) 线性表 List
  • 【C++ STL】vector容器详解:从入门到精通
  • OpenAI推出Deep Research带给我们怎样的启示
  • 洛谷[USACO08DEC] Patting Heads S
  • CSS 溢出内容处理:从基础到实战
  • Spring Boot项目如何使用MyBatis实现分页查询
  • 飞行汽车中的无刷外转子电机、人形机器人中的无框力矩电机技术解析与应用
  • FreeRTOS学习 --- 队列集
  • 【R语言】R语言安装包的相关操作
  • 15.[前端开发]Day15-HTML+CSS阶段练习(网易云音乐四)
  • 【基于SprintBoot+Mybatis+Mysql】电脑商城项目之用户登录
  • 测试方案和测试计划相同点和不同点
  • c++提取矩形区域图像的梯度并拟合直线
  • Unity Shader Graph 2D - 角色身体电流覆盖效果
  • 【LLM-agent】(task4)搜索引擎Agent
  • 携程Java开发面试题及参考答案 (200道-下)
  • GWO优化SVM回归预测matlab
  • QMK启用摇杆和鼠标按键功能
  • Unity实现按键设置功能代码
  • 基于物联网技术的实时数据流可视化研究(论文+源码)
  • list容器(详解)
  • Elasticsearch基本使用详解
  • 17.3.4 颜色矩阵