CSS3超酷移动手机滑动隐藏側边栏菜单特效

Posted lcchuguo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS3超酷移动手机滑动隐藏側边栏菜单特效相关的知识,希望对你有一定的参考价值。

这是一组共4种效果很炫酷的CSS3移动手机滑动隐藏側边栏菜单特效。

这四种效果各自是:默认的点击滑动側边栏菜单效果、带3D transforms的滑动側边栏效果、文字缩放和淡入淡出效果的滑动側边栏以及使用translate来实现滑动側边栏的效果。
每个滑动側边栏效果都带有从右到左淡入淡出的滑动过渡效果。

菜单条中的菜单项以一个接一个的方式显示,这样的效果是通过为它们分别加入 transition-delay 来实现的。以下来看看默认的滑动側边栏效果的制作方法。

插件中使用了font-awesome图标字体,能够点击这里查看font-awesome图标字体的參考和用法

技术分享

在线演示:http://www.htmleaf.com/Demo/201503121509.html

下载地址:http://www.htmleaf.com/css3/daohangcaidan/201503121508.html




以上是关于CSS3超酷移动手机滑动隐藏側边栏菜单特效的主要内容,如果未能解决你的问题,请参考以下文章

移动端网页特效:左右滑动开关

Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动滚动插件

html5手机端的点击弹出侧边滑动菜单代码

【Axure】触摸屏上下滑动效果

用css3写一个移动端的正方形,在各种高分辨率的手机下都一样美观,求大神帮帮我

TouchSlide触屏滑动特效插件的使用