css+div实现照片相册堆叠切换动画效果代码-html代码-BFW代码库

css+div实现照片相册堆叠切换动画效果代码

代码语言：html

代码描述：css+div实现照片相册堆叠切换动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        /* number of images*/
        .gallery {
          --d: 10s;
          /* duration */
          display: grid;
          width: 220px;
        }
        
        .gallery > img {
          grid-area: 1/1;
          width: 100%;
          aspect-ratio: 1;
          object-fit: cover;
          border: 10px solid #f2f2f2;
          box-shadow: 0 0 4px #0007;
          animation: slide var(--d) infinite;
        }
        
        .gallery img:last-child {
          animation-name: slide-last;
        }
        
        .gallery > img:nth-child(1) {
          animation-delay: calc(0*var(--d));
          --r: 8deg;
        }
        
        .gallery > img:nth-child(2) {
          animation-delay: calc(-0.2*var(--d));
          --r: 13deg;
        }
        
        .gallery > img:nth-child(3) {
          animation-delay: calc(-0.4*var(--d));
          --r: 15deg;
        }
        
        .gallery > img:nth-child(4) {
          animation-delay: calc(-0.6*var(--d));
          --r: -12deg;
        }
        
        .gallery > img:nth-child(5) {
          animation-delay: calc(-0.8*var(--d));
          --r: -8deg;
        }
        
        @keyframes slide {
          0%, 100%, 80.01% {
            transform: translateX(0%) rotate(var(--r));
            z-index: 3;
          }
          10% {
            transform: translateX(120%) rotate(var(--r));
            z-index: 3;
          }
          10.01% {
            transform: translateX(120%) rotate(var(--r));
            z-index: -3;
          }
          20%, 80% {
            transform: translateX(0%) rotate(var(--r));
            z-index: -3;
.........完整代码请登录后点击上方下载按钮下载查看