HTML&CSS实现导航栏滑动背景效果

大家可以先看一下背景滚动的效果
在这里插入图片描述

在这里插入图片描述
这个效果需要注意的就是鼠标悬浮的时机hover，鼠标在悬浮到不同的选项上时，背景的那个色块距离左侧的边距会发生改变。在鼠标离开导航栏时，色块会返回到你定义的那个位置(这个位置在实际的开发中，肯定是当前页面的位置，这个位置你可以自行更改)。

下面是代码部分：
html部分：

<div class="container">
		<nav>
			<a href="#">home</a>
			<a href="#">about</a>
			<a href="#">blog</a>
			<a href="#">protfolio</a>
			<a href="#">contact</a>
			<div class="animation start-home"></div> <!-- 这个div是背景色块 -->
		</nav>
</div>

下面是css代码部分

  * {
		margin: 0;
		padding: 0;
	}

	body {
		background-color: rgb(45, 60, 80);
		display: flex;
		justify-content: center;
		align-items: center;
		height: 800px;
	}

	nav {
		width: 590px;
		height: 50px;
		background-color: rgb(51, 73, 94);
		position: relative;
		border-radius: 8px;
		box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
	}

	nav a {
		position: relative;
		display: block;
		float: left;
		font-size: 15px;
		line-height: 50px;
		width: 100px;
		height: 50px;
		color: #fff;
		text-transform: uppercase;
		text-decoration: none;
		text-align: center;
		z-index: 10;
	}

	nav a:nth-child(1) {
		width: 100px;
	}

	nav a:nth-child(2) {
		width: 110px;
	}

	nav a:nth-child(3) {
		width: 100px;
	}

	nav a:nth-child(4) {
		width: 160px;
	}

	nav a:nth-child(5) {
		width: 120px;
	}

	nav .animation {
		position: absolute;
		height: 100%;
		background-color: #f97f51;
		z-index: 9;
		border-radius: 8px;
		transition: all 0.3s;
	}
    /* 这个地方控制背景色块的起始位置 */
	.start-home,
	nav a:nth-child(1):hover~.animation {
		width: 100px;
		left: 0;
	}

	nav a:nth-child(2):hover~.animation {
		width: 110px;
		left: 100px;
	}

	nav a:nth-child(3):hover~.animation {
		width: 100px;
		left: 210px;
	}

	nav a:nth-child(4):hover~.animation {
		width: 160px;
		left: 310px;
	}

	nav a:nth-child(5):hover~.animation {
		width: 120px;
		left: 470px;
	}

下面就是完整的代码部分，需要的小伙伴直接复制就可以了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			body {
				background-color: rgb(45, 60, 80);
				display: flex;
				justify-content: center;
				align-items: center;
				height: 800px;
			}

			nav {
				width: 590px;
				height: 50px;
				background-color: rgb(51, 73, 94);
				position: relative;
				border-radius: 8px;
				box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
			}

			nav a {
				position: relative;
				display: block;
				float: left;
				font-size: 15px;
				line-height: 50px;
				width: 100px;
				height: 50px;
				color: #fff;
				text-transform: uppercase;
				text-decoration: none;
				text-align: center;
				z-index: 10;
			}

			nav a:nth-child(1) {
				width: 100px;
			}

			nav a:nth-child(2) {
				width: 110px;
			}

			nav a:nth-child(3) {
				width: 100px;
			}

			nav a:nth-child(4) {
				width: 160px;
			}

			nav a:nth-child(5) {
				width: 120px;
			}

			nav .animation {
				position: absolute;
				height: 100%;
				background-color: #f97f51;
				z-index: 9;
				border-radius: 8px;
				transition: all 0.3s;
			}

			.start-home,
			nav a:nth-child(1):hover~.animation {
				width: 100px;
				left: 0;
			}

			nav a:nth-child(2):hover~.animation {
				width: 110px;
				left: 100px;
			}

			nav a:nth-child(3):hover~.animation {
				width: 100px;
				left: 210px;
			}

			nav a:nth-child(4):hover~.animation {
				width: 160px;
				left: 310px;
			}

			nav a:nth-child(5):hover~.animation {
				width: 120px;
				left: 470px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<nav>
				<a href="#">home</a>
				<a href="#">about</a>
				<a href="#">blog</a>
				<a href="#">protfolio</a>
				<a href="#">contact</a>
				<div class="animation start-home"></div>
			</nav>
		</div>
	</body>
</html>

最后，整理不易，走过路过的小伙伴们，留个赞再走吧。
在这里插入图片描述

原文链接：https://blog.csdn.net/qq_39224105/article/details/111995146