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

css3实现无缝滚动,鼠标经过暂停

js也可以实现,但css3更加的平滑和资源占用更少。下面是具体代码,动画要单独用一个类名,否则暂停估计不会生效:

原理:动画向上移动,目标完全消失后,从头开始,注意 动画移动高度是文本高度,这个不好控制要微调,如果文本是动态的则要把动画通过js生成动态设置移动高度。js实现是获取消失的部分,添加到尾部,周而复始,平滑度很难控制

<div class="list"><div class="rowup anim"><div class="text"><div>1111111111111111111111111111111111111111111111:</div><div>11111111111111111111111111111111111</div><div>222222222222222222222222222222222。</div></div><div class="text"><div>1111111111111111111111111111111111111111111111:</div><div>11111111111111111111111111111111111</div><div>222222222222222222222222222222222。</div></div></div>
</div>
   .list {position: relative;width: 200px;height: 127px;overflow: hidden;color: #FFFFFF;border: 1px solid white;text-align: left;}.list .rowup {height: 127px;position: relative;}.anim {animation: 5s rowup linear infinite normal;}/*暂停*/.pause {animation-play-state: paused;}@keyframes rowup {0% {transform: translate3d(0, 0, 0);}100% {transform: translate3d(0, -167px, 0);/*文本高度*/}}
 $(".rowup").hover(function(){$(this).addClass('pause')},function(){$(this).removeClass('pause')})

相关文章:

css3实现无缝滚动,鼠标经过暂停

js也可以实现&#xff0c;但css3更加的平滑和资源占用更少。下面是具体代码&#xff0c;动画要单独用一个类名&#xff0c;否则暂停估计不会生效&#xff1a; 原理&#xff1a;动画向上移动&#xff0c;目标完全消失后&#xff0c;从头开始&#xff0c;注意 动画移动高度是文本…...

SpringCache缓存专题

SpringCache缓存专题 学习目标 1、理解缓存存在的意义 2、掌握redis与SpringCache的集成方式 3、掌握SpringCache注解的使用 4、掌握项目集成SpringCache流程 第一章 基于SpringCache缓存方案 1.为什么需要缓存 ​ 前台请求&#xff0c;后台先从缓存中取数据&#xff0…...

Doris实战——结合Flink构建极速易用的实时数仓

目录 一、实时数仓的需求与挑战 二、构建极速易用的实时数仓架构 三、解决方案 3.1 如何实现数据的增量与全量同步 3.1.1 增量及全量数据同步 3.1.2 数据一致性保证 3.1.3 DDL 和 DML 同步 Light Schema Change Flink CDC DML 和DDL同步 3.2 如何基于Flink实现多种数…...

阿里开源低代码引擎 - Low-Code Engine

阿里开源低代码引擎 - Low-Code Engine 本文主要介绍如何在Windows运行/开发阿里开源低代码引擎 - Low-Code Engine 详细文档参见【 阿里开源低代码引擎 - Low-Code Engine 官方文档】 目录 阿里开源低代码引擎 - Low-Code Engine一、环境准备1、使用 WSL 在 Windows 上安装 L…...

2024-02-23(Spark)

1.RDD的数据是过程数据 RDD之间进行相互迭代计算&#xff08;Transaction的转换&#xff09;&#xff0c;当执行开启后&#xff0c;代表老RDD的消失 RDD的数据是过程数据&#xff0c;只在处理的过程中存在&#xff0c;一旦处理完成&#xff0c;就不见了。 这个特性可以最大化…...

【JavaSE】实用类——枚举类型、包装类、数学类

目录 Java API枚举优势代码示例 包装类作用包装类和基本数据类型的对应关系包装类的构造方法包装类的常用方法装箱和拆箱 留一个问题大家猜猜看包装类的特点 Math类Random类代码示例 Java API Java API(Java Application Programming Interface) 即Java应用程序编程接口&#…...

Qt中常见的JS类和函数(二): 全局对象

相关系列文章 Qt中字符串转换为JS的函数执行 Qt中常见的JS类和函数(一): 全局对象 Qt中常见的JS类和函数(二): 全局对象 目录 2.3.构造函数属性 2.3.1.Object 2.3.2.Function 2.3.3.Array 2.3.4.ArrayBuffer 2.3.5.String 2.3.6.Boolean 2.3.7.Number 2.3.8.DataView …...

mysql 安装 与 使用

1.安装地址&#xff08;社区免费版本&#xff09; https://dev.mysql.com/downloads/mysql/ 2.查看端口 ****是否被占用&#xff08;例子 3306端口&#xff09; netstat -an | find "3306" 3.配置环境 系统变量名 变量名&#xff1a;MYSQL_HOME 变量值&#…...

2月26日做题总结(C/C++真题)

今天是2024年2月16日&#xff0c;新学期开学第一天。在大三这个重要阶段&#xff0c;我决定参加24年秋招。在准备项目的同时&#xff0c;也先做一些入门的笔试题吧&#xff0c;慢慢积累。如果你也是处于这个阶段&#xff0c;欢迎来找我交流讨论&#xff01; 今天是做题第一天&a…...

创作纪念日:记录我的成长与收获

机缘 一开始是在我深入学习前端知识的Vue.js框架遇到了一个问题&#xff0c;怎么都解决不了&#xff0c;心烦意乱地来csdn上找解决方法。开心的是真被我找到了&#xff0c;真的很感恩&#xff0c;也意识到在这个平台上分享自己的经验是多么有意义的事情&#xff0c;可能随便的…...

全志H713/H618方案:调焦电机(相励磁法步进电机)的驱动原理、适配方法

一、篇头 全志H713平台&#xff0c;作为FHD投影的低成本入门方案&#xff0c;其公板上也配齐了许多投影使用的模组&#xff0c;本文即介绍投影仪调焦所用的步进电机&#xff0c;此模组的驱动原理、配制方法、调试方法。因为条件限制&#xff0c;本文采用的是H618香橙派Z3平台&…...

excel数据导入到数据库的方法

背景&#xff1a;最近在做和HW对接的某项目&#xff0c;需要将第三方接口提供的数据进行展示&#xff1b;在对方提供了详细的excel后&#xff0c;觉得也挺简单的就是将excel数据导入到数据库中。 方案一&#xff1a; 普通的初学者肯定会想&#xff0c;那我读取excel数据&…...

Runaway Queries 管理:提升 TiDB 稳定性的智能引擎

在数字化系统扮演重要角色的今天&#xff0c;数据库稳定性成为企业关注的核心问题。对于重要计算机系统而言&#xff0c;突发的性能下降可能对业务造成不可估量的损失。为了稳定数据库性能&#xff0c;用户可以从管理流程入手规范变更的测试&#xff0c;或者利用产品手段减少预…...

K8S部署Java项目(Gitlab CI/CD自动化部署终极版)

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…...

对Redis锁延期的一些讨论与思考

上一篇文章提到使用针对不同的业务场景如何合理使用Redis分布式锁&#xff0c;并引入了一个新的问题 若定义锁的过期时间是10s&#xff0c;此时A线程获取了锁然后执行业务代码&#xff0c;但是业务代码消耗时间花费了15s。这就会导致A线程还没有执行完业务代码&#xff0c;A线程…...

【高德地图】Android高德地图初始化定位并显示小蓝点

&#x1f4d6;第3章 初始化定位并显示小蓝点 ✅第1步&#xff1a;配置AndroidManifest.xml✅第2步&#xff1a;设置定位蓝点✅第3步&#xff1a;初始化定位✅完整代码 ✅第1步&#xff1a;配置AndroidManifest.xml 在application标签下声明Service组件 <service android:n…...

继电器测试中需要注意的安全事项有哪些?

继电器广泛应用于电气控制系统中的开关元件&#xff0c;其主要功能是在输入信号的控制下实现输出电路的断开或闭合。在继电器测试过程中&#xff0c;为了确保测试的准确性和安全性&#xff0c;需要遵循一定的安全事项。以下是在进行继电器测试时需要注意的安全事项&#xff1a;…...

Java向ES库中插入数据报错:I/O reactor status: STOPPED

Java向ES库中插入数据报错&#xff1a;java.lang.IllegalStateException: Request cannot be executed; I/O reactor status: STO 一、问题问题原因 二、解决思路 一、问题 在使用Java向ES库中插入数据时&#xff0c;第一次成功插入&#xff0c;第二次出现以下错误&#xff1a…...

vue3实现页面跳转

有需求是在vue项目中实现点击按钮完成页面跳转。这里不适用a标签&#xff0c;而是用vue自带的vue-router。 首先看一下项目结构 src │ App.vue │ main.js │ ├─router │ index.js │ └─views index.vue content.vue 可以看到&…...

【Linux运维系列】vim操作

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...

Neeshck-Z-lmage_LYX_v2行业落地:医疗科普插图AI辅助生成合规性实践

Neeshck-Z-lmage_LYX_v2行业落地&#xff1a;医疗科普插图AI辅助生成合规性实践 1. 引言&#xff1a;当AI绘画遇上医疗科普 想象一下&#xff0c;一位医学编辑正在为一篇关于“心脏瓣膜工作原理”的科普文章寻找配图。他需要的不是一张冰冷的医学解剖图&#xff0c;而是一张既…...

从零构建大模型:大模型微调与对齐-SFT/RLHF 技术详解

前言大语言模型从通用预训练走向可用、好用的核心环节&#xff0c;是微调与对齐。预训练阶段让模型掌握语言规律与海量知识&#xff0c;但输出往往无序、不可控、不遵循指令&#xff1b;而以监督指令微调&#xff08;SFT&#xff09; 为起点、以人类反馈强化学习&#xff08;RL…...

现代化Windows游戏工具箱架构解析:Snap.Hutao核心原理与生产环境部署指南

现代化Windows游戏工具箱架构解析&#xff1a;Snap.Hutao核心原理与生产环境部署指南 【免费下载链接】Snap.Hutao 实用的开源多功能原神工具箱 &#x1f9f0; / Multifunctional Open-Source Genshin Impact Toolkit &#x1f9f0; 项目地址: https://gitcode.com/GitHub_Tr…...

QMK Toolbox:解锁机械键盘自定义潜能的终极工具

QMK Toolbox&#xff1a;解锁机械键盘自定义潜能的终极工具 【免费下载链接】qmk_toolbox A Toolbox companion for QMK Firmware 项目地址: https://gitcode.com/gh_mirrors/qm/qmk_toolbox 想让你心爱的机械键盘拥有超乎想象的功能吗&#xff1f;厌倦了千篇一律的按键…...

知网文献批量下载终极指南:3步实现高效学术研究自动化

知网文献批量下载终极指南&#xff1a;3步实现高效学术研究自动化 【免费下载链接】CNKI-download :frog: 知网(CNKI)文献下载及文献速览爬虫 (Web Scraper for Extracting Data) 项目地址: https://gitcode.com/gh_mirrors/cn/CNKI-download 还在为手动下载知网文献而…...

用Python玩转奥比中光Gemini Pro:从开箱到实时获取深度图与彩色图的保姆级教程

用Python玩转奥比中光Gemini Pro&#xff1a;从开箱到实时获取深度图与彩色图的保姆级教程 刚拿到奥比中光Gemini Pro相机的开发者们&#xff0c;是否迫不及待想看到它强大的深度视觉能力&#xff1f;本文将带你从零开始&#xff0c;一步步完成环境搭建、设备连接、代码调试&am…...

3步永久保存微信聊天记录:告别数据丢失的数字记忆守护方案

3步永久保存微信聊天记录&#xff1a;告别数据丢失的数字记忆守护方案 【免费下载链接】WeChatMsg 提取微信聊天记录&#xff0c;将其导出成HTML、Word、CSV文档永久保存&#xff0c;对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trending/we/W…...

用51单片机+DAC0832做个简易信号发生器:手把手教你生成方波、三角波和锯齿波(附完整汇编代码)

51单片机与DAC0832实战&#xff1a;三波形信号发生器的设计与实现 在电子工程和嵌入式系统开发中&#xff0c;信号发生器是一个基础但极其重要的工具。无论是用于电路测试、教学演示还是原型验证&#xff0c;一个可靠的信号源都能大大提升工作效率。本文将带你从零开始&#xf…...

用Python和TensorFlow搞定PINN:从Burgers方程到Navier-Stokes的保姆级代码实战

用Python和TensorFlow搞定PINN&#xff1a;从Burgers方程到Navier-Stokes的保姆级代码实战 在工程计算和科学模拟领域&#xff0c;偏微分方程&#xff08;PDE&#xff09;的求解一直是核心挑战。传统数值方法如有限元、有限体积法虽然成熟&#xff0c;但面对复杂边界条件或高维…...

哪些话,最容易一句话把网络工程师整破防

很多人觉得网络工程师脾气好、话不多、好沟通。 其实不是他们好说话,而是他们见过太多“离谱问题”,已经练出了表面平静的能力。 但有些话,只要你说出口,哪怕是经验再老的网工,内心都会“轻微炸一下”。 今天这篇,就不讲命令、不讲协议,聊点更真实的—— 哪些话,最…...