无限滚动逻辑梳理及代码教练，超简单纯纯css实现

最新推荐文章于 2024-06-25 10:03:40 发布

是你前端伟哥

最新推荐文章于 2024-06-25 10:03:40 发布

阅读量217

点赞数

文章标签： css css3 动画

本文链接：https://blog.csdn.net/weixin_47705597/article/details/130985240

版权

该文章通过CSS代码示例展示了如何创建一个滚动的div盒子，解决滚动过程中的空白问题。利用@keyframes定义动画，设置transform属性实现内容的平移，以及通过animation属性应用动画，实现无限循环的滚动效果。同时，通过将盒子的高度设置为非固定值，适应内容动态变化的需求。

摘要由CSDN通过智能技术生成

主要css代码讲解animation动画：动画名称动画时间线性类型停顿地点（也就是动画结束之后要怎么继续）

逻辑梳理讲解：
1.制作一个div盒子溢出隐藏
在这里插入图片描述
2.盒子内装滚动的大盒子我们装这个盒子主要目的是用来css动画书写
做动画的盒子不要限制高度哦。盒子里边的内容也是不固定高低的，所以我们就不限制高度

3.然后你发现滚动的时候有空白，解决方法再复制同样一份第二步说的滚动盒子及内容完美解决。
在这里插入图片描述

在这里插入图片描述

如果你觉得这个滚动够简单，不妨收藏点赞方便后续借鉴。。。

代码片段如下：

<!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>

    <style>
      @keyframes scroll-top {
        0% {
          transform: translateY(0%);
        }
        100% {
          transform: translateY(-100%);
        }
      }
      ul {
        margin: 0;
        padding: 0;
        animation: scroll-top 3s linear infinite;
      }
      ul li {
        list-style: none;
        height: 100px;
        line-height: 100px;
        text-align: center;
      }
      .wrap {
        margin: 0 auto;
        width: 400px;
        height: 600px;
        overflow: hidden;
        border: 1px solid #000;
        border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ul>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ul>
    </div>
  </body>
</html>

是你前端伟哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
无限滚动逻辑梳理及代码教练，超简单纯纯css实现

主要css代码讲解animation动画：动画名称动画时间线性类型停顿地点（也就是动画结束之后要怎么继续）3.然后你发现滚动的时候有空白，解决方法再复制同样一份第二步说的滚动盒子及内容完美解决。做动画的盒子不要限制高度哦。盒子里边的内容也是不固定高低的，所以我们就不限制高度。2.盒子内装滚动的大盒子我们装这个盒子主要目的是用来css动画书写。1.制作一个div盒子溢出隐藏。
复制链接

扫一扫