原生js+css实现自适应堆叠图片幻灯片切换效果代码
代码语言:html
所属分类:幻灯片
代码描述:原生js+css实现自适应堆叠图片幻灯片切换效果代码
代码标签: 原生js css 自适应 堆叠 图片 幻灯片 切换
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Quicksand:wght@300..700&display=swap"); *, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; font-family: "Quicksand", sans-serif; } body { background-color: #0d0a0b; background: linear-gradient(145deg, #55566a 0%, #131318 76%); } main { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; place-items: center; min-height: 100vh; } /* Content */ .content { padding-left: 120px; color: #c7c7c7c9; } .content h1 { font-family: "Dancing Script", cursive; font-size: clamp(2.5rem, 4vw, 6rem); font-weight: 700; background: -webkit-linear-gradient(0deg, #f76591, #ffc16f); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.1; margin-bottom: 36px; padding-left: 10px; } .content p { font-size: clamp(0.9rem, 4vw, 1.2rem); line-height: 1.6; padding-right: 100px; } .btn { background-color: #f76591; background-image: linear-gradient(-180deg, #ffc16f, #f76591); font-size: clamp(0.8rem, 8vw, 0.9rem); font-weight: 600; color: #fff; width: max-content; outline: 0; border: 0; border-radius: 6px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding: 10px 20px; margin-top: 26px; text-align: center; transform: scale(1); transition: all 0.2s ease-in; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; pointer-events: auto; } .btn:hover { box-shadow: 0 4px 10px rgba(247, 101, 145, 0.5); transform: scale(0.98); } /* Stacked Cards */ .stack { position: relative; } .card { position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; width: 350px; height: 500px; display: flex; justify-content: center; align-items: center; border-radius: 2rem; font-family: sans-serif; font-size: 10rem; background-color: transparent; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.25), 0 15px 20px 0 rgba(0, 0, 0, 0.125); transition: transform 0.6s; user-select: none; } .card img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; transition: transform 0.4s; } .card:nth-last-child(n + 5) { --x: calc(-50% + 90px); transform: translate(var(--x), -50%) scale(0.85); box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.01); } .card:nth-last-child(4) { --x: calc(-50% + 60px); transform: translate(var(--x), -50%) scale(0.9); } .card:nth-last-child(3) { --x: calc(-50% + 30px); transform: translate(var(--x), -50%) scale(0.95); } .card:nth-last-child(2) { --x: calc(-50%); transform: translate(var(--x), -50%) scale(1); } .card:nth-last-child(1) { --x: calc(-50% - 30px); transform: translate(var(--x), -50%) scale(1.05); } .card:nth-last-child(1) img { box-shadow: 0 1px 5px 5px rgba(255, 193, 111, 0.5); } .swap { animation: swap 1.3s ease-out forwards; } @keyframes swap { 30% { transform: translate(calc(var(--x) - 250px), -50%) scale(0.85) rotate(-5deg) rotateY(65deg); animation-timing-function: ease-in; } 100% { transform: translate(calc(var(--x) - 30px), -50%) scale(0.5); z-index: -1; } } /* Media queries for keyframes */ @media (max-width: 1200px) { @keyframes swap { 30% { transform: translate(calc(var(--x) - 200px), -50%) scale(0.85) rotate(-5deg) rotateY(65deg); } 100% { transform: translate(calc(var(--x) - 30px), -50%) scale(0.5); z-index: -1; } } } @media (max-width: 1050px) { @keyframes swap { 30% { transform: translate(calc(var(--x) - 150px), -50%) scale(0.85) rotate(-5deg) rotateY(65deg); } 100% { transform: translate(calc(var(--x) - 30px), -50%) scale(0.5); z-index: -1; } } } /* Media queries for other classes */ @media (max-width: 1200px) { .content { padding-left: 80px; } .content p.........完整代码请登录后点击上方下载按钮下载查看
网友评论0