无限移动的风景 css3 动画 鼠标移入暂停

<style>*{margin:0;padding:0;/* box-sizing: border-box; */}ul{list-style: none;}#nav{width:900px;height:100px;border:2px solid rgb(70, 69, 69);margin:100px auto; overflow: hidden;}#nav ul{animation:moving 5s linear infinite;width:200%; /*怎么模拟动画无线滚动,关键点在这,因为当动画滚动完之后,ul会回到起始位置,如果设置宽度为大盒子的2倍则在视觉上不会出现回到初始位置重新滚动的问题*/}#nav ul li{float:left; }#nav ul li img{ width:100px;height: 100px;}/* 自定义动画 */@keyframes moving{from{transform:translateX(0)}to{transform: translateX(-900px);}}#nav:hover ul{ /*鼠标移入正在运行的动画停止*/animation-play-state:paused ;}
</style>
<div id="nav"><ul><!-- 将图片复制两份,保证每份图片的宽跟 nav盒子的宽度相同 --><!-- 第一份 --><li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li><li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li><li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li><li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li><li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li><li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li><li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li><li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li><li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li><!-- 第二份 --><li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li><li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li><li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li><li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li><li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li><li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li><li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li><li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li><li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li></ul></div>
相关文章:
无限移动的风景 css3 动画 鼠标移入暂停
<style>*{margin:0;padding:0;/* box-sizing: border-box; */}ul{list-style: none;}#nav{width:900px;height:100px;border:2px solid rgb(70, 69, 69);margin:100px auto; overflow: hidden;}#nav ul{animation:moving 5s linear infinite;width:200%; /*怎么模拟动画…...
Java基本数据类型、包装类及拆装箱详解
Java的基本数据类型和对应的包装类是Java语言中处理数据的两个关键概念。基本数据类型提供了简单而高效的方式来存储数据,而包装类使得基本数据类型具有对象的特性。本文将深入探讨基本数据类型与包装类的应用场景及详细描述,并对自动拆箱和装箱的源码实…...
SIT2596,可替代LM2596,40V 输入 150KHz 3A 降压型电源转换器
SIT2596 是一款降压型开关电压调节芯片,可固定输出 3.3V、5V、12V,也可根据需要调节 输出电压,电压输出范围在 1.2V-37V,输入电压最高可达 40V,输出电流可达 3A;同时具有优异 的线性调整率和负载调整率。 SIT2596 内部集成频率…...
python + mongodb使用入门
最近用了下mongodb ,简单做个记录: 1.启动系统mongo服务 mongod -f mongod.conf其中 mongod.conf 是配置文件,示例如下: dbpath/youpath/data/db #数据库保存位置 logpath/youpath/data/mongod.log #日志 logappendtrue fo…...
焊接专业个人简历(通用25篇)
如果大家想在焊接行业的求职中脱颖而出,轻松斩获心仪职位,参考这25篇通用的焊接专业个人简历案例,无论您是初学者还是资深焊工,都能从中找到适合自己的简历内容。参考这些简历,让您的求职之路更加顺畅。 焊接专业个人…...
c++学习第四讲---函数提高
1.函数默认参数: 在( )中将参数赋值,如果传值了,则用传入值,否则才用函数中默认参数。 例: int func(int a, int b 3, int c 3) {return a b c; } int main() {cout << func(1, 2)…...
如何使用cpolar+Plex在Windows系统上搭建私人媒体影音站点公网可访问
文章目录 1.前言2. Plex网站搭建2.1 Plex下载和安装2.2 Plex网页测试2.3 cpolar的安装和注册 3. 本地网页发布3.1 Cpolar云端设置3.2 Cpolar本地设置 4. 公网访问测试5. 结语 1.前言 用手机或者平板电脑看视频,已经算是生活中稀松平常的场景了,特别是各…...
FreeRTOS-软件定时器
软件定时器 在FreeRTOS中可以设置无数个软件定时器,都是基于系统滴答中断。 使用软件定时器需要指定时间:启动定时器和运行回调函数。启动定时器和运行回调函数的间隔为定时器的周期。 使用软件定时器需要指定类型:一次性(回调函数…...
Lab 3: Recursion, Tree Recursion(CS61A 2020)
在网上没有lab3相应的答案,作者也卡蛮久 (就此补充一下答案) Q2: WWPD: Journey to the Center of the Earth Use Ok to test your knowledge with the following "What Would Python Display?" questions: python3 ok -q sr-ww…...
GVIM 配置 for begin/end class/endclass 等配对
有时候我们的代码很长,或者结构比较复杂,多个if/else 或者begin/end 快嵌套,为了阅读方便,利用gvim插件实现块跳转还是很有实用性的,下面的.vimrc的配置,简单方便。 使用方式: 将光标定位到块头…...
2024不收费的数据恢复软件EasyRecovery16
EasyRecovery2024是一款操作安全、用户可自主操作的数据恢复方案,它支持从各种各样的存储介质恢复删除或者丢失的文件,其支持的媒体介质包括:硬盘驱动器、光驱、闪存、硬盘、光盘、U盘/移动硬盘、数码相机、手机以及其它多媒体移动设备。能恢…...
【每日一题】找出叠涂元素
文章目录 Tag题目来源题目解读解题思路方法一:哈希表 写在最后 Tag 【哈希表】【数组】【2023-12-01】 题目来源 2661. 找出叠涂元素 题目解读 从左往右遍历 arr 给矩阵 mat 上色,在上色的过程中矩阵的某一行或者某一列的全部被上色了,返回…...
Qt面试题
1.QT信号槽机制的优缺点 优点: 1.类型安全:需要关联的信号槽的签名必须是等同的,即信号的参数类型和参数个数和接受该信号的槽的参数类型和参数个数相同。(PS:信号函数的参数个数必须大于等于槽函数的参数个数) 2.松…...
LeetCode:1038. 从二叉搜索树到更大和树(反向中序遍历 C++、Java)
目录 1038. 从二叉搜索树到更大和树 题目描述: 实现代码与解析: dfs 原理思路: 1038. 从二叉搜索树到更大和树 题目描述: 给定一个二叉搜索树 root (BST),请将它的每个节点的值替换成树中大于或者等于该节点值的所…...
【文末送书】Python OpenCV从入门到精通
文章目录 🍔简介opencv🌹内容简介🛸编辑推荐🎄导读🌺彩蛋 🍔简介opencv OpenCV(Open Source Computer Vision Library)是一个开源的计算机视觉库,提供了丰富的图像处理和…...
RabbitMQ 的七种消息传递形式
文章目录 一、RabbitMQ 架构简介二、准备工作 三、消息收发1. Hello World2. Work queues3. Publish/Subscrite3.1. Direct3.2. Fanout3.3. Topic3.4. Header 4. Routing5. Topics 大部分情况下,我们可能都是在 Spring Boot 或者 Spring Cloud 环境下使用 RabbitMQ&…...
开源免费跨平台数据同步工具-Syncthing
Syncthing是一款开源免费跨平台的文件同步工具,是基于P2P技术实现设备间的文件同步,所以它的同步是去中心化的,即你并不需要一个服务器,故不需要担心这个中心的服务器给你带来的种种限制,而且类似于torrent协议&#x…...
java语言中受检异常和非受检异常的区别是什么?
在Java语言中,异常可以分为两种类型:受检异常(Checked Exception)和非受检异常(Unchecked Exception)。 受检异常(Checked Exception):这是编译器要求必须进行处理的异常…...
vue3 element-plus el-table表头冻结,表头吸顶
一.使用方式 在main.ts页面创建 vue指令 import { createSticky } from /utils/stickyconst app createApp(App)createSticky(app)...app.mount(#app);在el-table标签上使用 v-sticky <div class"table-box"><!--此处的 .table-box 是会出现滚动条的DOM元…...
mysql中删除数据后,新增数据时id会跳跃,主键自增id不连续
引言: 在使用MySQL数据库时,有时候我们需要删除某些记录,但是删除记录后可能会导致表中的id不再连续排序。 如何实现删除记录后让id重新排序的功能。 如图: 删除数据后,中间的id不会自动连续。 下面有两种方法进行重…...
ABAP开发避坑指南:绕过SAP GUI安全弹窗的5种编程方案实测
ABAP开发实战:5种绕过SAP GUI安全弹窗的编程方案深度解析 引言:SAP GUI安全机制的困境与突破 在SAP系统的日常开发与运维中,频繁出现的"系统试图创建文件"安全弹窗堪称ABAP开发者的噩梦。这种设计初衷为保护本地文件安全的机制&…...
【2025最新】基于SpringBoot+Vue的疫情隔离酒店管理系统管理系统源码+MyBatis+MySQL
系统架构设计### 摘要 近年来,全球范围内突发公共卫生事件频发,疫情隔离酒店作为防控体系的重要环节,其管理效率直接关系到公共卫生安全和社会稳定。传统酒店管理模式在应对大规模隔离需求时暴露出信息滞后、资源调配低效、数据孤岛等问题&am…...
三维点云到二维图像投影的实战指南:从原理到代码实现
1. 三维点云投影二维图像的核心原理 第一次接触三维点云投影时,我也被各种坐标系转换绕得头晕。后来发现只要抓住一个核心:三维到二维的投影本质上是坐标系转换的接力赛。想象你拿着手机拍照,物体从现实世界到手机屏幕的旅程,就是…...
告别Electron臃肿!用Tauri 2.0 + Rust打造你的第一个轻量级桌面应用(附完整项目结构解析)
从Electron到Tauri 2.0:用Rust重构现代桌面应用开发范式 当Electron应用体积膨胀到200MB起步时,我们不得不重新思考桌面开发的未来。Tauri 2.0的出现绝非偶然——这是前端开发者对性能与体验的集体觉醒。本文将带你深入这个基于Rust的轻量级框架…...
CTF信息收集入门:从BUUCTF‘粗心的小李’题目看Git泄露的常见利用方式
CTF信息收集实战:Git泄露漏洞的深度利用与防御策略 在CTF竞赛的Web安全赛道上,信息收集能力往往决定着解题的成败。当新手面对看似空白的网页时,常会陷入无从下手的困境——这正是"粗心的小李"这类题目的设计初衷。不同于常规的SQL…...
IDEA插件开发实战:手把手教你开发首个效率工具(附GitHub源码)
IDEA插件开发实战:从零打造你的专属效率工具 JetBrains系列IDE的强大之处不仅在于其核心功能,更在于其开放的插件生态系统。作为一名Java开发者,你是否曾想过为IDEA添加一个能提升自己工作效率的专属工具?本文将带你从零开始&…...
vLLM-v0.17.1参数详解:--disable-log-stats与--log-level日志调优
vLLM-v0.17.1参数详解:--disable-log-stats与--log-level日志调优 1. vLLM框架简介 vLLM是一个专为大型语言模型(LLM)设计的高性能推理和服务库,以其出色的吞吐量和易用性著称。这个项目最初由加州大学伯克利分校的天空计算实验室开发,现在…...
手搓STM32H743开源飞控系列教程---(五) 飞控IMU方向调整
1. 为什么需要调整飞控IMU方向 第一次玩飞控的朋友可能会遇到一个奇怪现象:明明把飞控板水平放在桌面上,地面站显示的姿态却歪了30度。这种情况十有八九是IMU安装方向与飞控默认设定不匹配导致的。我刚开始玩穿越机时就踩过这个坑,当时把飞控…...
咱们今天来唠唠机器人轨迹规划那点事儿。不少小伙伴在玩机械臂的时候总会遇到关节空间和笛卡尔空间轨迹规划的抉择困难症,这俩货到底有什么区别?直接上硬核代码
matlab笛卡尔空间和关节空间轨迹规划 关节空间机器臂多项式轨迹规划定做,353和333多项式轨迹规划和优化关节空间规划有个大杀器——多项式插值。比如要让机械臂从A点平滑运动到B点,咱们可以玩三次多项式(3-3-3)或者五次多项式&…...
嵌入式开源软件应用的五项关键实践
嵌入式开源软件应用的五项关键实践1. 开源软件在嵌入式系统中的价值与挑战开源软件已成为现代嵌入式系统开发的重要组成部分。通过合理利用开源组件,开发团队可以显著缩短开发周期,降低研发成本,同时获得经过社区验证的可靠解决方案。然而&am…...
