无缝循环网格

发布时间 2026-01-30 08:54:03
阅读量加载中...
效果预览

此演示仅在桌面端浏览器中可用
代码展示

     html
    
  
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>wanglei.live</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      .box {
        width: 415px;
        margin: 10px auto;
        overflow: hidden;
      }

      .box:hover .scroll {
        animation-play-state: paused;
      }

      .scroll {
        display: flex;
        width: 840px;
        animation: move 6s linear infinite;
      }

      .item1 > * {
        width: 100px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border-radius: 3px;
        background-color: #ccc;
      }

      .item1 {
        display: grid;
        grid-template-columns: repeat(4, 100px);
        grid-template-rows: repeat(3, 50px);
        gap: 8px 5px;
        margin-right: 5px;
      }

      @keyframes move {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-420px);
        }
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="scroll">
        <div class="item1">
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
          <div>10</div>
          <div>11</div>
          <div>12</div>
        </div>
        <div class="item1">
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
          <div>10</div>
          <div>11</div>
          <div>12</div>
        </div>
      </div>
    </div>
  </body>
</html>
#动画 #Grid