前端实现无缝自动滚动动画

1. 前言: 前端使用HTML+CSS实现一个无缝滚动的列表效果

示例图:

示例图

2. 源码

  1. html部分源码:
<!--* @Author: wangZhiyu <w3209605851@163.com>* @Date: 2024-07-05 23:33:20* @LastEditTime: 2024-07-05 23:49:09* @LastEditors: wangZhiyu <w3209605851@163.com>* @FilePath: \无缝自动滚动动画\index.html* @Descripttion: 无缝自动滚动动画
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>无缝自动滚动动画</title><link rel="stylesheet" href="./index.css">
</head><body><div class="container"><div class="scrollArea"><!-- 第一段内容 --><div class="item">内容1</div><div class="item">内容2</div><div class="item">内容3</div><div class="item">内容4</div><div class="item">内容5</div><!-- 重复循环一次第一段内容 --><div class="item">内容1</div><div class="item">内容2</div><div class="item">内容3</div><div class="item">内容4</div><div class="item">内容5</div></div></div>
</body></html>
  1. css部分源码:
* {margin: 0;padding: 0;
}/* 大盒子样式设置,注意大盒子必须要指定宽度,并且设置overflow属性为hidden */
.container {width: 200px;margin: 0 auto;margin-top: 200px;height: 125px;overflow: hidden;background-color: rgba(0, 0, 0, 0.05);text-align: center;
}/* 大盒子的子元素,列表内容的父元素,设置滚动动画 */
.scrollArea {/* 设置里的动画时长根据不同的情况设置即可 */animation: scroll 3s linear infinite;
}/* 设置当鼠标悬停时,自动挺尸滚动 */
.scrollArea:hover {animation-play-state: paused;
}/* 滚动动画 */
@keyframes scroll {0% {}100% {transform: translateY(-50%);}
}

3. 原理解释:

  1. 为什么需要两个相同的列表:

    答: 因为当第一个列表滚动到顶部时,第二个列表也会随之向上滚动,就形成了视差效果,向上滚动了一个元素区域,下面就填充进来了一个元素区域,并且当滚动完毕之后,会重新回到初识位置继续滚动,也会形成视差效果,由此实现了无缝滚动

  2. 为什么需要在大盒子与列表元素之间再添加一个盒子进去:

    答: 这个盒子的主要作用是用来滚动的,因为大盒子设置了overflow:hidden,所以大盒子与列表元素中间的盒子滚动时是不会超出大盒子的范围的,并且这个盒子也起到了显示元素的显示范围的作用

4. 总结

以上就是本期分享的全部内容了,最近偶然又遇到了这个需求,就单独拿出来做了个demo🙂

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

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

相关文章

【ubuntu】安装(升级)显卡驱动,黑屏|双屏无法使用问题解决方法

every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 ubuntu 安装(升级)显卡驱动&#xff0c;黑屏|双屏无法使用问题解决方法 由于项目需要&#xff0c;对显卡驱动进行升级。升级完就黑屏。。。。&#xff0…

Fast R-CNN(论文阅读)

论文名&#xff1a;Fast R-CNN 论文作者&#xff1a;Ross Girshick 期刊/会议名&#xff1a;ICCV 2015 发表时间&#xff1a;2015-9 ​论文地址&#xff1a;https://arxiv.org/pdf/1504.08083 源码&#xff1a;https://github.com/rbgirshick/fast-rcnn 摘要 这篇论文提出了一…

WordPress禁止用户注册某些用户名

不管在任何网站&#xff0c;用户注册时都有一个屏蔽非法关键词&#xff0c;就是禁止注册某些用户名&#xff0c;原因是因为防止用户使用一些特定的用户名&#xff0c;例如管理员、官方等用户名&#xff0c;还有就是那些攻击性的词语了。 加网站添加了屏蔽非法关键词&#xff0…

BAT-致敬精简

什么是bat bat是windows的批处理程序&#xff0c;可以批量完成一些操作&#xff0c;方便快速。 往往我们可以出通过 winR键来打开指令窗口&#xff0c;这里输入的就是bat指令 这里就是bat界面 节约时间就是珍爱生命--你能想象以下2分钟的操作&#xff0c;bat只需要1秒钟 我…

考虑数据库粒度的设计-提升效率

目录 概要 场景 设计思路 小结 概要 公开的资料显示&#xff0c;数据库粒度是&#xff1a;“在数据库领域&#xff0c;特别是数据仓库的设计中&#xff0c;粒度是一个核心概念&#xff0c;它直接影响到数据分析的准确性和存储效率。粒度的设定涉及到数据的详细程度和精度&…

【JVM基础篇】Java的四种垃圾回收算法介绍

文章目录 垃圾回收算法垃圾回收算法的历史和分类垃圾回收算法的评价标准标记清除算法优缺点 复制算法优缺点 标记整理算法&#xff08;标记压缩算法&#xff09;优缺点 分代垃圾回收算法&#xff08;常用&#xff09;JVM参数设置使用Arthas查看内存分区垃圾回收执行流程分代GC算…

【SpringBoot】IDEA查看spring bean的依赖关系

前因&#xff1a;在研究springcloud config组件时&#xff0c;我发现config-server包下的EnvironmentController可以响应客户端的请求&#xff0c;但EnvironmentController并不在启动类所在的包路径下&#xff0c;所以我推测它是作为某个Bean方法在生效&#xff0c;寻找bean的依…

vue-router 源码分析——9.别名

这是对vue-router 3 版本的源码分析。 本次分析会按以下方法进行&#xff1a; 按官网的使用文档顺序&#xff0c;围绕着某一功能点进行分析。这样不仅能学习优秀的项目源码&#xff0c;更能加深对项目的某个功能是如何实现的理解。这个对自己的技能提升&#xff0c;甚至面试时…

DAY1: 实习前期准备

文章目录 VS Code安装的插件C/CCMakeGitHub CopilotRemote-SSH收获 VS Code 下载链接&#xff1a;https://code.visualstudio.com 安装的插件 C/C 是什么&#xff1a;C/C IntelliSense, debugging, and code browsing. 为什么&#xff1a;初步了解如何在VS Code里使用C输出…

https创建证书

需要下载httpd模块&#xff1a;yum install httpd -y 前提需要先搭建一个虚拟主机来测试证书创建的效果&#xff0c;以下面www.hehe.com为例&#xff0c;可以参考创建&#xff1a; [rootlocalhost conf.d]# vim vhost.conf <directory /www> allowoverride none requi…

关于小爱同学自定义指令执行

1.前言 之前买了小爱同学音响&#xff0c;一直想让其让我的生活变得更智能&#xff0c;编写一些程序来完成一些自动化任务&#xff0c;但是经过搜索发现&#xff0c;官方开发者平台不能用了&#xff0c;寻找api阶段浪费了我很长时间。最后在github 开源项目发现了俩个比较关键…

13.SQL注入-宽字节

SQL注入-宽字节 含义&#xff1a; MySQL是用的PHP语言&#xff0c;然后PHP有addslashes()等函数&#xff0c;这类函数会自动过滤 ’ ‘’ null 等这些敏感字符&#xff0c;将它们转义成’ ‘’ \null&#xff1b;然后宽字节字符集比如GBK它会自动把两个字节的字符识别为一个汉…

内容营销专家刘鑫炜:网站排名需考虑哪些SEO优化技巧?

网站排名的SEO优化技巧包括&#xff1a; 1. 关键词研究&#xff1a;了解目标受众的搜索关键词&#xff0c;将这些关键词合理地应用在网站的标题、描述、正文和标签中&#xff0c;有助于提高网站排名。 2. 内容优化&#xff1a;创建高质量、有价值的内容&#xff0c;可以吸引搜…

Qt源码解析之QObject

省去大部分virtual和public方法后&#xff0c;Qobject主要剩下以下成员&#xff1a; //qobject.h class Q_CORE_EXPORT Qobject{Q_OBJECTQ_PROPERTY(QString objectName READ objectName WRITE setObjectName NOTIFY objectNameChanged)Q_DECLARE_PRIVATE(QObject) public:Q_I…

STM32-OC输出比较和PWM

本内容基于江协科技STM32视频内容&#xff0c;整理而得。 文章目录 1. OC输出比较和PWM1.1 OC输出比较1.2 PWM&#xff08;脉冲宽度调制&#xff09;1.3 输出比较通道&#xff08;高级&#xff09;1.4 输出比较通道&#xff08;通用&#xff09;1.5 输出比较模式1.6 PWM基本结…

MATLAB常用语句总结7

MATLAB总结7&#xff1a;常见错误归纳 本篇专门用于记录一些应试技巧 文章目录 MATLAB总结7&#xff1a;常见错误归纳前言一、一些小定义和小技巧二、蒙塔卡罗求解方法1.函数的定义2.函数引用3.代码量较少的蒙塔卡罗 三、函数引用与多变量四、矩阵引用五、非线性函数&#xff…

14-39 剑和诗人13 - 顶级大模型测试分析和建议

​​​​​ 随着对高级语言功能的需求不断飙升&#xff0c;市场上涌现出大量语言模型&#xff0c;每种模型都拥有独特的优势和功能。然而&#xff0c;驾驭这个错综复杂的生态系统可能是一项艰巨的任务&#xff0c;开发人员和研究人员经常面临选择最适合其特定需求的模型的挑战。…

哈弗架构和冯诺伊曼架构

文章目录 1. 计算机体系结构 2. 哈弗架构&#xff08;Harvard Architecture&#xff09; 3. 改进的哈弗架构 4. 冯诺伊曼架构&#xff08;Von Neumann Architecture&#xff09; 5. 结构对比 1. 计算机体系结构 计算机体系结构是指计算机系统的组织和实现方式&#xff0c…

Python | Leetcode Python题解之第220题存在重复元素III

题目&#xff1a; 题解&#xff1a; class Solution(object):def containsNearbyAlmostDuplicate(self, nums, k, t):from sortedcontainers import SortedSetst SortedSet()left, right 0, 0res 0while right < len(nums):if right - left > k:st.remove(nums[left]…

Python基础问题汇总

为什么学习Python&#xff1f; 易学易用&#xff1a;Python语法简洁清晰&#xff0c;易于学习。广泛的应用领域&#xff1a;适用于Web开发、数据科学、人工智能、自动化脚本等多种场景。强大的库支持&#xff1a;拥有丰富的第三方库&#xff0c;如NumPy、Pandas、TensorFlow等…