css实现滑动导航栏

效果如图

代码如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}body {display: flex;width: 100%;height: 100vh;justify-content: center;align-items: center;background-color: rgb(17, 55, 87);}nav {position: relative;width: 590px;height: 50px;background-color: rgb(20, 66, 104);border-radius: 8px;box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);}nav a {z-index: 10;position: relative;display: block;float: left;font-size: 15px;line-height: 50px;width: 100px;height: 50px;text-decoration: none;text-transform: uppercase;color: #ffff;text-align: center;}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;top: 0;left: 0;width: 100px;height: 100%;background-color: #f97f51;z-index: 1;transition: all 0.3s;border-radius: 8px;}nav a:nth-child(1):hover~.animation {width: 100px;left: 0px;}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="#">conanct</a><div class="animation"></div></nav></div>
</body></html>

css实现滑动导航栏相关推荐

采用CSS+JS实现简洁的滑动导航栏_网页代码站(www.webdm.cn)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...
html横向导航栏滑动效果,JavaScript实现滑动导航栏效果
本文实例为大家分享了js实现滑动导航栏效果的具体代码,供大家参考,具体内容如下 *{ margin: 0; padding: 0; } .navScroll{ position: relative; ...
微信小程序实现左侧滑动导航栏
微信小程序实现左侧滑动导航栏 1.左侧滑动导航栏图如下 2.这是我们左侧滚动栏的代码 wxml <view class='under_line'></view><view ...
微信小程序滑动导航栏
微信小程序可以使用组件库中的 scroll-view 组件和 swiper 组件实现滑动导航栏. 下面是一个使用 scroll-view 组件实现滑动导航栏的例子: 在 .wxml 文件中定义 scr ...
css+div实现导航栏
css+div实现导航栏把页面分成两个部分,用div装起来 <body><div class="one1"><h1>SYROS</h1& ...
HTML css jQuery实现导航栏(华丽动画)
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>H ...
搜索导航HTML,CSS 带搜索导航栏的示例代码
本文为大家介绍如何使用 CSS 创建一个带搜索的导航栏. 以下实例均是响应式的. 可以先看下效果图: 创建一个搜索栏主页关于联系我们 /* 在顶部导航栏中添加黑色背景颜色 */ .topnav ...
html+css简单立体导航栏
html+css简单立体导航栏一.简单立体导航栏效果二.代码实现 1.html 2.css 一.简单立体导航栏效果二.代码实现 1.html 代码如下(示例): <!DOCTYPE htm ...
【源码分享】jquery+css实现侧边导航栏
jquery+css实现侧边导航栏最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...

css实现滑动导航栏

效果如图

代码如下

css实现滑动导航栏相关推荐

最新文章

热门文章