CSS实战笔记(六) 无缝轮播图

1、效果演示

2、完整代码

<!DOCTYPE html>
<html>

<head>
  <style>
    html {
      background-color: white;
       100%;
      height: 100%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    .frame {
       500px;
      min- 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;
       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>
【阅读更多 CSS 系列文章，请看 CSS学习笔记】