CSS实现炫酷导航栏

实现思路

本导航栏的实现，通过使用伪元素:before和:after这两个伪元素在真正页面元素a标签之前和之后添加新内容（边框，背景颜色），使用transition属性设置过渡效果的时间，再使用:hover选择器来显示。效果如下：
导航栏效果

HTML代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>炫酷导航栏实现</title><!--导入css样式 --><link rel="stylesheet" type="text/css" href="../css/nav.css"/></head><body><div class="nav"><ul class="item"><li><a href="#">首页</a></li><li><a href="#">技能</a></li><li><a href="#">团队</a></li><li><a href="#">介绍</a></li><li><a href="#">经历</a></li><li><a href="#">关于我们</a></li></ul></div></body>
</html>

CSS代码

body{margin: 0;padding: 0;font-family: sans-serif;height: 2000px;
}
.nav{width: 100%;height: 100px;background-color: #00FFFF;
}
.item{position: fixed;/*固定在页面顶部*/top:10px;right:20px;margin: 0;padding: 0;display: flex;/*弹性布局，使li排成一行*/
}
.item li{list-style: none;
}
.item li a{position: relative;display: block;padding: 10px 20px;margin: 20px 0;text-decoration: none;text-transform: uppercase;/*将字符转为大写*/color: #262626;font-weight: bold;/* transition: 0.5s; */
}
.item li a:hover{color:#fff;
}
.item li a:before{/*a:before，在a链接之前添加新内容，这里添加上下边框*/content:'';position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-top:1px solid #000;border-bottom:1px solid #000;transform: scaleY(2);/*拉长边框两倍*/opacity: 0;/*边距不显示*/transition: 0.5s;z-index: -1;
}
.item li a:hover:before{transform: scaleY(1);/*拉长边框两倍*/opacity:1;
}
.item li a:after{content:'';position: absolute;top: 1px;left: 0;width: 100%;height: 100%;background: #000;transform: scale(0);transition: 0.5s;z-index: -1;
}
.item li a:hover:after{transform: scale(1);
}

CSS实现炫酷导航栏相关推荐

android 打造炫酷导航栏（仿UC头条）
年后开始上班甚是清闲,所以想捣鼓一些东西.在翻阅大神杰作Android 教你打造炫酷的ViewPagerIndicator 不仅仅是高仿MIUI 的时候看到下面有一条评论说,如果导航栏能滑动就更好了. ...
css3制作炫酷导航栏效果转
今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简 ...
html炫酷的导航栏效果,css3制作炫酷导航栏效果
今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简 ...
php 3d animation,CSS_纯CSS实现菜单、导航栏的3D翻转动画效果，我曾经向大家展示过闪光的logo - phpStudy...
纯CSS实现菜单.导航栏的3D翻转动画效果我曾经向大家展示过闪光的logo,燃烧的火狐狸,多重嵌套动画等例子,今天,我们将要制作一个简单但非常酷的3D翻转菜单.大家可以先看看实际效果,下面有效果截图 ...
HTML+CSS实现炫酷的登录界面
你好,我是罡罡同学! 代码谱第一页忘掉心上人,最后一页...... 谢谢大家的支持,您的一键三连是罡罡同学前进的最大动力! 打赏一点钱,帮我买包辣条,继续创作,谢大家! 一键三连一键三连一键三连 ...
直播app开发搭建，纯css/html实现侧边导航栏
直播app开发搭建,纯css/html实现侧边导航栏 css代码: *{margin: 0px;padding: 0px;}#box{position: absolute;height: 300px; ...
使用html，css实现简单的导航栏
标题:使用html,css实现简单的导航栏一.实现过程首先通过ul,li实现一个无序列表,添加背景得到如图所示的样式[文档流] 让li浮动,使得垂直排列–>水平排列,[注意需要开启bfc,让 ...
精致纯CSS打造绿色漂亮导航栏
代码简介: 极精致的纯CSS实现的菜单,兼容性非常好,条例WEB标准,能用性好,用到有修饰图片,请根据代码地址自己下载. 代码内容: <!DOCTYPE html PUBLIC "-/ ...
html+css实现页面顶部导航栏
最终效果如下: 接下来,我将从html和css两大部分,逐步为您讲解制作过程目录 Html 实现布局创建父栏目创建子栏目插入外部样式表,为接下来的css编辑做准备 Css 实现样式排布文本, ...

CSS实现炫酷导航栏

实现思路

HTML代码

CSS代码

CSS实现炫酷导航栏相关推荐

最新文章

热门文章