HTML5+CSS3小实例:手风琴式加载动画

html-css019

HTML5+CSS3小实例:手风琴式加载动画,第1张

HTML5+CSS3做一个手风琴式的加载动画,这动画、这质感、这配色,就问你喜不喜欢?!这个案例的知识点主要是:css的自定义属性 + 动画延迟 + 颜色滤镜(hue-rotate)。

效果:

源码:

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

技术栈:HTML+CSS

字体图标库:font-awesome

效果:

源码:

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

效果:

源码: