演示：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. JPA的Embeddable注解

    来源于http://zjsword2000.blog.163.com/blog/static/4583983320083184844734/ 在hibernate中实现自定义类型,只要实现UserTy ...

  2. Git权威指南学习笔记（二）Git暂存区

    例如以下图所看到的: 左側为工作区,是我们的工作文件夹. 右側为版本号库,当中: index标记的是暂存区(stage),所处文件夹为.git/index,记录了文件的状态和变更信息. master标 ...

  3. [Android开发Tips]Bean的定义

    Bean: public class Data extends BaseBean { public ArrayList<DataItem> data = new ArrayList< ...

  4. timesten升级

    ttIsql "DSN=ttwind;UID=cacheuser;PWD=cacheuser;OraclePWD=cacheuser;" --1.查看当前版本号 Command&g ...

  5. TCP连接的建立（二）

    被动打开 SYN cookies TCP协议开辟了一个比較大的内存空间请求连接队列来存储连接请求块,当SYN请求不断添加,请求连接数目到达上限时,会致使系统丢弃SYN连接请求.SYN cookies技 ...

  6. codeforces 659C Tanya and Toys

    题目链接:http://codeforces.com/problemset/problem/659/C 题意: n是已经有的数字,m是可用的最大数字和 要求选自己没有的数字,且这些数字的数字和不能超过 ...

  7. BEGINNING SHAREPOINT&#174; 2013 DEVELOPMENT 第3章节--SharePoint 2013 开发者工具 站点设置

    BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第3章节--SharePoint 2013 开发者工具 站点设置         你应该熟悉(假设还咩有)的SharePo ...

  8. selenium2支持无界面操作(HtmlUnit和PhantomJs)

    selenium2支持无界面操作(HtmlUnit和PhantomJs) selenium2支持通过各种driver(FirfoxDriver,IternetExplorerDriver,OperaD ...

  9. 蜗牛—JSONJ学习ava转变

    最近,写网站管理员,使用异步通信技术,所使用的方法是JSON数据传输模式 需要以下jar文件 然后,自己写了一点点经常使用代码 Java的List和数组要用JSONArray对象 Map和实体用JSO ...

  10. jvm理论

    三大流行jvm sun HotSpot ibm j9 BEA JRockit Oracle 会基于HotSpot整合 JRockit. jvm运行时数据区 java虚拟机所管理的内存将会包括以下几个运 ...