scroll-timeline实现向下滚动分页全屏效果代码-html代码-BFW代码库

scroll-timeline实现向下滚动分页全屏效果代码

代码语言：html

代码描述：scroll-timeline实现向下滚动分页全屏效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
 
        :root {
          --size: 60vmin;
        }
        
        section {
          height: 100vh;
          width: 100vw;
          padding: 0;
          display: grid;
          place-items: center;
          max-inline-size: 100%;
        }
        
        h1 {
          max-inline-size: 100%;
          font-family: "Impact", sans-serif;
          text-transform: uppercase;
          font-size: clamp(3rem, 12vmin, 8rem);
        }
        
        img {
          border-radius: var(--radius-3);
          width: var(--size);
          aspect-ratio: 1;
          -o-object-fit: cover;
             object-fit: cover;
        }
        
        section:nth-of-type(odd) {
          background: var(--surface-2);
        }
        
        /* li:nth-of-type(2) img {
          animation: bloom both linear;
          animation-timeline: --section;
          animation-delay: cover 30%;
          animation-end-delay: cover 50%;
          clip-path: circle(0% at center);
        }
        
        @keyframes bloom {
          to {
            clip-path: circle(100% at center);
          }
        } */
        
        /* li:nth-of-type(3) img {
          animation: curtains both linear;
          animation-timeline: --section;
          animation-delay: cover 30%;
          animation-end-delay: cover 50%;
          mask: linear-gradient(45deg, transparent 50%, black 50%);
          mask-repeat: no-repeat;
          mask-size: 200% 200%;
          mask-position: -100% 0;
        }
        
        @keyframes curtains {
          to {
            mask-position: 100% 0;
          }
        }
         */
        
        /* li:nth-of-type(4) img {
          animation: fade-across both linear;
          animation-timeline: --section;
          animation-delay: cover 30%;
          animation-end-delay: cover 50%;
          mask: linear-gradient(transparent .........完整代码请登录后点击上方下载按钮下载查看