div+css卡通飞机导航条滚动切换效果代码-html代码-BFW代码库

代码语言：html
代码描述：div+css卡通飞机导航条滚动切换效果代码头鹰效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

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

  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Pacifico&display=swap");

* {
        box-sizing: border-box;
}

:root {
        --x: 0;
        --y: 0;
        --text-color: #fff;
        --text-layer-1: --text-color;
        --text-layer-2: #a5dbeb;
        --text-layer-3: #347cb4;
        --blur: 6px;
}

::-webkit-scrollbar {
        display: none;
}

html {
        scrollbar-gutter: stable;
        scroll-behavior: smooth;
}

body {
        margin: 0;
        block-size: 100vh;
        font-family: "Pacifico", cursive;
        color: var(--text-color);
}

.container {
        position: relative;
        z-index: 1;
        inline-size: 100%;
        block-size: 100%;
        display: flex;
        flex-flow: row nowrap;

        .card {
                inline-size: inherit;
                min-block-size: 100vh;
                flex-shrink: 0;
                display: flex;
                justify-content: space-between;
                align-items: start;
                padding: 3rem;

                & a {
                        display: inline-flex;
                        padding: 0.55rem 1rem;
                        text-decoration: none;
                        white-space: nowrap;
                        font-size: clamp(2rem, 3vw, 3rem);
                        color: var(--text-layer-2);
                        border-radius: 0.25rem;
                        transition: scale 200ms cubic-bezier(0.64, 0.11, 0.24, 2.47);
                        
                        /*                       */
                        &:not(:hover) {
                                filter: blur(var(--blur));
                                -webkit-filter: blur(var(--blur));
                        }
                        
                        /*                       */
                        animation: blur both linear;
                        animation-timeline: view(x 50vw auto);

                        &:nth-of-type(2) {
                                translate: 0 25vh;
                        }

                        &:nth-of-type(3n + 1) {
                                translate: 0 60vh;

                                &:not(:hover) {
                                        color: var(--text-layer-2);
                                        scale: 0.8;
                                }
                        }

                        &:nth-of-type(even) {
                                &:not(:hover) {
                                        color: var(--text-layer-3);
                                }
                        }

                        &:hover {
                                scale: 1.35;
                                background: rgb(87 101 133 / 20%);
                        }
                }

                &:nth-of-type(2) {
                        & a {
                                &:nth-of-type(2) {
                                        translate: 0 45vh;
                                }

                                &:nth-of-type(3n + 1) {
                                        translate: 0 75vh;
                                }
                        }
                }
        }
}

.back {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        /*       */
        background-color: #1abcfe;
        background-image: url(//repo.bfw.wiki/bfwrepo/image/651b7025b52b8.png);
        background-position: var(--x) var(--y);
        background-repeat: no-repeat;
        background-size: 250vh;

        /*       */
        animation: scroll-page both linear;
        animation-timeline: scroll(inline);
}

.airplane {
        position: fixed;
        z-index: 2;
        left: 1rem;
        top: 50%;
        translate: 0 -50%;
        display: flex;
        gap: 1rem;
        animation: airplane both linear;
        animation-timeline: scroll(inline);

        & #airship {
                display: none;
                
                .screw {
                        transform-origin: 50% 46%;
                        animation: screw 100ms infinite;
                }
        }
}

label {
        position: fixed;
        top: 0.5rem;
        right: 0.5rem;
        z-index: 3;
        padding: 0.25rem;
        color: var(--text-layer-3);
        background-color: var(--text-color);
        backdrop-filter: blur(4px);

        &:has(input[type="checkbox"]:checked) {
                ~ .container {
                        flex-direction: column;

                        & .card {
                                flex-direction: column;

                                & a {
                                        translate: none;
/*                                      color: var(--text-color); */
                                        scale: 1;
                                        animation-timeline: view(y 40vh auto);
                                }
                        }

                        ~ .back {
                                animation-timeline: scroll();
                        }
                }

                ~ .airplane {
                        top: 5rem;
                        right: 1rem;
                        left: auto;
                        flex-direction: column;
                        animation: airship both linear;
                        animation-timeline: scroll();

                        & #airplane {
                                display: none;
                        }

                        & #airship {
                                display: block;
                        }
                }
        }
}

.help {
        position: fixed;
        bottom: 1rem;
        left: 50%;
        translate: -50%;
}

@keyframes scroll-page {
        to {
                /*              --x: 100%; */
                /*              --y: 100%; */
                background-position: 100% 50%;
        }
}

@keyframes airplane {
        0% {
                translate: -110%;
        }
        
        10% {
                translate: 10vw 0;
        }
        
        20% {
                translate: 20vw -20vh;
        }
        
        30% {
                translate: 30vw -20vh;
        }
        
        40% {
                translate: 30vw 20vh;
        }
        
        50% {
                translate: 50vw 30vh;
        }
        
        60% {
                translate: 60vw -35vh;
        }
        
        70% {
                translate: 70vw 10vh;
        }
        
        100% {
                translate: 100vw;
        }
}

@keyframes airship {
        0% {
                scale: 0.25;
        }
        
        20% {
                translate: -40vw 20vh;
        }
        
        40% {
                translate: -30vw 60vh;
        }
        
        60% {
                translate: -50vw 40vh;
        }
        
        100% {
                translate: -80vw 100vh;
                scale: 3;
        }
}

@keyframes blur {
        to {
                filter: blur(0);
                -webkit-filter: blur(0);
                color: var(--text-color);
        }
}

@keyframes screw {
        to {
                rotate: 180deg;
        }
}
</style>


  
  
</head>

<body >
  <label for="random">
  <input id="random" type="checkbox"/>vertical navbar
</label>
<div class="airplane">
  <svg id="airplane" width="120" viewBox="0 0 444 189" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M106.465 126.625H98.556V142.029H106.465V126.625Z" fill="#2A2B2B"></path>
    <path d="M116.921 149.938C116.921 157.895 110.469 164.346 102.511 164.346C94.553 164.346 88.102 157.895 88.102 149.938C88.102 141.98 94.553 135.527 102.511 135.527C110.469 135.526 116.921 141.979 116.921 149.938Z" fill="#2A2B2B"></path>
    <path d="M110.419 149.938C110.419 154.303 106.879 157.844 102.512 157.844C98.144 157.844 94.603 154.303 94.603 149.938C94.603 145.568 98.143 142.029 102.512 142.029C106.879 142.029 110.419 145.568 110.419 149.938Z" fill="white" fill-opacity="0.2"></path>
    <path d="M339.651 140.148L331.257 143.665L340.214 165.045L348.609 161.528L339.651 140.148Z" fill="#2A2B2B"></path>
    <path d="M363.477 165.795C367.017 174.244 363.036 183.961 354.585 187.499C346.137 191.038 336.418 187.058 332.88 178.608C329.34 170.159 333.321 160.44 341.77 156.902C350.221 153.363 359.938 157.346 363.477 165.795Z" fill="#2A2B2B"></path>
    <path d=&quo.........完整代码请登录后点击上方下载按钮下载查看