css实现头部视觉差异滚动效果代码-html代码-BFW代码库

css实现头部视觉差异滚动效果代码

代码语言：html

代码描述：css实现头部视觉差异滚动效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <style>
        @import url("https://fonts.googleapis.com/css2?family=Ovo&display=swap");
        :root {
          --color--beige: #f3f0e7;
          --color--salmon: #f9978c;
          --color--blue-dark: #2a3a45;
          --color--header: var(--color--salmon);
          --color--main-bg: var(--color--beige);
          --color--text: var(--color--blue-dark);
          --color--border: var(--color--salmon);
          --font-size--small: 0.9rem;
          --font-size--base: 1.1rem;
          --font-size--medium: 2rem;
          --font-size--large: 3rem;
          --font-size--x-large: 5rem;
          --font-size--xx-large: 8rem;
          --line-height--base: 1.8;
          --line-height--tight: 1.2;
          --space--small: 0.5rem;
          --space--base: 1rem;
          --space--large: 3.5rem;
          --container--base: 65ch;
        }
        
        body {
          background-color: var(--color--header);
          color: var(--color--text);
          font-family: "Ovo", serif;
          line-height: var(--line-height--base);
        }
        
        header {
          align-content: center;
          display: grid;
          height: 90vh;
          justify-content: center;
          padding: var(--space--base);
          position: sticky;
          text-align: center;
          top: 0;
          z-index: 0;
        }
        
        section {
          background-color: var(--color--main-bg);
          display: grid;
          grid-template-columns: minmax(auto, var(--container--base));
          justify-content: center;
          padding: var(--space--base);
          position: relative;
          z-index: 1;
        }
        
        h1 {
          font-size: clamp(var(--font-size--large), 6vw, var(--font-size--xx-large));
          margin: 0;
        }
        
        h2 {
          margin: 0;
        }
        h2::before {
          border-top: 1px solid currentColor;
          content: "";
          display: block;
          margin: var(--space--large) auto var(--space--base) auto;
          width: 3rem;
        }
        
        h3::before {
          border-top: 1px solid var(--color--border);
          content: "";
          display: inline-block;
          margin-left: calc((3rem + var(--space--small)) * -1);
          margin-right: var(--space--small);
          width: 3rem;
          vertical-align: middle;
        }
        
        p {
          font-size: var(--font-size--base);
        }
        p:first-of-type {
          font-size: var(--font-size--medium);
          line-height: var(--line-height--tight);
        }
        p:first-of-type:first-letter {
          box-shadow: 0 0 0 1px var(--color--border), 0 0 0 5px var(--color--main-bg), 0 0 0 6px var(--color--border);
          float: left;
          font-family: Georgia;
          font-size: var(--font-size--x-large);
          line-height: 0.8;
          margin-right: var(--space--base);
          margin-bottom: var(--space--base);
          padding: var(--space--base);
        }
    </style>



</head>

<body>
    <main>
        <header>
            <h1>Mrs. Dalloway</h1>
            <h2>by Virginia Woolf</h2>
        </header>

        <section>
            <h3>An Excerpt from Chapter One</h3>

            <p>Mrs. Dalloway said she would buy the flowers herself.</p>

            <p>For Lucy had her work cut out for her. The doors would be taken off their hinges; Rumpelmayer's men were coming. And then, thought Clarissa Dalloway, what a morning--fresh as if issued to children on a beach.</p>

            <p>What a lark! What a plunge! For so it had always seemed to her, when, with a little squeak of the hinges, which she could hear now, she had burst open the French windows and plunged at Bourton into the open air. How fresh, how calm, stiller
                than this of course, the air was in the early morning; like the flap of a wave; the kiss of a wave; chill and sharp and yet (for a girl of eighteen as she then was) solemn, feeling as she did, standing there at the open window, that something
                awful was about to happen; looking at the flowers, at the trees with the smoke winding off them and the rooks rising, falling; standing and looking until Peter Walsh said, "Musing among the vegetables?"--was that it?--"I pref.........完整代码请登录后点击上方下载按钮下载查看