这是一组共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超酷移动手机滑动隐藏側边栏菜单特效的更多相关文章

  1. 5个基于css3超炫的鼠标滑动按钮动画

    今天给大家分享5个基于css3超炫的鼠标滑动按钮动画.这5个按钮鼠标经过的时候有超炫的动画效果.这5个按钮适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之 ...

  2. 基于jQuery和CSS3超酷Material Design风格滑动菜单导航特效

    分享一款效果非常炫酷的谷歌 Material Design 风格jQuery和CSS3滑动选项卡特效.该选项卡特效集合了扁平风格设计和按钮点击波特效.是一款设计的非常不错的Material Desig ...

  3. jQuery和CSS3超酷表单美化插件

     这是一款效果很精美炫酷的jQuery和CSS3联系方式表单美化插件.大多数站点上都有让用户填写的联系方式表单,一个设计良好的表单可以大大的提升用户的体验度.该表单美化插件在原生HTML表单的基础上进 ...

  4. 纯CSS3超酷3D旋转立方体动画特效

    简要教程 这是一款神奇的纯 CSS3 立方体动画特效插件.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3 展现了它无穷的魅力.使 ...

  5. HTML5/CSS3超酷环形动画菜单

    在线演示 本地下载

  6. 10款基于HTML5+CSS3实现的超酷源码动画

    1.基于Bootstrap的jQuery登录表单 这是一款基于Bootstrap的登录表单,表单的外观自然不用说,沿用了Bootstrap的风格,非常漂亮.这款登录表单有一个经过CSS3处理过的头像图 ...

  7. iOS之滑动隐藏导航

    滑动隐藏导航狼栏 -(void)scrollViewDidScroll:(UIScrollView *)scrollView{ CGFloat offsetY = scrollView.content ...

  8. 【超酷超实用】CSS3可滑动跳转的分页插件制作教程

    原文:[超酷超实用]CSS3可滑动跳转的分页插件制作教程 今天我要向大家分享一款很特别的CSS3分页插件,这款分页插件不仅可以点击分页按钮来实现分页,而且可以滑动滑杆来实现任意页面的跳转,看看都非常酷 ...

  9. 9款超酷的jQuery/CSS3插件

    Article From here: http://js.itivy.com/?p=1883 1.jQuery向前滑动切换焦点图 这款jQuery焦点图非常绚丽,切换图片的时候每张图片是向前滑动的,很 ...

随机推荐

  1. html5学习链接

    http://www.runoob.com/tags/html-colorpicker.html

  2. Oracle系列之异常处理

    涉及到表的处理请参看原表结构与数据  Oracle建表插数据等等 使用select into语句读取tb_Employee的一行,使用异常处理处理no_data_found和two_many_rows ...

  3. ruby2.2.2在msvc2010上编译

    ruby2.2.2在msvc2010上编译有些问题,主要是msvc2010不支持c99,ruby有些扩展源代码例如ffi.c局部变量没有在block的起始位置定义,导致编译器报错. 办法 1.用支持c ...

  4. keychain中我的证书与证书, p12与pem, apns, 推送

    如果在A电脑上生成 的apns, 到B电脑上导入此文件时, 在 "我的证书"中找不到, 要去"证书"才能找到, 因为 创建时的csr不是本机生成的. 那这样的话 ...

  5. C#格式化数值结果表

    C#格式化数值结果表 字符 说明 示例 输出 C 货币 string.Format("{0:C3}", 2) ＄2.000 D 十进制 string.Format("{0 ...

  6. BrnShop开源网上商城第三讲：插件的工作机制

    这几天BrnShop的开发工作比较多,所以这一篇文章来的晚了一些,还请大家见谅呀!还有通知大家一下BrnShop1.0.312版本已经发布,此版本添加了报表统计等新功能,需要源码的园友可以点此下载.好 ...

  7. Vim 的粘贴复制功能

    Vim作为最好用的文本编辑器之一,使用vim来编文档,写代码实在是很惬意的事情.每当学会了vim的一个新功能,就会很大地提高工作效率.有人使用vim几十年,还没有完全掌握vim的功能,这也说明了vim ...

  8. Android 访问 wcf

    IService1.cs 添加的接口 [OperationContract] [WebInvoke(Method = "POST", BodyStyle = WebMessageB ...

  9. Html笔记(四)图像

    图像标签: <img> <img src="../dir/file" alt="说明文字" height width border/> ...

  10. Hadoop新手学习线路指导

    对于我们新手入门学习hadoop大数据存储的朋友来说,首先了解一下云计算和云计算技术是有必要的.下面先是介绍云计算和云计算技术的:              云计算,是一种基于互联网的计算方式,通过这 ...