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

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

原理:动画向上移动,目标完全消失后,从头开始。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')})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/693463.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

分享10款自媒体人常用ai写作工具,总有一款适合你 #其他#AI写作

你是否因为写作困顿而感到沮丧&#xff1f;是不是希望能够找到一个能给你提供无限灵感和提高创作效率的利器&#xff1f;AI写作助手就是你的绝佳选择&#xff01;现在我向大家推荐几款好用的AI写作助手&#xff0c;它们将让你的创作之旅更加流畅、富有创意。 1.七燕写作 这是一…

十二、通过色彩空间转换进行更换图片背景

项目功能实现&#xff1a;对一张白色背景的图片进行更换成蓝色背景&#xff0c;类似抠图更换背景操作 按照之前的博文结构来&#xff0c;这里就不在赘述了 一、头文件 inrange.h #pragma once#include<opencv2/opencv.hpp>using namespace cv;class INRANGE{ public:v…

入门指南:Element UI 组件的安装及使用

随着前端开发技术的不断发展&#xff0c;越来越多的开发者选择使用现成的 UI 组件库来加速项目开发并提升用户体验。其中&#xff0c;Element UI 作为一款基于 Vue.js 的组件库&#xff0c;备受开发者们的青睐。本篇博客将为大家介绍如何安装并使用 Element UI 组件&#xff0c…

华为OD机试真题-围棋的气-2023年OD统一考试(C卷)---python代码

题目&#xff1a; 代码&#xff1a; """ # 输入&#xff1a;2的倍数 第一个为行号 0-18 第二个为列号 0-18第一行为黑色 第二行为白色思路&#xff1a;先求黑色&#xff0c;进行去重棋子的位置&#xff0c;再求白色 逐个棋子求坐标。 """ d…

pytorch和tensorflow比较以及安装使用tensorflow

google brain tensorflow facebook ai pytorch TensorFlow支持Python、C、Java和Go等编程语言&#xff0c;而PyTorch主要使用Python pytorch有c语言版本性能完全没问题可以用python开发测试用c语言版本训练和部署 在TensorFlow中&#xff0c;模型的定义和计算图建立在静态图…

git重新提交commit

在Git中重新提交commit&#xff0c;通常是指修改最近的提交或者更早的提交。以下是一些常用的方法来重新提交commit&#xff1a; 修改最后的提交 如果你只是想修改最后一次提交的信息&#xff08;比如提交信息写错了&#xff09;&#xff0c;你可以使用&#xff1a; bashCopy…

OpenLayers6入门,如何销毁已经创建好的OpenLayers地图容器

专栏目录: OpenLayers入门教程汇总目录 前言 本章介绍如何销毁已经创建好的OpenLayers地图容器。 在某些场景下,可能会需要销毁之前的地图,重新创建新的地图的需要,因此本章介绍一下在开始创建地图前如何先销毁之前的地图的功能。 二、依赖和使用 "ol": &qu…

用CSS3画一个三角形

<style> .up{width:0;height:0;border: 100px solid transparent;border-top: 100px solid red;/*红色*/ } .down{width:0;height:0;border: 100px solid transparent;border-bottom: 100px solid blue;/*蓝色*/ } .left{width:0;height:0;border: 100px solid transpare…

【爬虫JS逆向-工具篇】浏览器内存漫游加密参数Hook实战教程

文章目录 1. 写在前面2. 环境搭建2. 加密定位实战 【作者主页】&#xff1a;吴秋霖 【作者介绍】&#xff1a;Python领域优质创作者、阿里云博客专家、华为云享专家。长期致力于Python与爬虫领域研究与开发工作&#xff01; 【作者推荐】&#xff1a;对JS逆向感兴趣的朋友可以关…

PCI:电脑里的“交通警察”,让数据有序流动!

亲爱的朋友们&#xff0c;你们好&#xff01;我是香蕉&#xff0c;今天我要带你们一起走进一个神秘而重要的技术领域——PCI&#xff08;Peripheral Component Interconnect&#xff09;。这个名字听起来可能有点拗口&#xff0c;但实际上&#xff0c;PCI就像是电脑里的“交通警…

JWT 重点讲解

JWT 重点讲解 文章目录 JWT 重点讲解1. JWT 是什么2. JWT 的组成2.1 第一部分 HEADER2.2 第二部分 PAYLOAD2.3 第三部分 SIGNATURE 3. JWT 在线生成与解析4. JWT 的特点4.1 无状态4.2 可自定义4.3 扩展性强4.4 调试性好4.5 安全性取决于密钥管理4.6 无法撤销4.7 需要缓存到客户…

docker构建还能这么玩

前言 多阶段构建&#xff08;Multi-stage builds&#xff09;是从 Docker 17.05 版本开始引入的功能。这个功能允许在单个 Dockerfile 中定义多个构建阶段&#xff0c;并且在最终镜像中只包含所需的内容&#xff0c;从而减小镜像的大小。通过多阶段构建&#xff0c;可以将构建…

Java集合框架-1

目录 List集合 常见方法 迭代器&#xff08;Iterator&#xff09; List集合特有方法 List 的特点 创建 List 遍历List Java集合框架是Java编程语言提供的各种数据结构和算法的实现。它提供了不同类型的集合类&#xff0c;如列表(List)、集(Set)、映射(Map)等&#xff0c…

一个获取正定矩阵的非常好的方法 (多元二次函数 ---> 正定矩阵) (done)

参考视频&#xff1a;https://www.bilibili.com/video/BV11T4y1S7YF/?spm_id_from333.337.search-card.all.click&vd_source7a1a0bc74158c6993c7355c5490fc600 如下图&#xff0c;是一种非常直接的获取正定矩阵的方法 &#xff08;且这种方法一定会获得对称矩阵&#xff…

IDEA 2023.2 配置 JavaWeb 工程

目录 1 不使用 Maven 创建 JavaWeb 工程 1.1 新建一个工程 1.2 配置 Tomcat 1.3 配置模块 Web 2 使用 Maven 配置 JavaWeb 工程 2.1 新建一个 Maven 工程 2.2 配置 Tomcat &#x1f4a5;提示&#xff1a;IDEA 只有专业版才能配置 JavaWeb 工程&#xff0c;若是社区版&am…

爬虫入门三(bs4模块、遍历文档树、搜索文档树、css选择器)

文章目录 一、bs4模块二、遍历文档树三、搜索文档树四、css选择器 一、bs4模块 beautifulsoup4从HTML或XML文件中提取数据的Python库,用它来解析爬取回来的xml。 1.安装pip install beautifulsoup4 # 下载bs4模块pip install lxml #解析库2. 用法第一个参数&#xff0c;是要总…

☀️将大华摄像头画面接入Unity 【2】配置Unity接监控画面

一、前言 上一篇咱们将大华摄像头接入到电脑上了&#xff0c;接下来准备接入到unity画面。 接入到监控就涉及到各种视频流的格式rtsp、rtmp、m3u8。 Unity里有一些播放视频流的插件&#xff0c;主要的就是AVPro Video 和 UMP等&#xff0c;这次我用的是UMP 最好使用2.0.3版本…

从0到1的私域流量体系搭建,私域操盘手的底层认知升级

一、教程描述 本套私域操盘手教程&#xff0c;大小4.31G&#xff0c;共有12个文件。 二、教程目录 01第一课、私域能力必修&#xff1a;私域大神熟记于心的高阶私域体系.mp4 02第二课、私域IP打造&#xff1a;那些忍不住靠近的私域IP如何打造的.mp4 03第三课、朋友圈经济&…

论文阅读——SqueezeSAM

SqueezeSAM: User-Friendly Mobile Interactive Segmentation 比SAM更小&#xff0c;更快。 框架&#xff1a; 使用的U型结构 使用BatchNorm而不是LayerNorm节省计算&#xff1b; 对于用户点击和框&#xff0c;单独作为通道&#xff0c;前融合和后融合&#xff08;sam只有后融…

OpenGL学习——16.多光源

前情提要&#xff1a;本文代码源自Github上的学习文档“LearnOpenGL”&#xff0c;我仅在源码的基础上加上中文注释。本文章不以该学习文档做任何商业盈利活动&#xff0c;一切著作权归原作者所有&#xff0c;本文仅供学习交流&#xff0c;如有侵权&#xff0c;请联系我删除。L…