水平导航栏+导航栏跟随+导航栏下划线滑动效果
先放代码：
HTML：
Home
CSS：
@charset "utf-8";
body {
height: 2420px;
background-color: #CDE1FB;
padding: 0;
marging: 0
}
/*logo条*/
.logo-bar {
background-color: #C4B956;
height: 40px;
font-size: large;
vertical-align: middle;
text-align: center;
line-height: 40px;
}
/*导航条*/
.nav-bar {
height: 40px;
background-color: #98E1C9;
text-align: center;
font-size: large;
line-height: 40px;
padding: 0;
marging: 0;
width: 100%;
}
/*导航条跟随*/
.nav-bar-fixed {
position: fixed;
top: 0px;
z-index: 1;
background-color: #FF6668;
opacity: 0.68;
width: 100%;
}
/*导航条下li*/
.nav-bar> li {
display: inline-block;/*让li水平排列*/
}
/*导航条下a*/
.nav-bar> li > a {
display: block;
position: relative;
text-decoration: none;
color: #000000;
-webkit-transition: color .1s ease-in-out;
transition: color .1s ease-in-out;
margin-left: 75px; /*颜色递进*/
margin-right: 75px;
}
.nav-bar> li > a:hover {
color: #00ABFF;
}
/*导航栏下划线效果右进右出，需要设置父元素li：position: relative;*/
.nav-bar> li > a:after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-bottom: solid 1px;
transform: scaleX(0);
transform-origin: right;/*改为center就是中间向外延伸*/
-webkit-transition: transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
color: #0023FF;
}
/*导航栏下划线效果：右进改为左进*/
.nav-bar> li > a:hover:after {
transform-origin: left;
transform: scaleX(1);
}
ok，开始正题。
首先要清楚导航栏的元素结构，其中里面可以使用将文字包围，这里因为制作文字下划线效果的需要，直接添加文字
想让导航栏变成水平，关键是：其中有关display属性的三种不同效果的区别可自行百度
/*导航条下li*/
.nav-bar> li {
display: inline-block;/*让li水平排列*/
}
顺便给导航条的ul加上效果后，水平导航栏就差不多了。
第二步是导航栏跟随：简单来说就是js读取页面高度并判断，达到一定高度的时候就为导航条加一个类（即一个新的样式，该样式根据浏览器进行绝对定位），小于这个高度就移除这个类。
HTML：
CSS：
/*导航条跟随*/
.nav-bar-fixed {
position: fixed;
top: 0px;
z-index: 1;
background-color: #FF6668;
opacity: 0.68;
width: 100%;
}
第三步，导航栏下划线效果，这个最刺激：
CSS：
/*导航条下a*/
.nav-bar> li > a {
display: block;
position: relative;
text-decoration: none;
color: #000000;
-webkit-transition: color .1s ease-in-out;
transition: color .1s ease-in-out;
margin-left: 75px; /*颜色递进*/
margin-right: 75px;
}
.nav-bar> li > a:hover {
color: #00ABFF;
}
这里分为上下两部分：
上面部分：主要是对a标签的原始效果进行一些修改，去掉本身的下划线什么的，顺便添加一个鼠标滑过时的颜色渐变效果
下面部分：
首先要对父元素li设置position: relative，然后在对a元素后面添加一个空的内容（不懂的去百度:after），并设置position: absolute（absolute是相对除了static外的第一个父元素定位的，如果没有对li设置position: relative，那么这个空内容会跑到body后面去了）。
接下来解释一下transform: scaleX(0);和width: 100%;，transform: scaleX(0);的意思是缩小到原来的0%，就是隐藏了；组合在一起的意思就是原本的宽度是100%，但先设置为隐藏；在:hover时变为transform: scaleX(1);，即出现。
此时的效果是鼠标移入时下划线出现，鼠标移走时下划线消失。
1、2、3处少了几个关键的效果，接下来讲解：
先是2：transition: transform 0.3s ease-in-out;，这句话加上去之后，效果会变成下划线有划入的效果，效果为从中间向两边延伸。
在1处加入：transform-origin: right;，效果会变成从右向左慢慢出现，再原样消失
在3处加入：transform-origin: left;，效果会变成，从左到右慢慢出现，再继续往右逐渐消失
/*导航栏下划线效果右进右出，需要设置父元素li：position: relative;*/
.nav-bar> li > a:after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-bottom: solid 1px;
transform: scaleX(0);
1
2
color: #0023FF;
}
.nav-bar> li > a:hover:after {
3
transform: scaleX(1);
}
懒得截图了，也就2个文件复制粘贴一下就完了
ps：a标签的如果没有href属性时，鼠标样式是会变成文本选择而不是手指形状