一。普通导航栏
对于这种普通的导航栏，只是鼠标滑过的时候颜色会变，所以思路变得很简单。
（1）使用ul标签布局
（2）鼠标经过事件
Home Content Service Team Contact
*{
padding:0;
margin:0;
list-style:none;
text-decoration:none;
}
a{
color:#fff;
}
#demo1{
width:600px;
}
#demo1 ul li{
float:left;
width:100px;
height:50px;
text-align:center;
background:#ccc;
line-height:50px;
color:#FFF;
}
#demo1 ul li:hover{
background:#999;
}（二）括号类导航栏
对于导航栏的排版这里就不多说了，可以看到当鼠标经过的时候会从文字中出现括号，思路：
（1）当无鼠标经过事件时，括号其实是有的，只不多它处于状态在文字中间
（2）当鼠标经过时，括号从中间移动到两边，并且从变为显示。
#demo2{
width:600px;
height:50px;
margin:20px auto;
}
#demo2 ul li{
position:relative;
float:left;
width:100px;
height:50px;
text-align:center;
line-height:50px;
background:#000;
}
#demo2 ul li a:before{
content:"[";
margin-right:10px;
transform:translateX(20px);
-webkit-transform:translateX(20px);
-moz-transform:translateX(20px);
-ms-transform:translateX(20px);
}
#demo2 ul li a:after{
content:"]";
margin-left:10px;
transform:translateX(-20px);
-webkit-transform:translateX(-20px);
-moz-transform:translateX(-20px);
-ms-transform:translateX(-20px);
}
#demo2 ul li a:before,#demo2 ul li a:after{
display:inline-block;
opacity:0;
transition:transform 0.3s, opacity 0.2s;
-moz-transition:transform 0.3s, opacity 0.2s;
-webkit-transition:transform 0.3s, opacity 0.2s;
-ms-transition:transform 0.3s, opacity 0.2s;
}
#demo2 ul li a:hover::before,#demo2 ul li a:hover::after,#demo2 ul li a:focus::before,#demo2 ul li a:focus::after {
opacity: 1;
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
transform: translateX(0px);
}三。滑动导航栏
从演示效果来看要注意两点
（1）鼠标经过时有横向从上到下
（2）鼠标经过时文字从上到下并且变换颜色
这就和上一个例子很像了
（1）横线其实是存在的，只不过鼠标没有经过时是在文字上方且透明的，鼠标经过时横线由上到下。
（2）文字这里就要定义一个动画了，因为在鼠标经过时它体现了三种状态：
①文字从现位置划下
②文字从出现在上方
③文字从上方滑到现位置
#demo3 ul li{
float:left;
margin:0 25px;
position:relative;
}
#demo3 ul li a{
color:#D8761E;
font-family:'Righteous', cursive;
display:block;
padding:10px 0;
}
#demo3 ul li span{
display:block;
}
#demo3 ul li a:before{
content:"";
position:absolute;
width:100%;
height:3px;
background:#D8761E;
bottom:0;
opacity:0;
-webkit-transform: translate3d(0, -40px, 0);
transform: translate3d(0, -40px, 0);
-webkit-transition: -webkit-transform 0s 0.3s, opacity 0.2s;
transition: transform 0s 0.3s, opacity 0.2s;
}
#demo3 ul li a:hover::before{
opacity:1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 0.5s, opacity 0.1s;
transition: transform 0.5s, opacity 0.1s;
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
#demo3 ul li a:hover span{
color:#510301;
-webkit-animation: anim-francisco 0.3s forwards;
animation: anim-francisco 0.3s forwards;
}
@-webkit-keyframes anim-francisco {
50% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
51% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes anim-francisco {
50% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
51% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}这里注意的是不能给标签设置宽高，因为一旦设置宽高会影响文字滑动路线，变得很夸张。这里加span也是这个原因，鼠标经过a时让span以a为参照进行滑动。
里面的标签就不解释了，自己查效果会更好哦。
我好无奈呀，用这个显示效果a标签和li的默认样式竟然不能取消，谁能告诉我为什么/(ㄒoㄒ)/~~ 不过自己编译的话在浏览器里是正常的
Copyright © 2019-2025 51dongshi.net 版权所有
违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务
