console 命令行工具 X clear

console

view.addEventListener('animationiteration', () => {
    const current = view.querySelector('.current') || view.firstElementChild;
    current.classList.remove('current')
    if (current.nextElementSibling) {
      current.nextElementSibling.classList.add('current')
    } else {
      view.firstElementChild.classList.add('current')
    }
  })
  view.addEventListener('click',ev => {
    let current = view.querySelector('.current') || view.firstElementChild 
    current.classList.remove('current')
    ev.target.closest('.item').classList.add('current')
  })

<body>
    <p>FireFox 不兼容</p>
    <div class="view" id="view">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item current">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
    </div>
</body>

 html , body {
    margin: 0;
    height: 100%;
    display: grid;
    place-content: center;
  }

  .view {
    position: relative;
    width: 400px;
    height: 250px;
    perspective: 500px;
    counter-reset: num 0;
    transform-style: preserve-3d;
    animation: scroll 3s infinite;
  }

  .view:hover {
    animation-play-state: paused;
  }

  .item {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    display: grid;
    place-content: center;
    counter-increment: num;
    background-color: blueviolet;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    color: #fff;
    transition: 2s;
    transform: translate3d(0, 0, -100px);
    
  }

  .item:nth-child(3n) {
    background-color: pink;
  }

  .item:nth-child(3n+1) {
    background-color: red;
  }

  .item:nth-child(3n+2) {
    background-color: green;
  }

  /*当前项*/
  .item.current {
    transform: translate3d(0, 0, 0);
  }

  /*当前项右1*/
  .item.current+.item,
  .item:first-child:has(~.item.current:last-child) {
    transform: translate3d(30%, 0, -100px);
  }

  /*当前项左1*/
  .item:has(+.item.current),
  .item.current:first-child~.item:last-child {
    transform: translate3d(-30%, 0, -100px);
  }

  /*当前项右2*/
  .item.current+.item+.item,
  .item:first-child:has(~ .item.current:nth-last-child(2)),
  .item:nth-child(2):has(~ .item.current:last-child) {
    transform: translate3d(50%, 0, -150px);
  }

  /*当前项左2*/
  .item:has(+ .item + .item.current),
  .item.current:first-child~.item:nth-last-child(2),
  .item.current:nth-child(2)~.item:last-child {
    transform: translate3d(-50%, 0, -150px);
    opacity: 1;
  }



  @keyframes scroll {
    to {
      transform: translateZ(.1px);
    }
  }