说起特效，感觉还是css3的效果好，加载速度快，便于修改，这里从茶话博客这里找到一款css3导航。
但是貌似最近不流行这种特效了。
现在流行的精简风格，先记录下来备用。
以下转自http://www.xinsenz.com/archives/1159.html
实现方法，给菜单栏添加CSS效果：
#menu ul li a { display: block; border-bottom: 0; color: #6a6a6a; line-height: 40px; text-transform: uppercase; text-decoration: none; position: relative; height: 41px; margin-bottom: -1px;}#menu ul li a:after,#menu ul li a:before { 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;}#menu ul li a:hover:before { left: 0; width: 60%;}#menu ul li a:hover:after { width: 50%;}
这个效果在在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%;}
Comments