html 左侧导航动画,CSS3侧边栏动画导航条

侧边栏导航条

分享一个带动画效果的导航条，滑出块宽度根据文字多少自适应，下边简单说下实现方法。

预览地址：CSS3侧边栏动画导航条

html结构

结构比较简单，就是一个a标签包含两个子标签，其中i是用来放矢量字体图标，当然也可以是图片，span标签来放文字。



博客首页



技术相关



作品分享



游戏人生



闲言碎语



小技巧



css样式

关于样式方面，挑出需要注意的说一下，其他比较简单就略过了。

sideNavBar的高度用的是height: 100vh，vh这个单位还是比较厉害的，如果直接用100%高度的话，需要先给html、body设置百分百高度才行，而用vh的话，就是直接根据视窗的高度计算进行计算。

i以及span需要设置一下层级，让i的z-index在span之上。

span的宽度问题，如果直接用width:auto的话，会发现失去了过渡效果，可以用max-width:200px来代替width:auto，不过我觉得用transform: scaleX()来实现更好一些，不过用transform: scaleX()的话记得设置transform-origin: left，来指定基点位置。

4. 为了让span的文字不会重叠到i标签上，需要设置文字的颜色从透明到白色，然后给个较短的过渡时间。

下边是span的css：

.sideNavBar > a > span{

white-space:nowrap;

padding-left: 70px;

padding-right: 30px;

font-size: 16px;

background: #00baff;

color: transparent;

transform-origin: left;

transform: scaleX(0);

transition: transform .3s, color .1s;

}

.sideNavBar > a:hover > span{

transform: scaleX(1);

color: #fff;

}

ok，例子也比较简单，没什么过多可说的，就到这里了。