css实现滚动式图片卡片幻灯片代码-html代码-BFW代码库

css实现滚动式图片卡片幻灯片代码

代码语言：html

所属分类：幻灯片

代码描述：css实现滚动式图片卡片幻灯片代码，通过滚动页面触发上下翻滚聚焦图片

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
<style>
@import url(https://fonts.bunny.net/css?family=just-me-again-down-here:400);
@layer base, mouse, demo;

@layer demo {
  @property --rotate {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
 
  body {
    height: 1200svh;
    margin: 0;
   
    animation: --page-rotate 1s linear;
    animation-timeline: scroll(nearest block);
  
    /** this allows us to rotate to exactly each card.
    BUT, it either needs to be set via JS or hardcoded as we can't accesss the .wrapper sibling-count() value  from the body */
    --cards: 20;
		animation-timing-function: steps(var(--cards)); 
  }
  
  @keyframes --page-rotate {
    to { --rotate: 1; }
  }
  
  .wrapper {
    --card-border-radius: 20px;
    --cards: sibling-count();
    --card-width: max(150px, 20vw);
    .........完整代码请登录后点击上方下载按钮下载查看