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

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

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向上滚动效果_第1张图片

你可能感兴趣的:(javascript,前端,css)