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-child(9) { order: 2; z-index: 9; }
  }

  /* 
    magic is here, a child of the snapped item 
    animates items as they cross the viewport view()
    range is set to create the effect
  */
  figure {
    @supports (animation-timeline: view()) {
      @media (prefers-reduced-motion: no-preference) {
        animation: slide-in linear both;
        animation-timeline: view(inline);
        animation-range: cover -75cqi contain 20cqi;
      }
    }

    flex-shrink: 0;
    block-size: 80cqb;
    aspect-ratio: 9/16;
    background: light-dark(#ccc, #444);
    box-shadow: var(--shadow-5);
    border-radius: 20px;
    overflow: clip;

    display: flex;

    @container (width < 480px) {
      block-size: 50cqb;
    }

    > img {
.........完整代码请登录后点击上方下载按钮下载查看