1200字范文 > HTMLCSS实现导航栏滑动背景效果

HTMLCSS实现导航栏滑动背景效果

时间：2023-03-31 16:09:58

相关推荐

HTMLCSS实现导航栏滑动背景效果

大家可以先看一下背景滚动的效果

这个效果需要注意的就是鼠标悬浮的时机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> </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>

最后，整理不易，走过路过的小伙伴们，留个赞再走吧。

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。