编程技术

Document

CSS无缝轮播广告条

<html>

<body>
  <div class="contiainer" style="--t:10s">
    <div class="animate-translateX-100">
      <span>html</span>
      <span>css</span>
      <span>js</span>
      <span>php</span>
      <span>jave</span>
      <span>vue</span>
    </div>
    <div class="animate-translateX-200">
      <span>html</span>
      <span>css</span>
      <span>js</span>
      <span>php</span>
      <span>jave</span>
      <span>vue</span>
    </div>
  </div>
</body>


</html>



<head>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    .contiainer {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 700px;
      overflow: hidden;
      background-color: yellowgreen;
    }

    .contiainer div {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .contiainer div span {
      margin: 10px;
      letter-spacing: .2em;
      background-color: black;
      color: #fff;
      padding: 6px 10px;
      border-radius: 4px;
    }

    @keyframes animation-zvipcu {
      from {
        transform: translate(100%);
      }

      to {
        transform: translate(-100%);
      }
    }

    .animate-translateX-100 {
      animation: animation-zvipcu 10s linear infinite;
      background-color: red;
    }

    @keyframes animation-zvipcu02 {
      from {
        transform: translate(0);
      }

      to {
        transform: translate(-200%);
      }
    }

    .animate-translateX-200 {
      animation: animation-zvipcu02 10s linear infinite;
      animation-delay: calc(10s / -2);
      background-color: green;
    }
  </style>
</head>

小计：当宽度过宽时，需要将数组重复几遍，使数组的宽度达到你设置的宽度即可。