演示：http://jsfiddle.net/Adce2/

其主要思想：

1， 先画边栏html。

2， 使用css3分别财产close sidebar-content动图片。

3， 使用css3的keyframes要定义动画的风格。

版权声明：本文博客原创文章，博客，未经同意，不得转载。

css3仿山猫侧边栏的更多相关文章

  1. 很酷的CSS3仿Facebook登录表单

    原文:很酷的CSS3仿Facebook登录表单 今天看到一款很不错的CSS3登录表单,外观是仿Facebook的登录表单,还挺不错的,另外也支持简单的表单输入框验证.下图是表单的效果图: 我们也可以在 ...

  2. jquery实现仿京东侧边栏

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. CSS3 仿微信聊天小气泡

    今天给大家分享一个我刚做的项目中的一个小案例, 因为我们在做一个聊天的功能,之前的聊天页面UI很丑,我就不在这里展示给大家了. 现在就教大家怎么用css3制作一个和微信聊天界面一样的页面. 首先给大家 ...

  4. 一款CSS3仿Google Play的垂直菜单

    之前分享过一款非常酷的CSS3垂直下拉动画菜单,是多级菜单.今天我们来看一款也是用CSS3制作的垂直菜单,是仿Google Play的菜单,菜单项都带有可爱的小图标,可以先来看看效果图: 当然你可以在 ...

  5. Android实现仿qq侧边栏效果

    最近从github上看到一个关于侧边栏的项目,模仿的是qq侧边栏. Github地址是https://github.com/SpecialCyCi/AndroidResideMenu ,这个项目是一个 ...

  6. jQuery css3仿游戏网站右键环形菜单

    效果展示 http://hovertree.com/texiao/jquery/86/ PC用户右键弹出环形菜单. 手机用户扫描二维码: 长安可以弹出环形菜单. 转自:http://hovertree ...

  7. android自定义View之仿通讯录侧边栏滑动，实现A-Z字母检索

    我们的手机通讯录一般都有这样的效果,如下图: OK,这种效果大家都见得多了,基本上所有的android手机通讯录都有这样的效果.那我们今天就来看看这个效果该怎么实现. 一.概述 1.页面功能分析 整体 ...

  8. jQuery实际案例⑤——仿京东侧边栏（楼层）

    楼层:①页面滑动到哪块儿“楼层”就显示到哪个:②点击某“楼层”页面滚动到对应的位置:③点击“返回”回到页面顶部 实现:①使用$(window).scroll(function(){ });  //监视 ...

  9. 19款绚丽实用的jQuery/CSS3侧边栏菜单

    jQuery作为一款主流的JavaScript前端开发框架,深受广告开发者的亲睐,同时jQuery有着不计其数的插件,特别是菜单插件更为丰富,本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单 ...

随机推荐

  1. [Java 8] (6) Lambda与资源管理

    资源处理 Java本身自带了垃圾回收(Garbage Collection)功能.可是仅仅有垃圾回收的目标是内部资源(Internal Resource),典型的比方堆上分配的内存区域等.对于外部资源 ...

  2. ajax文本空输入显示用户信息

    一般文件代码 public void ProcessRequest (HttpContext context) { //获取主见值 string s = context.Request["u ...

  3. [计算机基础]关于实体( Entity )和模型( Model )

    实体与模型的浅析 在日常开发过程中经常看到Entity,Model,DataModel,它们之间到底有什么异同?下面是我个人的一些理解. 一.Entity,Model,它们是什么? 维基百科描述: 实 ...

  4. form表单标签的enctype属性的作用

    Enctype是指定将数据回发到server时浏览器使用的编码类型.其编码类型有下面三种 一. application/x-www-form-urlencoded         这是通过表单发送数据 ...

  5. 面向接口可扩展框架之“Mvc扩展框架及DI”

    面向接口可扩展框架之“Mvc扩展框架及DI” 标题“Mvc扩展框架及DI”有点绕口,我也想不出好的命名,因为这个内容很杂,涉及多个模块,但在日常开发又密不可分 首先说Mvc扩展框架,该Mvc扩展就是把 ...

  6. tmpfs（/dev/shm）

    tmpfs是一种基于内存的文件系统,它和虚拟磁盘ramdisk比较类似像,但不完全相同,和ramdisk一样,tmpfs可以使用RAM,但它也可以使用swap分区来存储.而且传统的ramdisk是个块 ...

  7. JAVA WEB开发环境搭建教程

    一.下载安装JDK,配置好环境变量.(例如我JDK安装的目录为:C:\Program Files (x86)\Java\jdk1.6.0_10     ) 点击我的电脑-属性-系统设置(高级系统设置) ...

  8. Cocos2d-x内存管理解说在ios开发中

    使用过 Cocos2d-x 都知道,其中有一套自己实现的内存管理机制,不同于一般 C++ 的编写常规,而在使用前,了解其原理是有必要的,网上已经有很多对内部实现详细解说的文章.而对于使用者而言,并不需 ...

  9. 以正确的方式开源 Python 项目 - 技术翻译 - 开源中国社区

    以正确的方式开源 Python 项目 - 技术翻译 - 开源中国社区 以正确的方式开源 Python 项目 英文原文:Open Sourcing a Python Project the Right ...

  10. 201215-03-19---cocos2dx内存管理--具体解释

    因为cocos2dx我们的使用c++写的,所以内存管理就是一个绕只是去的坎,这个你不懂内存仅仅懂业务逻辑的话,还玩什么c++,今天看了半天这个东西,事实上本质上是理解的,可是就是有一个过不去的坎,最终 ...