css+div实现立体倒影图片卡片横向堆叠幻灯滑动效果代码
代码语言:html
所属分类:幻灯片
代码描述:css+div实现立体倒影图片卡片横向堆叠幻灯滑动效果代码
代码标签: css div 立体 倒影 图片 卡片 横向 堆叠 滑动 幻灯
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html { background-color: #000; } html, body { height: 100%; max-height: 100%; margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; flex-direction: column; align-items: center; } .cards { --item-width: 250px; list-style: none; scroll-snap-type: x mandatory; scroll-behavior: smooth; overflow-x: scroll; overflow-y: hidden; display: flex; flex-wrap: nowrap; align-items: center; position: relative; margin: 0; box-sizing: border-box; width: 100%; max-width: 100%; height: 100%; padding: 0; } .cards .card:first-of-type { margin-left: calc(50% - (var(--item-width) / 2)); } .cards .card:last-of-type { margin-right: calc(50% - (var(--item-width) / 2)); } .card { view-timeline-name: --item-visible; view-timeline-axis: inline; animation: linear adjust-z-index both; animation-timeline: --item-visible; transform: translate3d(0, 0, 0); flex: 0 0 auto; perspective: 1000px; position: relative; z-index: 1; will-change: z-index; display: block; scroll-snap-align: center; text-decoration: none; } .card > .image { position: relative; display: block; animation: linear rotate both; animation-timeline: --item-visible; will-change: transform; width: var(--item-width); aspect-ratio: 250/350; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translate3d(-50%, 0, 0) rotate3d(0, 1, 0, -45deg) scale(0.5); transform: translate3d(-50%, 0, 0) rotate3d(0, 1, 0, -45deg) scale(0.5); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .image > img { display: block; border-radius: 1rem; width: 100%; height: 100%; object-fit: cover; } .image .reflection { position: absolute; width: 100%; height: 100%; top: 100%; left: 0; right: 0; bottom: 0; background-image: linear-gradient(black 60%, rgba(0, 0, 0, 0.5)), var(--image); background-size: cover; background-repeat: no-repeat; border-radius: 1rem; transform: scaleY(-1) translateY(-0.5em); opacity: 0.5; } @keyframes adjust-z-index { 0% { z-index: 1; } 50% { z-index: 100; } 100% { z-index: 1; } } @keyframes rotate { 0% { -webkit-transform: translate3d(-50%, 0, 0) rotate3d(0, 1, 0, -45deg) scale(0.5); transform: translate3d(-50%, 0, 0) rotate3d(0, 1, 0, -45deg) scale(0.5); opacity: 0.25; } 35% { -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 1, 0, -40deg) scale(0.75); transform: translate3d(0, 0, 0) rotate3d(0, 1, 0, -40deg) scale(0.75); } 50% { -webkit-transform: translate3d(0, 0, 1em) rotate3d(0, 1, 0, 0) scale(1); transform: translate3d(0, 0, 1em) rotate3d(0, 1, 0, 0) scale(1); opacity: 1; } 65% { -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 1, 0, 40deg) scale(0.75); transform: translate3d(0, 0, 0) rotate3d(0, 1, 0, 40deg) scale(0.75); } 100% { -webkit-transform: translate3d(50%, 0, 0) rotate3d(0, 1, 0, 45deg) scale(0.5); transform: translate3d(50%, 0, 0) rotate3d(0, 1, 0, 45deg) scale(0.5); opacity: 0.25; } } </style> </head> <body translat.........完整代码请登录后点击上方下载按钮下载查看
网友评论0