无缝轮播走马灯

最新推荐文章于 2024-01-31 21:56:38 发布

燃情雪

最新推荐文章于 2024-01-31 21:56:38 发布

阅读量456

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/h1234561234561/article/details/90763471

版权

css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>轮播图</title>
    <style>
      .wrap {
        position: relative;
        width: 400px;
        height: 300px;
        overflow: hidden;
        margin: 100px auto 0;
        border: 2px solid red;
      }
      .wrap-imageList {
        position: absolute;
        left: 0px;
        width: 1200px;
        height: 300px;
        background-color: black;
      }
      .wrap-imageList-image {
        float: left;
        width: 400px;
        height: 300px;
      }
      .animationBefore {
        animation: animationBefore 12s infinite;
        animation-fill-mode: forwards;
      }
      .animationAfter {
        animation: animationAfter 12s infinite;
        animation-fill-mode: none;
      }
      @keyframes animationBefore {
        0% {
          left: 0;
        }
        8.3% {
          left: 0;
        }
        16.6% {
          left: -400px;
        }
        24.9% {
          left: -400px;
        }
        33.2% {
          left: -800px;
        }
        41.5% {
          left: -800px;
        }
        49.8% {
          left: -1200px;
        }
        91.2% {
          left: -1200px;
        }
        91.3% {
          left: 400px;
        }
        100% {
          left: 0px;
        }
      }
      @keyframes animationAfter {
        0% {
          left: 400px;
        }
        41.5% {
          left: 400px;
        }
        49.8% {
          left: 0px;
        }
        58.1% {
          left: 0px;
        }
        66.4% {
          left: -400px;
        }
        74.7% {
          left: -400px;
        }
        83% {
          left: -800px;
        }
        91.3% {
          left: -800px;
        }
        100% {
          left: -1200px;
        }
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="wrap-imageList animationAfter" style="left: 400px">
        <img
          class="wrap-imageList-image"
          src="../img/team-style-image-3.png"
          alt=""
        />
        <img
          class="wrap-imageList-image"
          src="../img/team-style-image-5.png"
          alt=""
        />
        <img
          class="wrap-imageList-image"
          src="../img/team-style-image-6.png"
          alt=""
        />
      </div>
      <div class="wrap-imageList animationBefore">
        <img
          class="wrap-imageList-image"
          src="../img/team-style-image-3.png"
          alt=""
        />
        <img
          class="wrap-imageList-image"
          src="../img/team-style-image-5.png"
          alt=""
        />
        <img
          class="wrap-imageList-image"
          src="../img/team-style-image-6.png"
          alt=""
        />
      </div>
    </div>
  </body>
</html>