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

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

代码语言：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-direc.........完整代码请登录后点击上方下载按钮下载查看