微博上看到这样一篇文章（http://js.itivy.com/?p=495），用jquery和css3制作左右拉伸动画菜单，看了下实现效果（http://js.itivy.com/jiaoben963/index.html），感觉用css3就够了，不需要jquery。于是尝试了下，只用css3基本上也实现了原文的效果，如下：

点击顶栏的result可以看到效果，未作浏览器兼容性优化。

css3制作左右拉伸动画菜单的更多相关文章

  1. 非常酷的CSS3垂直下拉动画菜单

    昨天我向大家介绍了一款兼容性不错的jQuery淡入淡出下拉菜单,今天要分享一款相对绚丽的CSS3垂直下拉动画菜单,不过需要支持CSS3的浏览器才能有效果.下面是效果图,一起看看. 我们也可以在这里查看 ...

  2. 利用CSS3制作淡入淡出动画效果

    CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致. 利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态 ...

  3. CSS3/jQuery创意盒子动画菜单

    作为前端开发者,各种各样的jQuery菜单见过不少,这款jQuery/CSS3菜单却是别具一格,菜单项嵌入到九宫格中,像小盒子一样,加上温馨的背景,菜单整体外观十分可爱.点击菜单项,盒子就会展开,展示 ...

  4. 用bootstrap和css3制作按钮式下拉菜单

    利用bootstrap框架的字体图标和下拉菜单效果,以及css3的动画效果,可以做出比较优雅的按钮式下拉菜单样式 <style> .myBtnStyle .dropdown-menu sp ...

  5. 纯CSS3制作皮卡丘动画壁纸

    前言 明天就放假了,趁着今晚的空挡时间来写这篇博客——这是我昨晚实现的一个简单的CSS3动画效果.话说还得缘起我逛了一下站酷网,然后不小心看到了一张皮卡丘的手机壁纸,觉得很可爱,然后觉得这种效果是可以 ...

  6. css3 制作平滑过度动画

    -webkit-transition(属性渐变) -webkit-transition:CSS属性(none|all|属性)  持续时间  时间函数  延迟时间 CSS属性(transition-pr ...

  7. CSS3制作上下跳动动画箭头效果

    动画效果如下: 代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8&q ...

  8. CSS3 3D折叠展开动画菜单

    在线演示 本地下载

  9. HTML5/CSS3超酷环形动画菜单

    在线演示 本地下载

随机推荐

  1. python_编码集的介绍

    一.unicode的解释来自百度百科 1.ASCII    最知名的可能要数被称为ASCII的7位字符集了.它是美国标准信息交换代码(American Standard Code for Inform ...

  2. memcached数据库

    Python-memcached的基本使用

  3. 二、python沉淀之路~~字符串属性（str)

    1.capitalize的用法:即将输出字符串首字母大写 test = "heLLo" v = test.capitalize() print(v) 结果:Hello. 2.cas ...

  4. java编程思想第五章初始化与清理

    5.1使用构造器确保初始化: 构造器与一般方法一样,但是没有返回值,且其方法名与类名完全相同. 不接受任何参数的构造器成为默认构造器,也叫无参构造器. 5.2 方法重载: 为什么会有方法重载? 构造器 ...

  5. height clientHeight scrollHeight offsetHeight的大致区别

    这主要是针对火狐浏览器来讲的: height:就是div的高度,就是style中设置的高度:在chrome中clientHeight是包含padding的,offsetHeight和clientHei ...

  6. shell脚本中常用命令

    1           Shell中的特殊符号 1.1           $  美元符号.用来表示变量的值.如变量NAME的值为Mike,则使用$NAME就可以得到“Mike”这个值. 1.2    ...

  7. 机器学习：scikit-learn 文档、深入学习机器学习的思路

    一.scikit-learn 的文档查阅 网页访问 scikit-learn 的文档: scikit-learn.org —— Document —— User Guide: scikit-learn ...

  8. AngularJS：参考手册

    ylbtech-AngularJS:参考手册 1.返回顶部 1. AngularJS 参考手册 AngularJS 指令 本教程用到的 AngularJS 指令 : 指令 描述 ng-app 定义应用 ...

  9. Shell脚本把文件从GBK转为UTF-8编码

    http://www.jb51.net/article/51308.htm 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 ...

  10. MacOS配置Erlang开发环境

    Mac下安装Erlang brew 的安装: $ curl -LsSf http://github.com/mxcl/homebrew/tarball/master | sudo tar xvz -C ...