scroll-timeline实现滚动放大相册效果代码
代码语言:html
所属分类:画廊相册
代码描述:scroll-timeline实现滚动放大相册效果代码
代码标签: scroll-timeline 滚动 放大 相册
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/open-props.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/open-props.normalize.min.css"> <style> *, *:after, *:before { box-sizing: border-box; } body { display: grid; place-items: center; min-height: 100vh; font-family: 'Google Sans', sans-serif, system-ui; width: 100vw; overflow-x: hidden; height: 300vh; } ul { --big-tile-size: 50vmin; --scale: 0.4; --rotation: 270deg; --tile-size: calc(var(--big-tile-size) / 3); list-style-type: none; padding: 0; margin: 0; display: grid; gap: 1vmin; grid-template: repeat(9, var(--tile-size)) / repeat(9, var(--tile-size)); position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(var(--scale)); animation-timeline: scroll(root); -webkit-animation: 1s scale-up both ease-in; animation: 1s scale-up both ease-in; } @-webkit-keyframes scale-up { 0% { transform: translate(-50%, -50%) scale(var(--scale)) rotate(0deg); } 100% { transform: translate(-50%, -50%) scale(1) rotate(var(--rotation)); } } @keyframes scale-up { 0% { transform: translate(-50%, -50%) scale(var(--scale)) rotate(0deg); } 100% { transform: translate(-50%, -50%) scale(1) rotate(var(--rotation)); } } li:nth-of-type(4) { aspect-ratio: 1; } img { --rotation: -270deg; --scale: 1; height: 200%; min-width: 200%; aspect-ratio: 1; -o-object-fit: cover; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-animation: 1s scale-up both ease-in; animation: 1s scale-up both ease-in; animation-timeline: scroll(root); } li { padding: 0; position: relative; background: hsl(0 0% 75% / 0.2); max-inline-size:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0