Vue.js组件开发-实现字母向上浮动
使用Vue实现字母向上浮动的效果
实现步骤
- 创建Vue项目:使用Vue CLI来创建一个新的Vue项目。
- 定义组件结构:在组件的模板中,定义包含字母的元素。
- 添加样式:使用CSS动画来实现字母向上浮动的效果。
- 绑定动画类:在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()
:定义组件的数据,包括text
和letters
。mounted()
:在组件挂载后,将text
字符串拆分为字母数组,并赋值给letters
。
-
样式部分:
@keyframes float-up
:定义字母向上浮动的动画,从透明度为0、向下偏移20px到透明度为1、回到原始位置。.floating-letters-container
:设置包裹字母的容器的布局样式。.floating-letter
:为每个字母元素添加浮动动画,并设置初始透明度为0。.delay-0
到.delay-4
:定义不同的动画延迟时间,使字母依次浮动。
使用说明
- 创建Vue项目:使用命令创建一个新的项目:
npm install -g @vue/cli
vue create my-project
cd my-project
- 替换组件代码:将上述代码复制到
src/components
目录下的一个新的.vue
文件中,例如FloatingLetters.vue
。 - 在主组件中使用:在
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>
- 运行项目:在终端中运行以下命令启动开发服务器:
npm run serve
打开浏览器,访问http://localhost:8080
,查看到字母向上浮动的效果。
相关文章:
Vue.js组件开发-实现字母向上浮动
使用Vue实现字母向上浮动的效果 实现步骤 创建Vue项目:使用Vue CLI来创建一个新的Vue项目。定义组件结构:在组件的模板中,定义包含字母的元素。添加样式:使用CSS动画来实现字母向上浮动的效果。绑定动画类:在Vue组件…...
2025蓝桥杯JAVA编程题练习Day2
1.大衣构造字符串 问题描述 已知对于一个由小写字母构成的字符串,每次操作可以选择一个索引,将该索引处的字符用三个相同的字符副本替换。 现有一长度为 NN 的字符串 UU,请帮助大衣构造一个最小长度的字符串 SS,使得经过任意次…...
WPF进阶 | WPF 样式与模板:打造个性化用户界面的利器
WPF进阶 | WPF 样式与模板:打造个性化用户界面的利器 一、前言二、WPF 样式基础2.1 什么是样式2.2 样式的定义2.3 样式的应用 三、WPF 模板基础3.1 什么是模板3.2 控件模板3.3 数据模板 四、样式与模板的高级应用4.1 样式继承4.2 模板绑定4.3 资源字典 五、实际应用…...
趣味Python100例初学者练习01
1. 1 抓交通肇事犯 一辆卡车违反交通规则,撞人后逃跑。现场有三人目击该事件,但都没有记住车号,只记下了车号的一些特征。甲说:牌照的前两位数字是相同的;乙说:牌照的后两位数字是相同的,但与前…...
每日一题——有效括号序列
有效括号序列 题目描述数据范围:复杂度要求: 示例题解代码实现代码解析1. 定义栈和栈操作2. 栈的基本操作3. 主函数 isValid4. 返回值 时间和空间复杂度分析 题目描述 给出一个仅包含字符 (, ), {, }, [, ] 的字符串,判断该字符串是否是一个…...
MQTT 术语表
Broker 有时我们也会直接将服务端称为 Broker,这两个术语可以互换使用。 Clean Start 客户端可以在连接时使用这个字段来指示是期望从已存在的会话中恢复通信,还是创建一个全新的会话。仅限 MQTT v5.0。 Client 使用 MQTT 协议连接到服务端的设备或…...
每天学点小知识之设计模式的艺术-策略模式
行为型模式的名称、定义、学习难度和使用频率如下表所示: 1.如何理解模板方法模式 模板方法模式是结构最简单的行为型设计模式,在其结构中只存在父类与子类之间的继承关系。通过使用模板方法模式,可以将一些复杂流程的实现步骤封装在一系列基…...
ubuntuCUDA安装
系列文章目录 移动硬盘制作Ubuntu系统盘 前言 根据前篇“移动硬盘制作Ubuntu系统盘”安装系统后,还不能够使用显卡。 如果需要使用显卡,还需要进行相关驱动的安装(如使用的为Nvidia显卡,就需要安装相关的Nvidia显卡驱动ÿ…...
信息学奥赛一本通 2113:【24CSPJ普及组】小木棍(sticks) | 洛谷 P11229 [CSP-J 2024] 小木棍
【题目链接】 ybt 2113:【24CSPJ普及组】小木棍(sticks) 洛谷 P11229 [CSP-J 2024] 小木棍 【题目考点】 1. 思维题,找规律 【解题思路】 解法1:找规律 该题为:求n根木棍组成的无前导0的所有可能的数…...
【数据结构】(5) ArrayList 顺序表
一、使用 ArrayList ArrayList 就是数组的封装,但是数组只有 [] 操作存取值,和 .length 操作获取数组内存长度;而 ArrayList 有更多的功能: 1、创建对象 2、扩容机制 ArrayList 有自动扩容机制,在插入元素时不用担心数…...
Elasticsearch 指南 [8.17] | Search APIs
Search API 返回与请求中定义的查询匹配的搜索结果。 http GET /my-index-000001/_search Request GET /<target>/_search GET /_search POST /<target>/_search POST /_search Prerequisites 如果启用了 Elasticsearch 安全功能,针对目标数据流…...
【自开发工具介绍】SQLSERVER的ImpDp和ExpDp工具03
SQLSERVER的ImpDp和ExpDp工具 1、全部的表导出(仅表结构导出) 2、导出的表结构,导入到新的数据库 导入前,test3数据没有任何表 导入 导入结果确认:表都被做成,但是没有数据 3、全部的表导出&#x…...
JVM-运行时数据区
JVM的组成 运行时数据区-总览 Java虚拟机在运行Java程序过程中管理的内存区域,称之为运行时数据区。 《Java虚拟机规范》中规定了每一部分的作用 运行时数据区-应用场景 Java的内存分成哪几部分? Java内存中哪些部分会内存溢出? JDK7 和J…...
经典本地影音播放器MPC-BE.
经典本地影音播放器MPC-BE 链接:https://pan.xunlei.com/s/VOIAZbbIuBM1haFdMYCubsU-A1?pwd4iz3# MPC-BE(Media Player Classic Black Edition)是来自 MPC-HC(Media Player Classic Home Cinema)的俄罗斯开发者重新…...
求水仙花数,提取算好,打表法。或者暴力解出来。
暴力解法 #include<bits/stdc.h> using namespace std; int main() {int n,m;cin>>n>>m;if(n<3||n>7||m<0){cout<<"-1";return 0;}int powN[10];//记录0-9的n次方for(int i0;i<10;i){powN[i](int)pow(i,n);}int low(int) pow(1…...
后盾人JS -- 原型
没有原型的对象 也有没有原型的对象 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document<…...
Deepseek-R1 和 OpenAI o1 这样的推理模型普遍存在“思考不足”的问题
每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…...
Nginx 命令行参数
文章来源:命令行参数 -- nginx中文文档|nginx中文教程 nginx 支持以下命令行参数: -?| — 打印帮助 以获取命令行参数。-h-c file— 使用替代项 configuration 而不是 default 文件。file-e file— 使用替代项 error log 来存储日志 而不是默认文件 &…...
YOLOV11-1:YoloV11-安装和CLI方式训练模型
YoloV11-安装和CLI方式训练模型 1.安装和运行1.1安装的基础环境1.2安装yolo相关组件1.3命令行方式使用1.3.1 训练1.3.2 预测 本文介绍yoloV11的安装和命令行接口 1.安装和运行 1.1安装的基础环境 GPU环境,其中CUDA是12.4版本 1.2安装yolo相关组件 # 克隆github…...
Docker Hub 镜像 Pull 失败的解决方案
目录 引言一、问题二、原因三、解决方法四、参考文献 引言 在云原生技术火热的当下,Docker可谓是其基础,由于其简单以及方便性,让开发人员不必再为环境配置问题而伤脑筋,因为可将其看作一个虚拟机程序去理解。所以掌握好它可谓是…...
重新思考绩效管理变革
Peter Cappelli 和 Anna Tavis 在绩效管理变革一文中,为我们带来了很多关于绩效管理变革的思考。企业为什么做绩效管理变革,为什么现在需要?让我们看看这些学者是如何思考的。 摘要 受到老板和下属的痛恨,传统的绩效考核已经被超…...
内核定时器2-高分辨率定时器
高分辨率定时器与低分辨率定时器 高分辨率定时器与低分辨率定时器相比,有如下两个根本性的不同。 (1) 高分辨率定时器使用红黑树对定时器进行管理。 (2) 定时器独立于周期时钟。即不基于jiffies,精度可以达到纳秒级别。 内核2.6.16版本开始ÿ…...
【自开发工具介绍】SQLSERVER的ImpDp和ExpDp工具02
工具运行前的环境准备 1、登录用户管理员权限确认 工具使用的登录用户(-u后面的用户),必须具有管理员的权限,因为需要读取系统表 例:Export.bat -s 10.48.111.12 -d db1 -u test -p test -schema dbo 2、Powershell的安全策略确认…...
数据结构【单链表操作大全详解】【c语言版】(只有输入输出为了方便用的c++)
单链表操作的C/C实现详解 在数据结构中,单链表是一种非常基础且重要的数据结构。它由一系列节点组成,每个节点包含数据和指向下一个节点的指针。今天我们就来深入探讨用C/C实现的单链表及其各种操作。 一、单链表的定义 const int N 1e5; //单链表 t…...
【R语言】环境空间
一、环境空间种类 R语言中有5种环境: 全局环境:也叫用户环境,指在当前用户下R程序运行的环境空间。 内部环境:通过“new.env()”命令创建的环境空间,也可以是匿名的环境空间。 父环境:当前环境空间所处…...
Python处理数据库:MySQL与SQLite详解
Python处理数据库:MySQL与SQLite详解 在数据处理和存储方面,数据库扮演着至关重要的角色。Python提供了多种与数据库交互的方式,其中pymysql库用于连接和操作MySQL数据库,而SQLite则是一种轻量级的嵌入式数据库,Pytho…...
软考高项笔记 信息技术及其发展
信息技术及其发展 ❝ 信息系统项目管理师第二章第一节 1. 网络标准协议的定义 网络协议是为计算机网络中进行数据交换而建立的规则、标准或约定的集合。网络协议由三个要素组成,分别是语义、语法和时序。 语义:解释控制信息每个部分的含义,它…...
HAO的Graham学习笔记
前置知识:凸包 摘录oiwiki 在平面上能包含所有给定点的最小凸多边形叫做凸包。 其定义为:对于给定集合 X,所有包含 X 的凸集的交集 S 被称为 X 的 凸包。 说人话就是用一个橡皮筋包含住所有给定点的形态 如图: 正题:…...
C#基础知识
0 C#介绍 定义与背景 C#(发音为C - sharp)是微软公司开发的一种高级编程语言。它是专门为构建在微软的.NET平台上运行的各种应用程序而设计的。在2000年左右推出,目的是结合当时编程语言的优点,如C的强大功能和Java的简单性与安全…...
Kafka中文文档
文章来源:https://kafka.cadn.net.cn 什么是事件流式处理? 事件流是人体中枢神经系统的数字等价物。它是 为“永远在线”的世界奠定技术基础,在这个世界里,企业越来越多地使用软件定义 和 automated,而软件的用户更…...
Tyrant(暴君):反向Shell-后门注入与持久化控制的渗透测试工具
Tyrant Tyrant 是一款用于渗透测试和远程控制持久化的恶意工具,具备以下功能: 反向Shell:允许攻击者通过指定用户UID进行反弹对应权限的Shell会话。后门注入与持久化:在目标系统中注入后门并确保即使重启后依然能恢复控制。Tyran…...
leetcode刷题-贪心04
代码随想录贪心算法part04|452. 用最少数量的箭引爆气球、435. 无重叠区间、763.划分字母区间 452. 用最少数量的箭引爆气球435. 无重叠区间763.划分字母区间 今天的三道题目,都算是 重叠区间 问题,大家可以好好感受一下。 都属于那种看起来好复杂&#…...
系统学习算法: 专题八 二叉树中的深搜
深搜其实就是深度优先遍历(dfs),与此相对的还有宽度优先遍历(bfs) 如果学完数据结构有点忘记,如下图,左边是dfs,右边是bfs 而二叉树的前序,中序,后序遍历都可…...
2022年全国职业院校技能大赛网络系统管理赛项模块A:网络构建(样题2)-网络部分解析-附详细代码
目录 附录1:拓扑图编辑 附录2:地址规划表 1.SW1 2.SW2 3.SW3 4.SW4 5.SW5 6.SW6 7.SW7 8.R1 9.R2 10.R3 11.AC1 12.AC2 13.EG1 14.EG2 15.AP2 16.AP3 附录1:拓扑图 附录2:地址规划表...
笔试-业务逻辑4
应用 小明在玩一个数字加减游戏,输入4个正整数:s、t、a、b,其中s>1,b<105,a!b。只使用加法或者减法,使得st。 每回合,小明用当前的数字,加上或减去一个数字;目前有…...
冷启动+强化学习:DeepSeek-R1 的原理详解——无需监督数据的推理能力进化之路
本文基于 DeepSeek 官方论文进行分析,论文地址为:https://github.com/deepseek-ai/DeepSeek-R1/blob/main/DeepSeek_R1.pdf 有不足之处欢迎评论区交流 原文翻译 在阅读和理解一篇复杂的技术论文时,逐字翻译是一个重要的步骤。它不仅能帮助我们准确把握作者的原意,还能为后续…...
ubuntu22安装issac gym记录
整体参考:https://blog.csdn.net/Yakusha/article/details/144306858 安装完成后的整体版本信息 ubuntu:22.04内核:6.8.0-51-generic显卡:NVIDIA GeForce RTX 3050 OEM显卡驱动:535.216.03cuda:12.2cudnn&…...
Docker小游戏 | 使用Docker部署2048网页小游戏
Docker小游戏 | 使用Docker部署2048网页小游戏 前言项目介绍项目简介项目预览二、系统要求环境要求环境检查Docker版本检查检查操作系统版本三、部署2048网页小游戏下载镜像创建容器检查容器状态检查服务端口安全设置四、访问2048网页小游戏五、总结前言 在当今快速发展的技术世…...
C基础寒假练习(2)
一、输出3-100以内的完美数,(完美数:因子和(因子不包含自身)数本身 #include <stdio.h>// 函数声明 int isPerfectNumber(int num);int main() {printf("3-100以内的完美数有:\n");for (int i 3; i < 100; i){if (isPerfectNumber…...
传输层协议 UDP 与 TCP
🌈 个人主页:Zfox_ 🔥 系列专栏:Linux 目录 一:🔥 前置复盘🦋 传输层🦋 再谈端口号🦋 端口号范围划分🦋 认识知名端口号 (Well-Know Port Number) 二…...
Vue06
目录 一、声明式导航-导航链接 1.需求 2.解决方案 3.通过router-link自带的两个样式进行高亮 二、声明式导航的两个类名 1.router-link-active 2.router-link-exact-active 三、声明式导航-自定义类名(了解) 1.问题 2.解决方案 3.代码演示 四…...
AJAX笔记进阶篇
黑马程序员视频地址: AJAX-Day04-01.同步代码和异步代码https://www.bilibili.com/video/BV1MN411y7pw?vd_source0a2d366696f87e241adc64419bf12cab&spm_id_from333.788.videopod.episodes&p47 同步代码和异步代码 回调函数地狱与解决方法 回调函数地狱…...
Linux+Docer 容器化部署之 Shell 语法入门篇 【Shell 循环类型】
文章目录 一、Shell 循环类型二、Shell while 循环三、Shell for 循环四、Shell until 循环五、Shell select 循环六、总结 一、Shell 循环类型 循环是一个强大的编程工具,使您能够重复执行一组命令。在本教程中,您将学习以下类型的循环 Shell 程序&…...
【Redis】安装配置Redis超详细教程 / Linux版
Linux安装配置Redis超详细教程 安装redis依赖安装redis启动redis停止redisredis.conf常见配置设置redis为后台启动修改redis监听地址设置工作目录修改密码监听的端口号数据库数量设置redis最大内存设置日志文件设置redis开机自动启动 学习视频:黑马程序员Redis入门到…...
S4 HANA明确税金汇差科目(OBYY)
本文主要介绍在S4 HANA OP中明确税金汇差科目(OBYY)相关设置。具体请参照如下内容: 1. 明确税金汇差科目(OBYY) 以上配置点定义了在外币挂账时,当凭证抬头汇率和税金行项目汇率不一致时,造成的差异金额进入哪个科目。此类情况只发生在FB60/F…...
Nginx反向代理 笔记250203
Nginx反向代理 Nginx 是一个高性能的 HTTP 服务器和反向代理服务器。反向代理是指客户端请求资源时,Nginx 作为中间层,将请求转发到后端服务器,并将后端服务器的响应返回给客户端。通过反向代理,可以实现负载均衡、缓存、SSL 终端…...
【ChatGPT:开启人工智能新纪元】
一、ChatGPT 是什么 最近,ChatGPT 可是火得一塌糊涂,不管是在科技圈、媒体界,还是咱们普通人的日常聊天里,都能听到它的大名。好多人都在讨论,这 ChatGPT 到底是个啥 “神器”,能让大家这么着迷?今天咱就好好唠唠。 ChatGPT,全称是 Chat Generative Pre-trained Trans…...
OpenAI 实战进阶教程 - 第六节: OpenAI 与爬虫集成实现任务自动化
爬虫与 OpenAI 模型结合,不仅能高效地抓取并分析海量数据,还能通过 NLP 技术生成洞察、摘要,极大提高业务效率。以下是一些实际工作中具有较高价值的应用案例: 1. 电商价格监控与智能分析 应用场景: 电商企业需要监控…...
49【服务器介绍】
服务器和你的电脑可以说是一模一样的,只不过用途不一样,叫法就不一样了 物理服务器和云服务器的区别 整台设备眼睛能够看得到的,我们一般称之为物理服务器。所以物理服务器是比较贵的,不是每一个开发者都能够消费得起的。 …...
docker pull Error response from daemon问题
里面填写 里面解决方案就是挂代理。 以虚拟机为例,将宿主机配置端口设置,https/http端口设为7899 配置虚拟机的http代理: vim /etc/systemd/system/docker.service.d/http-proxy.conf里面填写,wq保存 [Service] Environment…...