div+css实现响应式网页导航单页滚动效果代码-html代码-BFW代码库

代码语言：html
所属分类：响应式
代码描述：div+css实现响应式网页导航单页滚动效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

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



  

  
  
  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Righteous&amp;display=swap'>
  
<style>
:root {
        --text-color: hsl(230 16% 28%);

        /* header */
        --header-bg: hsl(0 0% 100% / 75%);

        /* section */
        --section: hsl(0 0% 93%);
        --section-even: hsl(210deg 15% 92%);

        /* tiles */
        --red: hsl(10 83% 52%);
        --green: hsl(157 91% 43%);
        --blue: hsl(210 100% 45%);
        --purple: hsl(266 100% 67%);
        --yellow: hsl(49 100% 73%);
        --black: hsl(0 0% 0%);

        /*  */
        --cubic: cubic-bezier(0.25, 0.1, 0, 2.05);
}

* {
        box-sizing: border-box;
}

html {
        scroll-behavior: smooth;
}

body {
        margin: 0;
        display: grid;
        overflow-x: hidden;
        font-family: "Righteous", sans-serif;

        /* scope */
        timeline-scope: 
                --masthead-s, 
                --tiles-s, 
                --text-s, 
                --two-columns-s,
                --subscribe-s;
}

header {
        --show: none;
        --position: relative;
        --b: 0;
        --s: 10%;
        --nav-bg: var(--yellow);

        position: sticky;
        top: 0;
        z-index: 2;
        inline-size: 100%;
        transition: all 200ms linear;

        /* animation */
        animation: height-resize both linear;
        animation-timeline: scroll();
        animation-range: entry 0% exit 20%;

        .menu {
                position: fixed;
                top: 0.25rem;
                left: 0.25rem;
                z-index: 2;
                cursor: pointer;

                & input[type="checkbox"] {
                        display: none;
                }

                .burger {
                        display: var(--show);
      background-color: var(--header-bg);
                        
                        & path {
                                fill: none;
                                stroke: currentcolor;
                                stroke-width: 3;
                                transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;

                                &.top {
                                        stroke-dasharray: 40 172;
                                }

                                &.middle {
                                        stroke-dasharray: 40 111;
                                }

                                &.bottom {
                                        stroke-dasharray: 40 172;
                                }
                        }
                }

                &:has(input[type="checkbox"]:checked) {
                        .burger {
                                & path {
                                        &.top {
                                                stroke-dashoffset: -132px;
                                        }

                                        &.middle {
                                                stroke-dashoffset: -71px;
                                        }

                                        &.bottom {
                                                stroke-dashoffset: -132px;
                                        }
                                }
                        }
                }
        }

        & nav {
                position: var(--position);
                inline-size: inherit;
                display: flex;
                align-items: center;
                justify-content: center;

                /* blur background */
                background-color: var(--header-bg);
                backdrop-filter: blur(6px);

                & ul {
                        list-style-type: none;
                        display: flex;
                        padding: 0;
                        grid-column-gap: 3rem;

                        & li {
                                position: relative;
                                padding: 0.5rem 1rem;
                                text-transform: uppercase;
                                color: var(--text-color);
                                transition: transform 0.25s var(--cubic);

                                &::after {
                                        position: absolute;
                                        content: "";
                                        left: 0;
                                        bottom: var(--b);
                                        z-index: -1;
                                        inline-size: 100%;
                                        block-size: var(--s);
                                        background-color: var(--nav-bg);
                                        transition: all 0.25s var(--cubic);
                                }

                                &:has(a:hover) {
                                        --b: 10%;
                                        --s: 70%;
                                }
                        }
                }
        }
}

@media (width <= 48rem) {
        body {
                &:has(input[id="burger"]:checked) {
                        scrollbar-gutter: stable;
                        overflow-y: hidden;
                }
        }

        header {
                --position: absolute;
                --translateY: -100%;
                --show: block;
                --nav-bg: var(--green);

                & nav {
                        top: 0;
                        translate: 0 var(--translateY);

                        inline-size: 100%;
                        block-size: 100dvh;
                        padding-inline: 1rem;
                        transition: all 200ms ease-in-out;

                        & ul {
                                block-size: 100%;
                                flex-direction: column;
                                justify-content: space-evenly;
                        }
                }

                & .menu {
                        &:has(input[type="checkbox"]:checked) {
                                & ~ nav {
                                        --translateY: 0;
                                }
                        }
                }
        }
}

@keyframes height-resize {
        to {
                padding-block: 0;
        }
}

:is(h1, h2) {
        margin: 0;
        font-size: calc(2rem + 0.25vw);
}

a {
        text-decoration: none;
        color: currentColor;

        /* animation */
        animation: avtive-link both linear;
        anchor-name: var(--an);
        animation-timeline: var(--at);

        &:not(:hover) {
                opacity: calc(0.5 + var(--active, 0));
        }
}

section {
        min-block-size: 100vh;
        background-color: var(--section);

        /* for animation */
        view-timeline-name: var(--name);

        &:nth-child(even) {
                --section: var(--section-even);
        }
}

.flying-squares {
        position: absolute;
        z-index: 1;
        
        .square {
                position: inherit;
                width: 15vw;
                height: 15vw;
                rotate: 0.4turn;
                background-color: var(--square-color);
                top: var(--y);
                left: var(--x);
                opacity: 0.3;
                rotate:  var(--rx) var(--ry) var(--rz) 0.55turn;
                animation: flying 2s infinite alternate both;
                
                &:nth-of-type(1) {
                        --y: 17vh;
                        --x: 8vw;
                        --rx: 0.5;
                        --ry: 2.1;
                        --rz: 1.6;
                        --square-color: var(--red);
                        
                        animation-delay: 1s;
                }
                
                &:nth-of-type(2) {
                        --y: 8vh;
                        --x: 76vw;
                        --rx: 1.7;
                        --ry: 2.3;
                        --rz: 2.1;
                        --square-color: var(--purple);
                }
                
                &:nth-of-type(3) {
                        --y: 60vh;
                        --x: 40vw;
                        --rx: 1.75;
                        --ry: 3.5;
                        --rz: 2.7;
                        --square-color: var(--green);
                        
                        animation-delay: 0.5s;
                }
        }
}

@keyframes flying {
        to {
                translate: 0 -5vh;
        }
}

.masthead {
        max-inline-size: 100vw;
        block-size: 100vh;
        overflow: hidden;
        display: grid;
        place-content: center;
        padding-inline: 1rem;

        & h1 {
                position: fixed;
                top: 50%;
                left: 50%;
                translate: -50% -50%;
                text-transform: uppercase;

                /*      animation        */
                animation: scale-up both linear, fade-away both linear;
                animation-timeline: var(--name);
                animation-range: entry-crossing 70% exit 90%, exit 10% exit 70%;
        }
}

@keyframes scale-up {
        100% {
                top: 0;
                scale: 5;
        }
}

@keyframes fade-away {
        100% {
                opacity: 0;
        }
}

.tile-section {
        position: sticky;
        top: 0;
        max-inline-size: 100vw;
        block-size: 200vh;
        overflow: hidden;

        & .tile-container {
                position: absolute;
                top: 50%;
                left: 50%;
                translate: -50% -50%;
                scale: 3;
                inline-size: 100%;
                block-size: 100vh;
                display: grid;
                grid-template: repeat(4, 1fr) / repeat(5, 1fr);
                rotate: 0.12turn;

                & .tile {
                        inline-size: 100%;
                        block-size: 100%;
                        background-color: var(--tile);

                        /* animation */
                        animation: tile both linear;
                        /*                      animation-timeline: scroll(root); */
                        animation-timeline: var(--name);
                        animation-range: entry 100% exit 0%;

                        &:nth-of-type(5n + 2),
                        &:nth-of-type(5n + 4) {
                                --tile: var(--green);
                                --vertical: 100%;
                                --horizontal: 100%;

                                &:nth-of-type(odd) {
                                        --tile: var(--red);
                                        --vertical: 100%;
                                        --horizontal: -100%;
                                }
                        }

                        &:nth-of-type(5n + 1),
                        &:nth-of-type(5n + 3),
                        &:nth-of-type(5n + 5) {
                                --tile: var(--blue);
                                --vertical: -100%;
                                --horizontal: 100%;

                                &:not(:nth-of-type(odd)) {
                                        --tile: var(--yellow);
                                        --vertical: -100%;
                                        --horizontal: -100%;
                                }
                        }
                }
        }
}

@keyframes tile {
        0% {
                translate: 0 0;
        }

        50% {
                translate: 0 var(--vertical);
        }

        100% {
                translate: var(--horizontal) var(--vertical);
        }
}

.text {
        max-inline-size: 80ch;
        margin-inline: auto;
        padding: 3rem 1rem;
        counter-reset: chapter 0;

        & > *:not(h2) {
                text-wrap: pretty;
                counter-increment: chapter 1;

                /* animation */
                animation: show-text both linear;
                animation-timeline: view(y 80vh auto);

                &::before {
                        content: counter(chapter, upper-roman) ". "; /* lower-alpha */
                }
        }
}

/* :has(.text) {
        counter-reset: chapter 0;
        
        & p {
.........完整代码请登录后点击上方下载按钮下载查看