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

vue 文字跑马灯

<template><div class="marquee-container"><div class="marquee-content"><div>{{ marqueeText }}</div><div>{{ marqueeText }}</div> <!-- 复制一份文本,用于无缝衔接 --></div></div>
</template>
<style>
@keyframes marquee {0% {transform: translateX(0);}100% {transform: translateX(-50%); /* 移动到一半的位置 */}
}.marquee-container {width: 100%;overflow: hidden;
}.marquee-content {white-space: nowrap;display: inline-block;animation: marquee 20s linear infinite;
}
</style>

在这个示例中,我们复制了一份文本,并将其放在原始文本的后面,以实现无缝衔接的效果。使用animation: marquee 20s linear infinite;,从而实现20s匀速循环滚动。

相关文章:

vue 文字跑马灯

<template><div class"marquee-container"><div class"marquee-content"><div>{{ marqueeText }}</div><div>{{ marqueeText }}</div> <!-- 复制一份文本&#xff0c;用于无缝衔接 --></div></d…...

开源ChatGPT系统源码 采用NUXT3+Laravel9后端开发 前后端分离版本

开源ChatGPT系统源码 采用NUXT3Laravel9后端开发 前后端分离版本 ChatGPT是一种基于AI的聊天机器人技术&#xff0c;它可以帮助用户与聊天机器人进行自然语言交流&#xff0c;以解决用户的问题或满足用户的需求。ChatGPT的核心技术是使用自然语言处理&#xff08;NLP&#xff…...

【LeetCode|数据结构】剑指 Offer 33. 二叉搜索树的后序遍历序列

题目链接 剑指 Offer 33. 二叉搜索树的后序遍历序列 标签 二叉搜索树、后序遍历 步骤 二叉搜索树的左子树的节点值 ≤ \le ≤根节点值 ≤ \le ≤右子树的节点值&#xff1b;对于后序遍历序列最后一个元素的值为根节点的值&#xff1b; 由上面的两个性质可以得出&#xff…...

自定义协程

难点 自己写了一遍协程&#xff0c;困难的地方在于unity中的执行顺序突然发现unity里面可以 yield return 的其实有很多 WaitForSeconds WaitForSecondsRealtime WaitForEndOfFrame WaitForFixedUpdate WaitUntil WaitWhile IEnumerator&#xff08;可以用于协程嵌套&#xf…...

【Atcoder】 [ABC240Ex] Sequence of Substrings

题目链接 Atcoder方向 Luogu方向 题目解法 先考虑一个性质&#xff0c;选出的子串长度不会超过 2 n \sqrt {2n} 2n ​ 考虑最劣的选法是选出长度为 1 , 2 , 3 , . . . 1,2,3,... 1,2,3,... 的子串&#xff08;如果后一个选出的串比前一个子串长度大超过1&#xff0c;那么后…...

真机二阶段之堆叠技术

堆叠技术 --- 可以将多台真实的物理设备逻辑上抽象成一台 思科 -- VPC 华为 -- iStack和CSS 华三 -- IRF 锐捷 -- VSU iStack和CSS的区别&#xff1a; CSS --- 集群 --- 它仅支持将两台支持集群的交换机逻辑上整合成一台设备。 iStack --- 堆叠 --- 可以将多台支持堆叠的交换…...

简单、快速、无需注册的在线 MockJs 工具

简单、快速、无需注册的 MockJs 工具。通过参数来返回数据&#xff0c;传入什么参数就返回什么数据。 使用 接口只支持返回文本类数据&#xff0c;不支持图片、流数据等。 json 调用接口 https://mock.starxg.com/?responseBody{“say”:“hello”}&contentTypeapplic…...

【Linux取经路】探索进程状态之僵尸进程 | 孤儿进程

文章目录 一、进程状态概述1.1 运行状态详解1.2 阻塞状态详解1.3 挂起状态详解 二、具体的Linux操作系统中的进程状态2.1 Linux内核源代码2.2 查看进程状态2.3 D磁盘休眠状态(Disk sleep)2.4 T停止状态(stopped) 三、僵尸进程3.1 僵尸进程危害总结 四、孤儿进程五、结语 一、进…...

第十二章MyBatis动态SQL

if标签与where标签 if标签 test如果为true就会拼接查询条件&#xff0c;否则不会 当没有使用Param&#xff0c;test出现arg0/param1当使用Param&#xff0c;test为Param指定的值当使用Pojo&#xff0c;test为对象的属性名 select * from car where <if test"name!n…...

redis--发布订阅

redis的发布和订阅 在Redis中&#xff0c;发布-订阅&#xff08;Publish-Subscribe&#xff0c;简称Pub/Sub&#xff09;是一种消息传递模式&#xff0c;用于在不同的客户端之间传递消息&#xff0c;允许一个消息发布者将消息发送给多个订阅者。这种模式适用于解耦消息发送者和…...

链表2-两两交换链表中的节点删除链表的倒数第N个节点链表相交环形链表II

今天记录的题目&#xff1a; ● 24. 两两交换链表中的节点 ● 19.删除链表的倒数第N个节点 ● 面试题 02.07. 链表相交 ● 142.环形链表II 两两交换链表中的节点 题目链接&#xff1a;24. 两两交换链表中的节点 这题比较简单&#xff0c;记录好两个节点&#xff0c;交换其nex…...

数据结构之并查集

并查集 1. 并查集原理2. 并查集实现3. 并查集应用3.1 省份数量3.2 等式方程的可满足性 4. 并查集的优缺点及时间复杂度 1. 并查集原理 并查表原理是一种树型的数据结构&#xff0c;用于处理一些不相交集合的合并及查询问题。并查集的思想是用一个数组表示了整片森林&#xff0…...

[element-ui] el-date-picker a-range-picker type=“daterange“ rules 校验

项目场景&#xff1a; 在项目中表单提交有时间区间校验 问题描述 想当然的就和其他单个输入框字符串校验&#xff0c;导致提交保存的时候 &#xff0c;初次日期未选择&#xff0c;规则提示。后续在同一表单上继续提交时&#xff0c;校验失效。走进了死胡同&#xff0c;一直以…...

Dockers搭建个人网盘、私有仓库,Dockerfile制作Nginx、Lamp镜像

目录 1、使用mysql:5.6和 owncloud 镜像&#xff0c;构建一个个人网盘。 &#xff08;1&#xff09;下载mysql:5.6和owncloud镜像 &#xff08;2&#xff09;创建启动mysql:5.6和owncloud容器 &#xff08;3&#xff09;在浏览器中输入网盘服务器的IP地址&#xff0c;进行账…...

2023 CCPC 华为云计算挑战赛 hdu7401 流量监控(树形dp)

题目 流量监控 - HDU 7401 - Virtual Judge 简单来说&#xff0c;T(T<20)组样例&#xff0c;sumn不超过2e4 每次给定一棵n(n<2000)个点的树&#xff0c;两问&#xff1a; ①将n个点恰拆成n/2个pair(u,v)&#xff0c;要求一个点是另一个点的祖先&#xff0c;求方案数 …...

01.Django入门

1.创建项目 1.1基于终端创建Django项目 打开终端进入文件路径&#xff08;打算将项目放在哪个目录&#xff0c;就进入哪个目录&#xff09; E:\learning\python\Django 执行命令创建项目 F:\Anaconda3\envs\pythonWeb\Scripts\django-admin.exe&#xff08;Django-admin.exe所…...

亿赛通电子文档安全管理系统任意文件上传漏洞(2023-HW)

亿赛通电子文档安全管理系统任意文件上传漏洞 一、 产品简介二、 漏洞概述三、 影响范围四、 复现环境五、 漏洞复现小龙POC检测 免责声明&#xff1a;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果…...

docker限制容器日志大小

文章目录 业务场景问题排查彻底解决 业务场景 我们公司做交通相关业务&#xff0c;我们部门主要负责信控服务&#xff0c;卖信号机的硬件产品和配套的信控平台 由于有部分小项目&#xff0c;可能只有几十个路口&#xff0c;客户预算有限&#xff0c;只给我们老旧的Windows ser…...

底层驱动实现数码管显示温湿度数值功能

开发板&#xff1a;STM32MP157A 温湿度传感器&#xff1a;si7006 显示器&#xff08;数码管&#xff09;&#xff1a;m74hc595 遇到的问题&#xff1a;循环采集温湿度传感器数值&#xff0c;并将数值发送给数码管的时候两者存在竞态关系&#xff0c;导致数码管显示亮度很暗 …...

03架构管理之测试管理

专栏说明&#xff1a;针对于企业的架构管理岗位&#xff0c;分享架构管理岗位的职责&#xff0c;工作内容&#xff0c;指导架构师如何完成架构管理工作&#xff0c;完成架构师到架构管理者的转变。计划以10篇博客阐述清楚架构管理工作&#xff0c;专栏名称&#xff1a;架构管理…...

MPNet:旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

连锁超市冷库节能解决方案:如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...

使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强:基于微服务与容器化的解决方案

在大数据时代&#xff0c;海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构&#xff0c;在处理大规模数据抓取任务时展现出强大的能力。然而&#xff0c;随着业务规模的不断扩大和数据抓取需求的日益复杂&#xff0c;传统…...

pgsql:还原数据库后出现重复序列导致“more than one owned sequence found“报错问题的解决

问题&#xff1a; pgsql数据库通过备份数据库文件进行还原时&#xff0c;如果表中有自增序列&#xff0c;还原后可能会出现重复的序列&#xff0c;此时若向表中插入新行时会出现“more than one owned sequence found”的报错提示。 点击菜单“其它”-》“序列”&#xff0c;…...