图片轮播的 CSS 动画

Question

我正在创建一个不使用 javascript 的轮播组件。

我设法非常接近我想要的东西，但我自己的动画有问题。

我希望幻灯片连续不断地动画化。 在这个例子中，我想在“G”框之后是“A”框等等。

我真的希望这段代码可以在没有 JS 的情况下工作。非常欢迎任何改进代码和实现此目标的提示！

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}


.st-carousel-container {
            display: flex;
            align-items: center;
      
      position: absolute;
      top: 0;
      align-items: center;
      bottom: 0;
      left: 0;
      right: 0;
        }

        .st-carousel {
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            padding-left: 48px;
            padding-right: 48px;
            position: relative;
        }

        .st-carousel__screen {
            overflow: hidden;
            margin-left: -16px;
            margin-right: -16px;
        }

        .st-carousel__track {
            font-size: 0;
            transition: all 0.3s ease 0s;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch;
        }

        .st-carousel__item {
            display: inline-flex;
            padding-left: 16px;
            padding-right: 16px;
            vertical-align: top;
            white-space: normal;
        }

        .st-carousel__item--desktop-in-1 {
            width: 100%;
        }

        .st-carousel__item--desktop-in-2 {
            width: 50%;
        }

        .st-carousel__item--desktop-in-3 {
            width: 33.3333333333%;
        }

        .st-carousel__item--desktop-in-4 {
            width: 25%;
        }

        .st-carousel__item--desktop-in-5 {
            width: 20%;
        }

        .st-carousel__item-content {
            color: #fff;
            display: flex;
            font-weight: 100;
            align-items: center;
            justify-content: center;
            text-transform: uppercase;
            border-radius: 3px;
            font-size: 56px;
            height: 250px;
            width: 100%;
        }

        .st-carousel__item:nth-child(1) .st-carousel__item-content {
            background-color: #216485;
        }

        .st-carousel__item:nth-child(2) .st-carousel__item-content {
            background-color: #3692b6;
        }

        .st-carousel__item:nth-child(3) .st-carousel__item-content {
            background-color: #6fccc9;
        }

        .st-carousel__item:nth-child(4) .st-carousel__item-content {
            background-color: #a6e3cf;
        }

        .st-carousel__item:nth-child(5) .st-carousel__item-content {
            background-color: #aff0be;
        }

        .st-carousel__item:nth-child(6) .st-carousel__item-content {
            background-color: #527059;
        }

        .st-carousel__item:nth-child(7) .st-carousel__item-content {
            background-color: #243127;
        }

        @media screen and (max-width: 1023px) {
            .st-carousel {
                padding-left: 0;
                padding-right: 0;
            }

            .st-carousel__screen {
                margin-left: 0;
                margin-right: 0;
            }

            .st-carousel__track {
                overflow-x: auto;
                width: auto;
                padding-left: 48px;
                padding-right: 48px;
            }

            .st-carousel__item--tablet-in-1 {
                width: 90%;
            }

            .st-carousel__item--tablet-in-2 {
                width: 45%;
            }

            .st-carousel__item--tablet-in-3 {
                width: 30%;
            }
        }
        @media screen and (max-width: 650px) {
            .st-carousel__track {
                padding-left: 0;
                padding-right: 0;
            }

            .st-carousel__item--mobile-in-1 {
                width: 90%;
            }

            .st-carousel__item--mobile-in-2 {
                width: 45%;
            }

            .st-carousel__item--mobile-in-3 {
                width: 30%;
            }
        }

        .st-carousel__track {
            animation: slide 16s infinite;
        }

        @keyframes slide {
            /*0%   { transform: translateX(0); }*/
            /*20%  { transform: translateX(-100%); }*/
            /*40%  { transform: translateX(-100%); }*/
            /*60%  { transform: translateX(-200%); }*/
            /*80%  { transform: translateX(-200%); }*/
            /*100% { transform: translateX(-300%); }*/

            0%   { transform: translateX(0); }
            25%  { transform: translateX(0); }
            30%  { transform: translateX(-100%); }
            50%  { transform: translateX(-100%); }
            55%  { transform: translateX(-200%); }
            75%  { transform: translateX(-200%); }
            80%  { transform: translateX(-300%); }
            100% { transform: translateX(-300%); }
        }

<div class="st-carousel-container">
        <div class="st-carousel">
            <div class="st-carousel__screen">
                <div class="st-carousel__track">
                    <div class="st-carousel__item st-carousel__item--mobile-in-1 st-carousel__item--tablet-in-2 st-carousel__item--desktop-in-5">
                        <div class="st-carousel__item-content">a</div>
                    </div>
                    <div class="st-carousel__item st-carousel__item--mobile-in-1 st-carousel__item--tablet-in-2 st-carousel__item--desktop-in-5">
                        <div class="st-carousel__item-content">b</div>
                    </div>
                    <div class="st-carousel__item st-carousel__item--mobile-in-1 st-carousel__item--tablet-in-2 st-carousel__item--desktop-in-5">
                        <div class="st-carousel__item-content">c</div>
                    </div>
                    <div class="st-carousel__item st-carousel__item--mobile-in-1 st-carousel__item--tablet-in-2 st-carousel__item--desktop-in-5">
                        <div class="st-carousel__item-content">d</div>
                    </div>
                    <div class="st-carousel__item st-carousel__item--mobile-in-1 st-carousel__item--tablet-in-2 st-carousel__item--desktop-in-5">
                        <div class="st-carousel__item-content">e</div>
                    </div>
                    <div class="st-carousel__item st-carousel__item--mobile-in-1 st-carousel__item--tablet-in-2 st-carousel__item--desktop-in-5">
                        <div class="st-carousel__item-content">f</div>
                    </div>
                    <div class="st-carousel__item st-carousel__item--mobile-in-1 st-carousel__item--tablet-in-2 st-carousel__item--desktop-in-5">
                        <div class="st-carousel__item-content">g</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

我认为下面是参考链接可以帮助你，请检查一次：

Click here

仅举个例子：

    * {
      box-sizing: border-box;
    }
    
    .slider {
      width: 300px;
      text-align: center;
      overflow: hidden;
    }
    
    .slides {
      display: flex;
      
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      
      
      
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      
      /*
      scroll-snap-points-x: repeat(300px);
      scroll-snap-type: mandatory;
      */
    }
    .slides::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    .slides::-webkit-scrollbar-thumb {
      background: black;
      border-radius: 10px;
    }
    .slides::-webkit-scrollbar-track {
      background: transparent;
    }
    .slides > div {
      scroll-snap-align: start;
      flex-shrink: 0;
      width: 300px;
      height: 300px;
      margin-right: 50px;
      border-radius: 10px;
      background: #eee;
      transform-origin: center center;
      transform: scale(1);
      transition: transform 0.5s;
      position: relative;
      
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 100px;
    }
    .slides > div:target {
    /*   transform: scale(0.8); */
    }
    .author-info {
      background: rgba(0, 0, 0, 0.75);
      color: white;
      padding: 0.75rem;
      text-align: center;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      margin: 0;
    }
    .author-info a {
      color: white;
    }
    img {
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    
    .slider > a {
      display: inline-flex;
      width: 1.5rem;
      height: 1.5rem;
      background: white;
      text-decoration: none;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      margin: 0 0 0.5rem 0;
      position: relative;
    }
    .slider > a:active {
      top: 1px;
    }
    .slider > a:focus {
      background: #000;
    }
    
    /* Don't need button navigation */
    @supports (scroll-snap-type) {
      .slider > a {
        display: none;
      }
    }
    
    html, body {
      height: 100%;
      overflow: hidden;
    }
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(to bottom, #74ABE2, #5563DE);
      font-family: 'Ropa Sans', sans-serif;
    }

<div class="slider">
  
  <a href="#slide-1">1</a>
  <a href="#slide-2">2</a>
  <a href="#slide-3">3</a>
  <a href="#slide-4">4</a>
  <a href="#slide-5">5</a>

  <div class="slides">
    <div id="slide-1">
      1
    </div>
    <div id="slide-2">
      2
    </div>
    <div id="slide-3">
      3
    </div>
    <div id="slide-4">
      4
    </div>
    <div id="slide-5">
      5
    </div>
  </div>
</div>