css实现响应式图片横向堆叠丝滑滚动切换效果代码-html代码-BFW代码库

css实现响应式图片横向堆叠丝滑滚动切换效果代码

代码语言：html

所属分类：响应式

代码描述：css实现响应式图片横向堆叠丝滑滚动切换效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>

@keyframes slide-in {
  from {
    transform: translateX(-100cqi) scale(.75);
  }
}

.scroll-stack {
  container-type: inline-size;
  inline-size: 100cqi;

  display: grid;
  grid-auto-flow: column;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;

  gap: 1rem;
  padding-inline: 1rem;
  scroll-padding-inline: 1rem;
  padding-block: 30px 60px;

  /* the before and afters have unsnappable elements that create bouncy edges to the scroll */
  &::before,
  &::after {
    content: '';
    display: block;
  }

  &::before {
    order: 0;
    inline-size: 25cqi;
  }

  &::after {
    order: 11;
    inline-size: 80cqi;
  }

  /* 
    snap on the item, which is untransformed
    also order is changed to last item is on top
  */
  .item {
    scroll-snap-align: start;

    &:nth-child(1) { order: 10; z-index: 1; }
    &:nth-child(2) { order: 9; z-index: 2; }
    &:nth-child(3) { order: 8; z-index: 3; }
    &:nth-child(4) { order: 7; z-index: 4; }
    &:nth-child(5) { order: 6; z-index: 5; }
    &:nth-child(6) { order: 5; z-index: 6; }
    &:nth-child(7) { order: 4; z-index: 7; }
    &:nth-child(8) { order: 3; z-index: 8; }
    &:nth-.........完整代码请登录后点击上方下载按钮下载查看