用CSS3实现div内容无限循环的滚动

最新推荐文章于 2024-05-08 10:11:08 发布
最新推荐文章于 2024-05-08 10:11:08 发布
阅读量7k 收藏 17
点赞数 3
分类专栏： css 文章标签： css3 动画 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43258252/article/details/121563552
版权

使用CSS3来实现

若要用CSS3的属性实现的话，非animation莫属，因为transition是需要手动的触发，而且不能无限次执行下去，而animation恰好能解决这个问题。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    @keyframes rowup {
        0% {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        100% {
            -webkit-transform: translate3d(0, -50px, 0);
            transform: translate3d(0, -50px, 0);
        }
    }

    .list {
        width: 300px;
        border: 1px solid #999;
        margin: 20px auto;
        position: rela
最低0.47元/天 解锁文章
人间草木96
关注
  • 3
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS——css3 animation 动画实现元素从右向左循环滚动
qq_43201350的博客
04-05 522
CSS——css3 animation 动画实现元素从右向左循环滚动
用CSS3实现无限循环的无缝滚动的实例代码
09-24
主要介绍了用CSS3实现无限循环的无缝滚动的实例代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS实现div内部的文字或图片自动循环滚动代码
01-19
代码如下: <style type=”text/css”> .content{width:500px;height:300px;position:absolute;left:200px;top:100px;border:solid 2px red;padding:10px;overflow:hidden} dl{width:400px;height:30px;border:1px solid black;} </style> <div class=”content”> <dl> <dt>测试数据1</dt> </dl> <dl> <dt>测试数据2</dt> </dl> <dl> <dt>测试
DIV循环内容滚动
qq_41122834的博客
06-07 852
DIV内容循环滚动
前端如何设置div可滚动，且设置滚动条颜色
最新发布
chenchuang0128的博客
05-08 348
为可滚动并通过 CSS 自定义滚动条的颜色并不是所有浏览器都直接支持的功能，因为滚动条的样式在很大程度上取决于操作系统和浏览器的默认样式。然而，你可以使用某些 CSS 属性来尝试自定义滚动条的外观，这些属性在 WebKit 浏览器（如 Chrome 和 Safari）中得到了支持。请注意，这些自定义滚动条的样式仅在支持 WebKit 的浏览器（如 Chrome、Safari）中有效。如果你需要在所有浏览器中都获得一致的自定义滚动条外观，你可能需要考虑使用第三方 JavaScript 库，如。
vue3实现无限循环滚动的方法；el-table内容无限循环滚动的实现
weixin_51747462的博客
09-09 2145
vue3实现无限循环滚动的方法;el-table内容无限循环滚动的实现;vue3实现无缝衔接无限循环滚动的方法，vue3-seamless-scroll插件
div 滚动
Toml_的博客
06-09 6527
其中，::-webkit-scrollbar用于设置滚动条整体样式，::-webkit-scrollbar-thumb用于设置滚动条滑块样式。以上代码将滚动条宽度设置为 6px，高度设置为 6px，滑块圆角设置为 3px，滑块颜色设置为灰色半透明，滑块轨道颜色设置为浅灰色半透明。将overflow属性设置为auto或scroll，当内容超出div的高度或宽度时，就会出现滚动条。2.给div设置CSS属性overflow为auto或scroll，这将使div在高度范围内滚动。是你要选择的元素的类名。
如果使用div+CSS实现自动轮播效果
qq_33774165的博客
04-26 1937
在 HTML 中编写 div 区域内的内容，并用一个父级元素包裹，在父级元素上增加固定高度和。数量为 2 行 1 个，超过了显示范围的部分被隐藏，当设置。具体的样式和动画时间需要根据具体的需求进行调整。时，则可以全部展示。代码中设置的动画持续时间为。的高度设置为超过容器高度的值，再设置。进行 CSS 样式的设置。实现这个效果可以使用 CSS3 的。的高度，以及实现循环效果，最后在。的高度，实现滚动展示效果，属性则将这个动画应用在了。
循环滚动列表 - scrollBy
抄经书的程序猿
03-14 1262
前几天做列表循环滚动的功能，记录一下。 思路： 正常思路，把滚动列表的第一个元素，接到列表的最后一位，每隐藏一条就在最后一位接上，如此循环； 今天咱们来聊更简单一些的思路，不需要操作每一条元素，但是需要复制一次整体的列表。 要点： 需要用到 scrollTo ，scrollBy 定位；用scrollHeight ，offsetHeight判断。 向左滚动时把scrollTo 换成scrollLeft，调试代码即可。 原生代码如下： 关键点在于，当滚动内容超出窗口高度的..
无限上下滚动的获奖列表
cotexarm7的专栏
01-19 458
获得一份1 获得一份2 获得一份3 获得一份4 获得一份5 获得一份6 获得一份7 获得一份8 获得一份9 获得一份10 获得一份11 获得一份12 获得一份13 css .wrap { width: 400px; height: 200px; border: 1px so
使用 CSS 实现无限滚动效果的方法详解与代码示例
pleaseprintf的博客
08-21 3213
无限滚动效果是一种常见的网页交互方式，可以提供更好的用户体验。本文将介绍如何使用 CSS 实现一个简单的无限滚动效果，并提供详细的代码示例。通过本文，你已经了解了如何使用 CSS 实现一个简单的无限滚动效果。这是一个在网页设计中常用的交互效果，可以使页面看起来更加生动和有趣。希望本文对你理解无限滚动效果并实现相应的代码有所帮助。如果你有任何问题或疑问，欢迎留言讨论。
js 实现div里面的内容滚动，并可以通过按钮控制
03-21
NULL 博文链接：https://yangpanwww.iteye.com/blog/984155
用CSS3实现无限循环的无缝滚动的示例代码
12-02
3.当向上滚动的距离L正好的A的高度时(L==A.height())，L=0，重新开始滚动，无限循环。 克隆一份数据放在后面，是为了当A向上移动时，后面有数据能填补漏出来的空白。当B移动到可视区域的顶部时，此时A刚好移出可视...
在Vue中使用CSS3实现内容无缝滚动的示例代码
01-21
一、效果预览 最近在做一个活动页面，遇到幸运用户中奖的滚动公告需求。下面是实现效果： ...5、循环第3步； 三、代码 1、html部分 <div class=lucky-user> <!-- 容器 --> <ul class
CSS3实现滚动条动画效果代码分享
09-24
本文将详细讲解如何使用CSS3实现一个简单的文字自动滚动的滚动条动画。 首先，我们要在HTML中设置基础结构。创建一个`<body>`元素，然后在其中包含一个`<div>`，用于包裹我们需要滚动的文本。在这个例子中，我们将...
CSS3中的animation属性实现无限循环的无缝滚动
热门推荐
JackieDYH的博客
04-23 1万+
在页面中循环展示信息的功能之前一般是用js来实现的，那么用CSS3该如何实现实现呢 有时候在页面的某个模块中，需要无限循环的滚动一些消息。那么如果我们用js实现无缝衔接滚动的思路是什么呢（比如我们这个模块是向上滚动的）？ 克隆A一份完全一样的数据B放在原数据A的后面； 使用setInterval向上滚动A的父级容器； 当向上滚动的距离L正好的A的高度时(L==A.height())，L=0，重新开始滚动，无限循环。 克隆一份数据放在后面，是为了当A向上移动时，后面有数据能填补
实现循环滚动效果
前端程序媛_Ying博客
09-01 218
【代码】实现循环滚动效果。
css实现自动滚动效果
weixin_43410094的博客
06-02 3870
css实现自动无限滚动+悬浮停止滚动效果
jQuery实现文字无限循环滚动
05-30
可以使用jQuery的animate()方法和定时器实现文字的无限循环滚动。具体步骤如下： 1. 将需要滚动的文字内容包裹在一个容器元素中，将容器元素的宽度设置为文字内容的宽度。 2. 使用定时器，每隔一定时间执行一次滚动动画。 3. 在滚动动画完成后，判断当前滚动到的位置是否超出容器元素的宽度，如果是，则立即将滚动位置重置到原始位置。 下面是一个简单的示例代码： HTML代码： ``` <div class="scroll-wrap"> <div class="scroll-content"> <span>这是一段需要滚动的文字</span> </div> </div> ``` CSS代码： ``` .scroll-wrap { overflow: hidden; } .scroll-content { display: inline-block; white-space: nowrap; } ``` JavaScript代码： ``` $(function() { var $scrollWrap = $('.scroll-wrap'); var $scrollContent = $('.scroll-content'); var scrollWidth = $scrollContent.width(); // 定时器，每隔1秒执行一次滚动动画 setInterval(function() { $scrollContent.animate({ marginLeft: '-=1px' }, 10, function() { // 判断是否超出容器元素的宽度 if ($scrollContent.position().left <= -scrollWidth) { $scrollContent.css({ marginLeft: 0 }); } }); }, 10); }); ``` 在上面的代码中，我们通过计算文字内容的宽度，将滚动容器元素的宽度设置为文字内容的宽度。然后使用定时器每隔一定时间执行一次滚动动画，滚动完成后判断是否超出容器元素的宽度，如果是则重置滚动位置。注意，由于定时器的执行时间不同，所以滚动速度可能会有所不同，需要根据实际情况进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值