css 实现排行榜向上滚动

在这里插入图片描述

使用动画实现无线向上滚动

复制一层dom,使用动画向上滚动,鼠标hover的时候暂停动画

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Infinite Scrolling Animation</title><style>* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Poppins', sans-serif;
}body {min-height: 100vh;background-color: #222;color: #fff;display: flex;flex-direction: column;justify-content: center;align-items: center;  
}.scroll {display: flex;width: 700px;overflow: hidden;mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);-webkit-mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
}.scroll > div {white-space: nowrap;animation: animate var(--t) linear infinite;animation-delay: calc(var(--t) * -1);text-align: center;}
.scroll>div>div {width: 300px;padding: 20px;background-color: cy;
}
@keyframes animate {0% {transform: translateY(100%);}100% {transform: translateY(-100%);}
}.scroll > div:nth-child(2) {animation: animate2 var(--t) linear infinite;animation-delay: calc(var(--t) / -2);}
.scroll > div:nth-child(2) div {/* background-color: red; */}
@keyframes animate2 {0% {transform: translate(-100%,100%);}100% {transform: translate(-100%,-100%);}
}.scroll:hover > div {animation-play-state: paused;
}</style>
</head><body><div class="scroll" style="--t: 20s"><div><div>HTML</div><div>CSS</div><div>JavaScript</div><div>Vue</div><div>React</div><div>Figma</div><div>Photoshop</div><div>Photoshop2</div></div><div><div>HTML</div><div>CSS</div><div>JavaScript</div><div>Vue</div><div>React</div><div>Figma</div><div>Photoshop</div><div>Photoshop2</div></div></div></body></html>

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

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

相关文章

Vue中component lists rendered with v-for should have explicit keys异常

在 Vue.js 中&#xff0c;当你在组件列表中使用 v-for 指令渲染多个组件时&#xff0c;每个组件元素都应当有一个明确的 key 属性。Vue.js 引擎通过这个 key 来优化虚拟 DOM 的 diff 过程&#xff0c;提升页面更新效率&#xff0c;并确保状态保持一致。 例如&#xff0c;如果你…

Java Lambda表达式

Lambda表达式是Java 8中引入的一种新特性&#xff0c;它允许你以更简洁的方式编写匿名函数。Lambda表达式主要用于简化集合操作、线程创建等场景。以下是Lambda表达式的详解&#xff1a; Lambda表达式的基本语法&#xff1a; (parameters) -> expression或者 (parameters…

02 | 事件驱动框架(Get/Set)

02 | 事件驱动框架&#xff08;Get/Set&#xff09; 【程序员的末路诗】01 aeEventLoop数据结构1&#xff09;aeEventLoop2&#xff09;aeFileEvent3&#xff09;aeTimeEvent 02 epoll 实例创建&#xff08;epoll_create&#xff09;1&#xff09;创建eventLoop结构体2&#xf…

香港科技大学广州|智能制造学域博士招生宣讲会—广州大学城专场

香港科技大学广州&#xff5c;智能制造学域博士招生宣讲会—广州大学城专场 时间&#xff1a;2024年4月18日&#xff08;星期四&#xff09;14:30 地点&#xff1a;广州市大学城雅乐轩酒店二楼策略2厅&#xff08;地铁大学城南站C口&#xff09; 报名链接&#xff1a;https:/…

记录西门子:增量编码器使用

编码器功能实现&#xff1a; 1、显示角度0~360 2、显示编码器速度 3、掉电保持当前角度 4、一键定位功能---改变当前角度为180 5、通过Z相不断纠偏角度 实物编码器&#xff1a; 接线图&#xff1a; 接到PLC的高速计数点位 方案一&#xff1a;200-Smart 方案二&#xff1a;1…

AI大模型探索之路-提升篇2:一文掌握AI大模型的核心-注意力机制

目录 前言 一、注意力机制简介 二、注意力机制的工作原理 三、注意力机制的变体 1、自注意力&#xff08;Self-Attention&#xff09; 2、双向注意力&#xff08;Bidirectional Attention&#xff09; 3、多头注意力&#xff08;Multi-Head Attention&#xff09; ​4、…

数据结构课程设计选做(三)---公共钥匙盒(线性表,栈,队列)

2.3.1 题目内容 2.3.1-A [问题描述] 有一个学校的老师共用N个教室&#xff0c;按照规定&#xff0c;所有的钥匙都必须放在公共钥匙盒里&#xff0c;老师不能带钥匙回家。每次老师上课前&#xff0c;都从公共钥匙盒里找到自己上课的教室的钥匙去开门&#xff0c;上完课后&…

pycharm debug 的时候 waiting for process detach

当你使用pycharm debug或者run的时候&#xff0c;突然出现了点不动&#xff0c;然后一直显示&#xff1a;waiting for process detach 可能是以下问题&#xff1a; 1、需要设置Gevent compatible pycharm一直没显示运行步骤&#xff0c;只是出现waiting for process detach-C…

利用Sentinel解决雪崩问题(一)流量控制

1、解决雪崩问题的常见方式有四种: 超时处理:设定超时时间&#xff0c;请求超过一定时间没有响应就返回错误信息&#xff0c;不会无休止等待;舱壁模式:限定每个业务能使用的线程数&#xff0c;避免耗尽整个tomcat的资源&#xff0c;因此也叫线程隔离;熔断降级:由断路器统计业务…

SpringMVC--SpringMVC的视图

目录 1. 总述 2. ThymeleafView视图 3. 转发视图 4. 重定向视图 5. 视图控制器view-controller 1. 总述 在SpringMVC框架中&#xff0c;视图&#xff08;View&#xff09;是一个非常重要的概念&#xff0c;它负责将模型数据&#xff08;Model&#xff09;展示给用户。简单…

demo(四)nacosgateway(2)gatewayspringsercurity

一、思路 1、整体思路 用户通过客户端访问项目时&#xff0c;前端项目会部署在nginx上&#xff0c;加载静态文件时直接从nginx上返回即可。当用户在客户端操作时&#xff0c;需要调用后端的一些服务接口。这些接口会通过Gateway网关&#xff0c;网关进行一定的处理&#xff0…

Redis(二) 可编程性

结合上一期 Redis(一) Redis简介(Redis(一) Redis简介-CSDN博客) 目录 Redis 可编程性 运行脚本 只读脚本 只读脚本历史记录 最长执行时间 Redis 函数 加载库和函数 输入键和常规参数 扩展库 重用库中的代码 Lua 脚本 脚本参数化 从脚本与 Redis 交互 脚本缓…

Thingsboard PE 白标的使用

只有专业版支持白标功能。 使用 ThingsBoard Cloud 或安装您自己的平台实例。 一、介绍 ThingsBoard Web 界面提供了简便的操作,让您能够轻松配置您的公司或产品标识和配色方案,无需进行编码工作或重新启动服务。 系统管理员、租户和客户管理员可以根据需要自定义配色方案、…

精通技术写作:如何写出高质量技术文章?

CSDN 的朋友你们好&#xff0c;我是未来&#xff0c;今天给大家带来专栏【程序员博主教程&#xff08;完全指南&#xff09;】的第 7 篇文章“如何撰写高质量技术文章”。本文深入探讨了如何写好一篇技术文章。文章给出了好的技术文章的定义和分析&#xff0c;并提供了从选题、…

Day103:漏洞发现-漏扫项目篇Poc开发Rule语法反链判断不回显检测Yaml生成

目录 Xray&Afrog-Poc开发-环境配置&编写流程 Xray-Poc开发-数据回显&RCE不回显&实验室 Afrog-Poc开发-数据回显&RCE不回显&JDNI注入 HTTP/S数据回显Poc开发-CVE-2023-28432 HTTP/S不回显RCE-Poc开发-CVE-2022-30525 HTTP/S不回显JNDI-Poc开发 知…

Upload-labs(Pass-14 - Pass-16)

Pass-14 &#xff08;图片马&#xff0c;判断文件类型&#xff09; 图片的格式在防护中通常是不会使用后缀进行判断的依据&#xff0c;文件头是文件开头的一段二进制码&#xff0c;不同类型的图片也就会有不同的二进制头。   JPEG (jpg)&#xff0c;文件头&#xff1a;FF D…

比较有用的C++编译错误解决方法

学习VC&#xff0b;&#xff0b;时经常会遇到链接错误LNK2001&#xff0c;该错误非常讨厌&#xff0c;因为对于编程者来说&#xff0c;最好改的错误莫过于编译错误&#xff0c;而一般说来发生连接错误时&#xff0c;编译都已通过。产生连接错误的原因非常多&#xff0c;尤其LNK…

便携式污水采样器的工作环境要求

便携式污水采样器的工作环境要求极为严格&#xff0c;以确保其能够准确、稳定地采集和分析水样。首先&#xff0c;该采样器必须在干燥、通风良好的环境中工作&#xff0c;以避免潮湿和高温对其内部电子元件的损害。同时&#xff0c;为了保证采样器的稳定性和精度&#xff0c;工…

【数据结构(六)】队列

❣博主主页: 33的博客❣ ▶️文章专栏分类:数据结构◀️ &#x1f69a;我的代码仓库: 33的代码仓库&#x1f69a; &#x1faf5;&#x1faf5;&#x1faf5;关注我带你学更多数据结构知识 目录 1.前言2.概念3.队列的使用4.循环队列5.双端队列6.经典习题6.1队列实现栈6.2栈实现队…

MySQL批量修改记录

我们知道MySQL支持批量添加记录&#xff0c;用法也比较简单&#xff0c;不过需要编码需要注意一下&#xff0c;因为很容易搞错 var jargs require(./argspw.json); const mysql require("mysql"); const mysqlpool mysql.createPool({host:jargs.mysqlip,user:jar…