div+css实现文章分段落阅读大纲进度一览滚动效果代码-html代码-BFW代码库

div+css实现文章分段落阅读大纲进度一览滚动效果代码

代码语言：html

代码描述：div+css实现文章分段落阅读大纲进度一览滚动效果代码

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

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap" rel="stylesheet">
   <style>
       @layer base {
    :root {
        font-family: "Google Sans Flex", sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
        font-variation-settings:
                "slnt" 0,
                "wdth" 100,
                "GRAD" 0,
                "ROND" 0;
        line-height: 1.5;

        --paper: oklch(0.985 0.004 85);
        --paper-2: oklch(0.965 0.006 85);
        --ink: oklch(0.235 0.010 60);
        --muted: oklch(0.555 0.012 60);
        --faint: oklch(0.70 0.010 60);
        --hair: oklch(0.885 0.006 70);
        --hair-soft: oklch(0.93 0.005 75);
        --accent: oklch(0.555 0.155 32); /* refined editorial rust-red */
        --accent-soft: oklch(0.555 0.155 32 / 0.12);

        --reading: 38rem;
        --aside-w: 17.5rem;
        --shape: circle(50% at 50% 50%);
    }

    html {
        animation: scroll-progress linear;
        animation-timeline: scroll(root block); /* скролл всей страницы */
        scroll-behavior: smooth;
    }

    body {
        margin: 0;
        min-height: 100vh;
        background: var(--paper);
    }

    #app {
        max-width: calc(var(--reading) + var(--aside-w) + 12rem);
        margin: 0 auto;
        padding: 0 2.5rem;
        display: grid;
        grid-template-columns: minmax(0, var(--reading)) 2px var(--aside-w);
        grid-template-rows: 7.5rem 1fr 12rem;
        gap: 2.5rem;
        align-items: start;
        justify-content: center;
    }
}

@layer content {
    .header {
        display: flex;
        align-items: center;
        grid-row: 1/1;
        grid-column: 1/4;
        max-width: 100%;
        margin-left: auto;
        width: 100%;
        height: 100%;
        align-self: center;
        border-bottom: 1px solid var(--hair);
        h1 {
            margin: 0;
            font-weight: 400;
            text-transform: uppercase;
            opacity: .4;
            width: 100%;
            text-align: .........完整代码请登录后点击上方下载按钮下载查看