css+div实现三维立体图片幻灯片滚动效果代码-html代码-BFW代码库

代码语言：html

所属分类：幻灯片

代码描述：css+div实现三维立体图片幻灯片滚动效果代码，鼠标滚轮可滚动翻页，空格键也能操控。

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

<!DOCTYPE html>
<html lang="en" style="--n: 18" >

<head>
  <meta charset="UTF-8">
  
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@500&family=Saira:ital@0;1&family=Sour+Gummy:wdth,wght@125,300&display=swap" rel="stylesheet">
  
  
  
<style>
@property --k {
        syntax: '<number>';
        initial-value: -1;
        inherits: true
}

@property --ang {
        syntax: '<angle>';
        initial-value: 0deg;
        inherits: false
}

* { margin: 0 }

html {
        scrollbar-width: none;
        height: calc(var(--n)*100%)
}

body, header, main, section, 
article, figure { display: grid }

body {
        --dir: 0;
        grid-template-rows: max-content 1fr max-content;
        position: fixed;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        color: #dedede;
        font: clamp(.625em, 3vmin, 1.5em)/ 1.25 saira, sans-serif;
        animation: k 1s linear;
        animation-timeline: scroll();
        
        &::before {
                position: absolute;
                inset: 0;
                z-index: -1;
                background: #000;
                filter: url(#grain);
                content: ''
        }
        
        @media (max-aspect-ratio: 2/ 3) { --dir: 1 }
}

svg[height='0'][aria-hidden='true'] { position: fixed }

header {
        place-content: center;
        place-items: center;
        padding: .5em;
        text-align: center;
        text-wrap: balance
}

h1, h2 {
        //font-family: sour gummy, cursive;
        //font-weight: 300
}

em { max-width: 32em }

main {
        overflow: hidden;
        perspective: 50em
}

@keyframes k { to { --k: 1 } }

section, article { transform-style: preserve-3d }

section {
        --r: calc(2 + var(--dir))/ 3;
        --w: clamp(4em, min(50vh, 25vw), 18em);
        --z: calc(var(--f, 1.25)*-.5*var(--w)/tan(.5turn/var(--n)));
        place-self: center;
        translate: 0 0 var(--z);
        rotate: var(--dir) calc(1 - var(--dir)) 0 calc((var(--k) + .5)*-1turn);
}

article, header, figure, img, figcaption { grid-area: 1/ 1 }

article {
        /* item progress value */
        --j: var(--i)/var(--n);
        /* linear difference between this item's progress value  
         * and progress value of highlighted item in front - 
         * it's a value in the [0, 1] interval */
        --dif-lin: calc(var(--j) - mod(var(--k) + 1, 1));
        /* absolute value of linear difference */
        --abs-lin: abs(var(--dif-lin));
        /* difference between middle & absolute linear difference */
        --dif-mid: calc(.5 - var(--abs-lin));
        --abs-mid: abs(var(--dif-mid));
        /* relative distance to from this item 
         * to highlighted one in front */
        --dif-arc: calc(2*(.5 - var(--abs-mid)));
        /* relative distance limit */
        --lim: .35;
        --sel: max(0, calc((var(--lim) - var(--dif-arc))/var(--lim)));
        --out: calc(1 - var(--sel));
        --hov: 0;
        width: var(--w);
        aspect-ratio: var(--r);
        transform: 
                rotate3d(var(--dir), calc(1 - var(--dir)), 0, calc(var(--j)*1turn))
                translatez(var(--z))
                rotate(calc(var(--dir)*.5turn));
        
        header { rotate: y calc(var(--hov)*.5turn) }
        
        &:hover, &:focus-within { --hov: round(var(--sel)) }
}

article header, figure {
        --ang: calc(-45deg + var(--hov)*180deg);
        overflow: hidden;
        position: relative;
        border: solid 4px #0000;
        border-radius: .5em;
        backface-visibility: hidden;
        box-shadow: 5px 5px 13px #000;
        background: 
                var(--url) 50%/ cover padding-box, 
                linear-gradient(#333 0 0) padding-box, 
                repeating-conic-gradient(from var(--ang), 
                                #0000 0% 15%, 
                                color-mix(in srgb, 
                                        #f48c06 calc(var(--sel)*100%), #333) 20% 30%, 
                                #0000 35% 50%) 
                        border-box #121212;
        background-blend-mode: multiply, normal, normal;
        isolation: isolate;
        /* prevent edge glitching on article hover */
        pointer-events: none;
        transition: .35s ease-out;
        transition-property: rotate, --ang;
        
        &::after {
                position: absolute;
                inset: 0;
                opacity: var(--out);
                background: #03071e;
                mix-blend-mode: color;
                pointer-events: none;
                content: ''
        }
}

/* reverse from parent */
h2, em, img, a { pointer-events: auto }

h2, em { opacity: round(up, var(--sel)) }

h2 { font-size: 1.125em }

figure { rotate: y calc((1 + var(--hov))*.5turn) }

img {
        width: 100%;
        height: 100%;
        aspect-ratio: var(--r);
        object-fit: cover;
        object-position: var(--pos)
}

figcaption {
        align-self: end;
        padding: .5em;
        background: #fff3;
        color: #040404;
        font: Max(.75rem, .75em) caveat, cursive;
        text-align: right;
        text-shadow: 1px 1px 1px #0006;
        backdrop-filter: blur(5px) brightness(1.5);
        
        a { color: #370617 }
}

/* just support info */
aside {
        position: fixed;
        bottom: 0;
        padding: .5em;
}

.box-info-scrollani {
        margin: .5em;
        border-left: solid 5px #dc3055;
        padding: .75em;
        box-shadow: 2px 2px 5px hsla(0, 0%, 0%, .35);
        background: #851d40;
        color: #fff;
        font: 1em/ 1.25 ubuntu, trebuchet ms, arial, sans-serif;
        
        @supports (animation-timeline: scroll()) { display: none }
}

kbd {
        padding: 2px;
        background: hsla(0, 0%, 0%, .35);
        font: 1.1em/ 1.2 ubuntu mono, consolas, monaco, monospace
}
</style>


  
</head>


  <body >
    <svg width="0" height="0" aria-hidden="true">
      <filter id="grain">
        <feTurbulence type="fractalNoise" baseFrequency="7.13"></feTurbulence>
        <feColorMatrix type="saturate" values="0"></feColorMatrix>
        <feComponentTransfer>
          <feFuncA type="linear" slope=".02"></feFuncA>
        </feComponentTransfer>
        <feBlend in2="SourceGraphic"></feBlend>
      </filter>
    </svg>
    <header>
      <h1>Infinite scroll circular gallery</h1><strong>scroll up & down/ use up & .........完整代码请登录后点击上方下载按钮下载查看