aat实现鼠标页面滚动卡片层叠堆积效果代码
代码语言:html
所属分类:加载滚动
代码描述:aat实现鼠标页面滚动卡片层叠堆积效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } body { background: hsl(265.3, 10%, 75%); font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } .card { position: sticky; top: 0; } .card__inner { will-change: transform; background: white; border-radius: 14px; display: flex; overflow: hidden; box-shadow: 0 25px 50px -12px hsla(265.3, 20%, 10%, 35%); transform-origin: center top; } .cards { width: 100%; max-width: 900px; margin: 0 auto; display: grid; grid-template-rows: repeat(var(--cards-count), var(--card-height)); gap: 40px 0; } .card__image-container { display: flex; width: 40%; flex-shrink: 0; } .card__image { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; } .card__content { padding: 40px 30px; display: flex; flex-direction: column; } .card__title { padding: 0; margin: 0; font-size: 60px; font-weight: 600; color: #16263a; } .card__description { line-height: 1.4; font-size: 24px; color: #16263a; } .space { height: 90vh; } .space--small { height: 40vh; } @media (max-width: 600px) { .card__inner { flex-direction: column; } .card__image-container { width: 100%; } .card__image { aspect-ratio: 16 / 9; } .card__title { font-size: 32px; } .card__description { font-size: 16px; } .card__content { padding: 30px 20px; } } </style> </head> <body > <div class="space space--small"></div> <div class="cards"> <div class="card" data-index="0"> <div class="card__inner"> <div class="card__image-container"> <img class="card__image" src="//repo.bfw.wiki/bfwrepo/image/64bddc770add3.png" alt="" /> </div> <div class="card__content"> <h1 class="card__title">Card Title</h1> <p class="card__description"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab dicta error nam eaque. Eum fuga laborum quos expedita iste saepe similique, unde possimus quia at magnam sed cupiditate? Reprehenderit, harum! </p> </div> </div> </div> <div class="card" data-index="0"> <div class="card__inner"> <div class="card__image-container"> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0