微博上看到这样一篇文章（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. vs2010 oraclelient 引用问题

    不能正常引用 oracleclent :错误信息如下 ================================================================= 排除1. 当前 ...

  2. Nodejs-RESTFul架构

    请求方法 一般会严格要求请求方法及其释义,下面给出常用的请求方法 如果请求头中存在 X-HTTP-Method-Override 或参数中存在 _method(拥有更高权重),且值为 GET, POS ...

  3. Codeforces Round #276 (Div. 2)C. Bits(构造法)

    这道题直接去构造答案即可. 对于l的二进制表示,从右到左一位一位的使其变为1,当不能再变了(再变l就大于r了)时,答案就是l. 这种方法既可以保证答案大于等于l且小于等于r,也可以保证二进制表示时的1 ...

  4. STL迭代器辅助函数——advance

    Advance(i, n) increments the iterator i by the distance n. If n > it it , the call has no effect. ...

  5. 加密第四节_IPSec基本理论

    加密第四节_IPSec基本理论 本节内容 IPSec简介 IPSec两种工作模式 判断隧道模式和传输模式 IPSec两种模型 IPSec两个数据库 IPSec基本理论 IPSec简介 提供了网络层的安 ...

  6. Python函数-cmp()

    cmp(x, y) 作用:         比较两个对象x和y,如果x < y ,返回负数:x == y, 返回0:x > y,返回正数. 注:在python2所有版本中都可用,但在pyt ...

  7. bzoj 2839 集合计数 —— 二项式反演

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2839 设 \( f(i) \) 为至少 \( i \) 个选择,则 \( f(i) = C_ ...

  8. CentOS7安装wget 及配置

    yum -y install wget yum -y install setup yum -y install perl

  9. JSP/java 执行创建批处理文件，并执行批处理事务。

    protected void doGet(HttpServletRequest req, HttpServletResponse resp) { InputStream in = null; Inpu ...

  10. Nunit 2.6 无法调试.Net Framework 4.0

    <configuration> <!-- The GUI only runs under .NET 2.0 or higher. The useLegacyV2RuntimeActi ...