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