原生HTML实现marquee向上滚动效果

不爱搬砖的码农2023-09-21 17:04

实现原理：借助CSS3中animation动画以及原生JS克隆API

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文字向上滚动效果</title>
    <style>
      .marquee-view {
        width: fit-content;
        height: 300px;
        background-color: #000;
        overflow: hidden;
      }

      .row {
        display: flex;
        justify-content: space-between;
        line-height: 1.05;
        color: #ffffff;
        padding: 15px;
        cursor: pointer;
      }

      .marquee {
        animation: move 5s linear infinite;
      }

      @keyframes move {
        0% {
          transform: translateY(0);
        }
        100% {
          transform: translateY(-50%);
        }
      }
    </style>
  </head>
  <body>
    <div class="marquee-view">
      <div class="marquee">
        <div class="row">
          <span>我是滚动文字</span>
        </div>
        <div class="row">
          <span>我是滚动文字</span>
        </div>
        <div class="row">
          <span>我是滚动文字</span>
        </div>
        <div class="row">
          <span>我是滚动文字</span>
        </div>
        <div class="row">
          <span>我是滚动文字</span>
        </div>
        <div class="row">
          <span>我是滚动文字</span>
        </div>
        <div class="row">
          <span>我是滚动文字</span>
        </div>
      </div>
    </div>
  </body>

  <script>
    const marquee = document.querySelectorAll(".marquee-view .marquee");
    marquee.forEach((item) => {
      var rows = item.children;
      // 克隆子节点并将其附加到 .marquee 元素中
      Array.from(rows).forEach((row) => {
        var clone = row.cloneNode(true);
        item.appendChild(clone);
      });
    });
  </script>
</html>

原生HTML实现marquee向上滚动效果

实现原理：借助CSS3中animation动画以及原生JS克隆API

实现效果：