CSS 实现轮播图

<div className={styles.banner} >
                <div className={styles.wrapper} >
                  <ul className={styles.shufflingBody}>
                    <li className={styles.shuffling}>1</li>
                    <li className={styles.shuffling}>2</li>
                    <li className={styles.shuffling}>3</li>
                    <li className={styles.shuffling}>4</li>
                  </ul>
                </div>
              </div>

.banner {
  width: 300px;
  height: 200px;
}

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.shuffling {
  width: 300px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  float: left;
}

.shufflingBody {
  position: absolute;
  overflow: hidden;
  display: flex;
  width: 1200px;
  height: 200px;
  animation: loop 10s ease-in-out infinite;
  top: 0;

  li {
    &:nth-child(1) {
      background-color: red;
      left: 0;
    }

    &:nth-child(2) {
      background-color: green;
      left: 300px;
    }

    &:nth-child(3) {
      background-color: aqua;
      left: 600px;
    }

    &:nth-child(4) {
      background-color: blue;
      left: 900px;
    }
  }
}

@keyframes loop {

  0% {
    transform: translate(0);
  }

  25% {
    transform: translate(-300px);
  }

  50% {
    transform: translate(-600px);
  }

  75% {
    transform: translate(-900px);
  }

  100% {
    transform: translate(0);
  }
}