这是一组共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. phpexcelreader超级简单使用

    phpexcelreader超级简单使用 该php类可以到官网下载:http://www.codeplex.com/PHPExcel,下载的文件不能直接使用要看下面的备注. 备注: 1.要将olere ...

  2. [unity菜鸟] 修改发布成web后的logo

    1. 原始效果  (tip:在4.x的书中有介绍) 2. 打开.html文件原始代码如下 <script type='text/javascript' src='jquery.min.js'&g ...

  3. Android USB Host 与 HID 之通讯方法

    Android USB Host与HID通讯,就目前Google Developer提供的方法有bulkTransfer()与controlTransfer(),看是简简单单的两个方法,要实现真正的通 ...

  4. Delphi捕捉DLL执行所抛出的异常。

    先来说一下我如何写我的Dll文件的. 先看代码: 代码 Code highlighting produced by Actipro CodeHighlighter (freeware)http://w ...

  5. Android TabActivity与Activity之间的动画跳转(主要Tabhost中跳转出来的动画效果解决)

    首先,要说的是ActivityA到ActivityB的切换这个相对简单,只要overridePendingTransition(In,out). 这里不就说了.但是这里要说名的ActivityA不能T ...

  6. prim（与边无关，适合稠密的图，o(n^2)）---还是畅通工程

    题目1017:还是畅通工程 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:1653 解决:838 题目描述:     某省调查乡村交通状况,得到的统计表中列出了任意两村庄间的距离.省政府“ ...

  7. Linux 启动参数介绍

    Linux 启动参数介绍 取自2.6.18 kernel Documentation/i386/boot.txt 文件中介绍 vga= 这里的不是一个整数(在C语言表示法中,应是十进制,八进制或者十六 ...

  8. c语言main函数的参数argc，argv说明

    main函数参数argc,argv说明   C/C++语言中的main函数,经常带有参数argc,argv,如下: int main(int argc, char** argv) int main(i ...

  9. c# 模拟http post 带cookie

    下面的代码是自动向cnblogs中的小组发帖.........注意小组ID,主题ID,小组类型 首先采用firebug分析到发帖时的post地址以及参数,其中在headers中包含了cookies,把 ...

  10. ReentrantReadWriteLock读写锁的使用

    Lock比传统线程模型中的synchronized方式更加面向对象,与生活中的锁类似,锁本身也应该是一个对象.两个线程执行的代码片段要实现同步互斥的效果,它们必须用同一个Lock对象. 读写锁:分为读 ...