css 停顿轮播动画，竖向滚动

原创已于 2024-01-12 09:48:03 修改 · 763 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2024-01-12 09:46:58 首次发布

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .list-box {
        height: 30px;
        display: flex;
        line-height: 30px;
        overflow: hidden;
      }
      .list-box .list {
        width: 0;
        margin-left: 20px;
        flex: 1;
        animation: scroll 10s ease 1s infinite; /* 应用动画效果 */
      }
      .list-box * {
        margin: 0;
        padding: 0;
        list-style-type: none;
      }

      @keyframes scroll {
        0% {
          transform: translateY(0); /* 第一条信息 */
        }
        20% {
          transform: translateY(-100%); /* 第二条信息 */
        }
        40% {
          transform: translateY(-200%); /* 第三条信息 */
        }
        60% {
          transform: translateY(-300%); /* 第四条信息 */
        }
        80% {
          transform: translateY(-400%); /* 第五条信息 */
        }
        100% {
          transform: translateY(-480%); /* 最终位置,防止空白和回退 */
        }
      }
    </style>
  </head>
  <body>
    <div class="list-box">
      <h4 class="title">资讯：</h4>
      <ul class="list">
        <li>第一条信息</li>
        <li>第二条信息</li>
        <li>第三条信息</li>
        <li>第四条信息</li>
        <li>第五条信息</li>
      </ul>
    </div>
  </body>
</html>