演示：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. 【设计模式】Singleton模式C++实现

    Singleton是设计模式中比较简单的一个.园中的朋友们应该都很熟悉了.前段时间参加xxx外企的面试,和面试官讨论C++的时候正好写了一个.当时由于在有些地方考虑不太周全,代码出现了一些疏漏.不过最 ...

  2. linux 怎么使用一个c/c++库

    linux 怎么使用一个c/c++库 使用一个库,库有动态和静态之分. 静态库只要能够编译通过,运行时就没有提示缺少这个库可能,因为把这个库就是这个使用者的一部分了.动态库.两部分.1 库信息的注册 ...

  3. Mybatis+Struts2的结合:实现用户插入和查找

    总结一下今天一个成功的小实验:Mybatis+Struts2的结合:实现用户插入和查找.删除和修改如果以后写了,会继续更新. 一 准备工作. 1.新建一个java web项目. 2.在webConte ...

  4. 积累的VC编程小技巧之组合框

    1.如何正确的得到ComBox的指针 CComboBox *mComb = (CComboBox*)GetDlgItem(IDC_DuanCB); CComboBox *mComb = (CCombo ...

  5. Oracle定时执行存储过程（转）

    定时执行存储过程在平时开发中经常会用到,年前的时候自己也做了一个,由于时间关系一直没能记录,现记录下来.       首先用一个完整的例子来实现定时执行存储过程. 任务目标:每小时向test表中插入一 ...

  6. java过滤html标签函数

    public static String Html2Text(String inputString) {              String htmlStr = inputString; //含h ...

  7. 无状态TCP的ip_conntrack

    Linux的ip_conntrack实现得过于沉重和精细.而实际上有时候,根本不需要在conntrack中对TCP的状态进行跟踪,只把它当UDP好了,我们的需求就是让系统可以将一个数据包和一个五元组标 ...

  8. sqlit使用要点之引入libsqlite3.dylib

    怎样引入libsqlite3.dylib? 在.h 或 .cpp文件里包括相应的头文件

  9. cocos2d-x-3.1 事件分发机制 (coco2d-x 学习笔记七)

    触摸事件 Sprite* sp1 = Sprite::create("Images/t1.png"); sp1->setPosition(Vec2(visibleSize.w ...

  10. firebug登陆之数据包分析

    登陆之数据包分析 工具: python-urllib2   |  firefox+firebug或者chrome,用浏览器打开登陆页面之后,按F12键会默认打开开发者工具或者启动firebug,点击n ...