div内ul li区域纯CSS实现向上滚动，鼠标移动暂停的效果

• 技术文档 • 阅读 2 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>滚动列表</title>
  <style>
    .scroll-wrapper {
      overflow: hidden;
      height: 200px; /* 设置显示区域的高度 */
    }

    .scroll-list {
      list-style: none;
      margin: 0;
      padding: 0;
      animation: scroll-up 20s linear infinite; /* 滚动动画 */
    }

    .scroll-list li {
      margin-bottom: 10px; /* 设置相邻li元素之间的间距 */
    }

    @keyframes scroll-up {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(-100%);
      }
    }

    .scroll-list li:last-of-type {
      margin-bottom: 0; /* 去掉最后一个li元素的间距 */
    }
  </style>
</head>
<body>
  <div class="scroll-wrapper">
    <ul class="scroll-list">
      <li>第一条内容</li>
      <li>第二条内容</li>
      <li>第三条内容</li>
      <li>第四条内容</li>
      <li>第五条内容</li>
      <li>第六条内容</li>
      <li>第七条内容</li>
      <li>第八条内容</li>
      <li>第九条内容</li>
      <li>第十条内容</li>
    </ul>
  </div>
</body>
</html>

原创文章，作者：草根站长，如若转载，请注明出处：https://www.jianzhanben.com/jishu/992.html

赞 (0)
上一篇 2023年5月18日 下午1:25
下一篇 2023年5月18日 下午3:09

相关推荐