HTML5+CSS3小实例：伸缩式动态搜索框

HTML5+CSS3小实例之伸缩式动态搜索框

技术栈：HTML+CSS

字体图标库：font-awesome

效果：

源码：

HTML5+CSS3做一个后台管理系统的侧边导航栏，点击三条杠，可以收起或展开侧边导航栏。收起时，图标变大，文本在图标下方，管理员头像右侧的欢迎语隐藏；展开时图标变小，文本在图标的右侧显示，管理员头像右侧的欢迎语显示。切换过程伴有过渡动画，右侧内容区可以放自己的内容。

效果：

源码：

---