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

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

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