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="M356.575 168.688C358.515 173.322 356.333 178.657 351.694 180.598C347.058 182.54 341.723 180.354 339.783 175.721C337.839 171.079 340.025 165.745 344.661 163.805C349.3 161.861 354.631 164.047 356.575 168.688Z" fill="white" fill-opacity="0.2"></path>
    <path d="M320.494 140.135L311.536 161.516L319.931 165.033L328.888 143.652L320.494 140.135Z" fill="#2A2B2B"></path>
    <path d="M296.737 165.795C293.198 174.244 297.179 183.961 305.629 187.499C314.078 191.038 323.796 187.058 327.334 178.608C330.873 170.159 326.892 160.44 318.443 156.902C309.994 153.363 300.275 157.346 296.737 165.795Z" fill="#2A2B2B"></path>
    <path d="M303.639 168.688C301.698 173.322 303.881 178.657 308.519 180.598C313.156 182.54 318.491 180.354 320.431 175.721C322.374 171.079 320.189 165.745 315.552 163.805C310.914 161.861 305.582 164.047 303.639 168.688Z" fill="white" fill-opacity="0.2"></path>
    <path d="M426.787 115.387H436.143C440.444 115.387 443.933 111.899 443.933 107.595C443.933 103.293 440.445 99.806 436.143 99.806H426.787V115.387Z" fill="#BCC1C1"></path>
    <path d="M433.329 147.575V67.783C433.329 64.171 430.4 61.244 426.787 61.244V154.116C430.4 154.116 433.329 151.188 433.329 147.575Z" fill="#2A2B2B"></path>
    <path d="M407.982 82.842V107.594H25.345C23.652 66.076 38.109 32.627 48.872 13.756C54.7 3.55197 66.476 -1.70199 77.959 0.791006C86.002 2.53901 92.804 7.88702 96.418 15.288L110.062 43.23C123.092 69.931 156.087 70.131 164.397 69.29C241.137 61.595 297.047 63.408 329.296 66.05V78.252H366.772L407.904 82.827C407.93 82.828 407.956 82.828 407.982 82.842Z" fill="#FFD546"></path>
    <path d="M407.982 107.595V140.151C406.741 140.604 405.461 141.005 404.141 141.324C307.887 164.825 97.204 141.632 25.344 107.595H407.982Z" fill="#FFD546"></path>
    <path d="M407.982 107.595V140.151C406.741 140.604 405.461 141.005 404.141 141.324C307.887 164.825 97.204 141.632 25.344 107.595H407.982Z" fill="black" fill-opacity="0.1"></path>
    <path d="M366.771 78.253H329.295V66.051C338.537 66.81 345.845 67.637 351.14 68.331C357.569 69.158 363.291 72.785 366.771 78.253Z" fill="white" fill-opacity="0.2"></path>
    <path d="M426.787 103.928V107.595H407.983V82.843C418.693 84.055 426.787 93.138 426.787 103.928Z" fill="#2A2B2B"></path>
    <path d="M426.787 107.595C426.787 125.454 419.386 135.857 407.983 140.151V107.595H426.787Z" fill="#2A2B2B"></path>
    <path d="M426.787 107.595C426.787 125.454 419.386 135.857 407.983 140.151V107.595H426.787Z" fill="white" fill-opacity="0.1"></path>
    <path d="M85.157 80.9769C85.157 84.4629 82.33 87.2819 78.851 87.2819H7.19499C3.71799 87.2819 0.890991 8.........完整代码请登录后点击上方下载按钮下载查看