这是一组共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. HTML控件ID和NAME属性的区别，以及如何在asp.net页面的.CS文件中获得.ASPX页面中HTML控件的值

    在html中:name指的是用户名称,ID指的是用户注册是系统自动分配给用户的一个序列号. name是用来提交数据的,提供给表单用,可以重复: id则针对文档操作时候用,不能重复.如:document ...

  2. Java泛型反射机制（一）

    /** * * @author Administrator * 功能:泛型的必要性(参数化类型)(安全简单) */ package com.test; import java.util.*; publ ...

  3. 【Linux安全】文件或目录权限设置

    实例演示: 要求:新建文件夹,名称为secure,要求改文件夹只能被创建者deadmin以及与deadmin同组用户进行读.写.执行的权限, 其他用户均只有读的权限. 查看 一下secure原本的权限 ...

  4. java web路径的问题

    对于<form action="/xx"> 和 <a href='/xx'> 其中,xx相应的为网站根目录 一般网站为虚拟目录,所以要 写成   /web应 ...

  5. ActionBar官方教程(11)自定义ActionBar的样式(含重要的样式属性表及练习示例)

    Styling the Action Bar If you want to implement a visual design that represents your app's brand, th ...

  6. CentOS5.5 下编译安装 LAMP

    大纲 1.安装gcc编译器 2.卸载rpm安装的http和mysql软件 3.编译安装php依赖包 4.安装apache软件 5.安装mysql软件 6.安装php软件 7.安装memcache ph ...

  7. GIS数据格式：Shapefile

    转自:http://lab.osgeo.cn/2449.html Shapefile是ESRI提出的数据格式,随着ArcView GIS 3.x发布,属于简单要素类.Shapefile由于其数据结构简 ...

  8. Async callback to awaitable Task<> z

    http://blog.tedd.no/2013/09/13/async-callback-to-awaitable-task/ The Async-Await feature in .Net is ...

  9. [Tommas] 如何创建自动化功能测试的基本原则

    每个实行持续交付的项目,都有生产流水线的元素,如持续集成和自动化测试.这些测试是在不同层面进行的,从单元测试到冒烟测试再到功能测试.自动化功能测试的优点之一是可重复性和可预测的执行时间.出于这个原因, ...

  10. java含多个包的命令行下执行

    C:\Users\liyang\Desktop\BAE\Baidu-BCS-SDK-Java-1.4.5>java -classpath(可以cp简写) bcs-sdk-java_1.4.5.j ...