演示：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. J2EE之初识JSP

    上篇博客已经简介了下Servlet.从上篇博客中能够看到.Servlet获得返回来的数据后.显示给client时,须要不断的拼串.从而构成完整的html页面,这就在无形中加大了程序猿的压力和劳动力.而 ...

  2. uva 11475 - Extend to Palindrome(KMP)

    option=com_onlinejudge&Itemid=8&category=506&page=show_problem&problem=2470" ta ...

  3. VirtualBox集群建立和网络配置

    安装 1. 安装 安装Oracle VM VirtualBox之后,新建一个虚拟机,制定好内存等信息,开始安装操作系统,这里安装ubuntu-12.04.2-desktop-i386版本. 2. 拷贝 ...

  4. 14.4.5 Configuring InnoDB Change Buffering 配置InnoDB Change Buffering

    14.4.5 Configuring InnoDB Change Buffering 配置InnoDB Change Buffering 当INSERT,UPDATE,和删除操作在表上操作, 索引列的 ...

  5. Linux程序设计学习笔记----多线程编程线程同步机制之相互排斥量(锁)与读写锁

    相互排斥锁通信机制 基本原理 相互排斥锁以排他方式防止共享数据被并发訪问,相互排斥锁是一个二元变量,状态为开(0)和关(1),将某个共享资源与某个相互排斥锁逻辑上绑定之后,对该资源的訪问操作例如以下: ...

  6. 《转》Linux下的多线程编程

    原地址:http://linux.chinaunix.net/doc/program/2001-08-11/642.shtml 1 引言 线程(thread)技术早在60年代就被提出,但真正应用多线程 ...

  7. Android 编译时出现r cannot be resolved to a variable

    问题:编译出现r cannot be resolved to a variable 原因:SDK的Tools没有安装 解决:在Android SDK Manager中安装Tools部分,包括如下4项, ...

  8. Java NIO的性能

    最近调研了一下mina和netty框架的性能,主要是想了解java nio在单机能支持多少长连接. 首先,mina的qq群有同学反映说单机支持3w长连接是没问题的 其次,http://amix.dk/ ...

  9. IOS线程操作（3）

    采用CGD更有效的比前两个(它被认为是如此,有兴趣的同学可以去试试). 这是推荐的方式来使用苹果的比较. GCD它是Grand Central Dispatch缩写,这是一组并行编程C介面. GCD是 ...

  10. zend framework将zip格式的压缩文件导入并解压到指定文件

    html代码 <pre class="php" name="code"><fieldset> <legend>批量导入学生照 ...