新css3导航特效

说起特效,感觉还是css3的效果好,加载速度快,便于修改,这里从茶话博客这里找到一款css3导航。
但是貌似最近不流行这种特效了。
现在流行的精简风格,先记录下来备用。

以下转自http://www.xinsenz.com/archives/1159.html

 

实现方法,给菜单栏添加CSS效果:

#menu ul li a {
    displayblock;
    border-bottom0;
    color#6a6a6a;
    line-height40px;
    text-transformuppercase;
    text-decorationnone;
    positionrelative;
    height41px;
    margin-bottom-1px;
}
#menu ul li a:after,
#menu ul li a:before {
    positionabsolute;
    width0;
    height1px;
    left50%;
    bottom0;
    border-bottom1px solid #6a6a6a;
    content: “”;
    z-index999;
        -webkit-transition: width .3s, left .3s;
        -moz-transition: width .3s, left .3s;
        transition: width .3s, left .3s;
}
#menu ul li a:hover:before {
    left0;
    width60%;
}
#menu ul li a:hover:after {
    width50%;
}

 


这个效果在在IE10、chrome和firefox上都能正常显示,由于浏览器版本的原因,可能会出现不支持的现象,那么只需在你header部分给菜单栏手动添加属性ID,

1.<a id=“hover-animate”>你的菜单栏对应的属性名称<span class=“hover-animate-left”></span><span class=“hover-animate-right”></span></a>

然后再加CSS效果

#hover-animate {
color:#21759b!important;
cursor:pointer;
margin-left:20px;
display:inline-block;
border-bottom:0;
color:#6a6a6a;
text-transform:uppercase;
text-decoration:none;
position:relative;
text-decoration:none;
}
.hover-animate-left,.hover-animate-right {
position:absolute;
width:0;
height:1px;
left:50%;
bottom:0;
border-bottom:1px solid #6a6a6a;
content:“”;
z-index:999;
-webkit-transition:width .3s,left .3s;
-moz-transition:width .3s,left .3s;
transition:width .3s,left .3s;
}
#hover-animate:hover .hover-animate-left {
left:0;
width:60%;
}
#hover-animate:hover .hover-animate-right {
width:50%;
}
0

Related Posts

Comments

发表评论

电子邮件地址不会被公开。 必填项已用*标注