css卡片层叠堆积式悬浮显示照片效果代码
代码语言:html
所属分类:悬停
代码描述:css卡片层叠堆积式悬浮显示照片效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Anek+Bangla&family=Pacifico&display=swap" rel="stylesheet"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic'> <style> .gallery { margin: auto; height: 100%; width: clamp(20rem, 50vmin, 100%); position: relative; perspective: 1000px; transform-style: preserve-3d; } .gallery:hover .gallery-figure { transition: transform 0.4s cubic-bezier(0.19, 0.14, 0, 1.32), z-index 0s 0.1s linear; } .gallery:hover .gallery-figure:nth-child(4) { --x: 0; --z: 100; --scale: 1; --rotate: 0deg; } .gallery:hover .gallery-figure:nth-child(3) { --x: -4; --z: 40; --scale: 0.95; --rotate: 8deg; } .gallery:hover .gallery-figure:nth-child(3):hover { --x: 0; --z: 100; --scale: 1; --rotate: 0deg; } .gallery:hover .gallery-figure:nth-child(3):hover ~ .gallery-figure { --x: 8; --z: 80; --scale: 0.95; --rotate: -8deg; } .gallery:hover .gallery-figure:nth-child(2) { --x: -8; --z: 0; --scale: 0.9; --rotate: 12deg; } .gallery:hover .gallery-figure:nth-child(2):hover { --x: 0; --z: 100; --scale: 1; --rotate: 0deg; } .gallery:hover .gallery-figure:nth-child(2):hover ~ .gallery-figure:nth-child(3) { --x: 8; --z: 80; --scale: 0.95; --rotate: -8deg; } .gallery:hover .gallery-figure:nth-child(2):hover ~ .gallery-figure:nth-child(4) { --x: 12; --z: 40; --scale: 0.9; --rotate: -12deg; } .gallery:hover .gallery-figure:nth-child(1) { --x: -12; --z: -40; --scale: 0.85; --rotate: 16deg; } .gallery:hover .gallery-figure:nth-child(1):hover { --x: 0; --z: 100; --scale: 1; --rotate: 0deg; } .gallery:hover .gallery-figure:nth-child(1):hover ~ .gallery-figure:nth-child(2) { --x: 8; --z: 80; --scale: 0.95; --rotate: -8deg; } .gallery:hover .gallery-figure:nth-child(1):hover ~ .gallery-figure:nth-child(3) { --x: 12; --z: 40; --scale: 0.9; --rotate: -12deg; } .gallery:hover .gallery-figure:nth-child(1):hover ~ .gallery-figure:nth-child(4) { --x: 16; --z: 0; --scale: 0.85; --rotate: -16deg; } .gallery-figure { position: absolute; width: 80%; aspect-ratio: 1/1; box-shadow: 0 0 0 6px #fff; transform: scale(var(--scale, 1)) rotateY(var(--rotate, 0deg)) translateY(-50%) translateZ(calc(var(--z, 0) * 1px)) translateX(calc(var(--x, 0) * 1%)); z-index: var(--z); transition: transform 0.2s ease; margin: 0; } .gallery-figure:nth-child(1) { top: 40%; left: 0; } .gallery-figure:nth-child(2) { top: 45%; left: 10%; } .gallery-figure:nth-child(3) { top: 50%; left: 20%; } .gallery-figure:nth-child(4) { top: 55%; left: 30%; } .gallery-figure::before, .gallery-figure::after { content: ""; position: absolute; } .gallery-figure::before { width: 1.2vmin; aspect-ratio: 1/1; background-color: #bf360c; top: 0; right: 0; clip-path: polygon(0% 0%, 100% 0%, 100% 100%); z-index: 1; } .gallery-figure::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(128deg, black, rgba(0, 0, 0, 0)); opacity: 0.6; mix-blend-mode: overlay; filter: sepia(0.2) brightness(1.15) saturate(1.4); } .gallery-image { display: block; object-fit: cover; height: 100%; width: 100%; } .gallery-caption { height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 5; padding: 0.5rem 1rem; line-height: 1..........完整代码请登录后点击上方下载按钮下载查看
网友评论0