纯CSS实现轮播图------Sestid

淩亂°似流年 2023-05-29 05:01 5阅读 0赞

### 效果展示 ： ###

![在这里插入图片描述][20191103200824540.gif]

### 代码：  ###

<!DOCTYPE html>
    <html>
    
    <head>
      <style>
        html {
          background-color: white;
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
        }
        .frame {
          width: 500px;
          min-width: 500px;
          height: 300px;
          min-height: 300px;
          border: 5px solid whitesmoke;
          box-shadow: 1px 1px 5px gray;
          position: relative;
          overflow: hidden;
        }
        .slide {
          position: absolute;
          top: 0;
          left: 0;
          opacity: 0;
          width: 100%;
          height: 100%;
        }
        .slide-animation-1 {
          animation: switch-slide-1 10s ease-in-out infinite;
        }
        .slide-animation-2 {
          animation: switch-slide-2 10s ease-in-out infinite;
        }
        .slide-animation-3 {
          animation: switch-slide-3 10s ease-in-out infinite;
        }
        .slide-animation-4 {
          animation: switch-slide-4 10s ease-in-out infinite;
        }
        @keyframes switch-slide-1 {
          0%   { opacity: 1; left: 0px; }
          /* 展示 */
          20%  { opacity: 1; left: 0px; }
          /* 切出 */
          25%  { opacity: 0; left: 500px; }
          /* 归位 */
          26%  { opacity: 0; left: -500px; }
          /* 等待 */
          95%  { opacity: 0; left: -500px; }
          /* 切入 */
          100% { opacity: 1; left: 0px; }
        }
        @keyframes switch-slide-2 {
          0%   { opacity: 0; left: -500px; }
          /* 等待 */
          20%  { opacity: 0; left: -500px; }
          /* 切入 */
          25%  { opacity: 1; left: 0px; }
          /* 展示 */
          45%  { opacity: 1; left: 0px; }
          /* 切出 */
          50%  { opacity: 0; left: 500px; }
          /* 归位 */
          51%  { opacity: 0; left: -500px; }
          /* 等待 */
          100% { opacity: 0; left: -500px; }
        }
        @keyframes switch-slide-3 {
          0%   { opacity: 0; left: -500px; }
          /* 等待 */
          45%  { opacity: 0; left: -500px; }
          /* 切入 */
          50%  { opacity: 1; left: 0px; }
          /* 展示 */
          70%  { opacity: 1; left: 0px; }
          /* 切出 */
          75%  { opacity: 0; left: 500px; }
          /* 归位 */
          76%  { opacity: 0; left: -500px; }
          /* 等待 */
          100% { opacity: 0; left: -500px; }
        }
        @keyframes switch-slide-4 {
          0%   { opacity: 0; left: -500px; }
          /* 等待 */
          70%  { opacity: 0; left: -500px; }
          /* 切入 */
          75%  { opacity: 1; left: 0px; }
          /* 展示 */
          95%  { opacity: 1; left: 0px; }
          /* 切出 */
          100% { opacity: 0; left: 500px; }
        }
      </style>
    </head>
    
    <body>
      <div class="frame">
        <img class="slide slide-animation-1" src="https://cdn.pixabay.com/photo/2014/12/14/12/26/evening-567840__340.jpg" alt="">
        <img class="slide slide-animation-2" src="https://cdn.pixabay.com/photo/2012/03/01/00/21/bridge-19513__340.jpg" alt="">
        <img class="slide slide-animation-3" src="https://cdn.pixabay.com/photo/2017/03/29/15/18/tianjin-2185510__340.jpg" alt="">
        <img class="slide slide-animation-4" src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171__340.jpg" alt="">
      </div>
    </body>
    
    </html>

[20191103200824540.gif]: https://img-blog.csdnimg.cn/20191103200824540.gif