微博上看到这样一篇文章（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. selenium-webdirver api-定位方式

    1,8种单数定位方式 # 通过ID定位目标元素 driver.find_element_by_id('i1') # 通过className定位目标元素 driver.find_element_by_c ...

  2. 20180831_jar包冲突2_天安微信httpclient冲突

    一.异常现象 微信项目需要向腾讯服务器发送请求获取token. 但是在请求的时候抛了个异常: <2018-8-30 下午05时39分18秒 CST> <Notice> < ...

  3. 剑指offer--22.反转链表

    时间限制:1秒 空间限制:32768K 热度指数:440624 本题知识点: 链表 题目描述 输入一个链表,反转链表后,输出新链表的表头. /* struct ListNode { int val; ...

  4. 剑指offer--16.数组中重复的数字

    时间限制:1秒 空间限制:32768K 热度指数:198342 本题知识点: 数组 题目描述 在一个长度为n的数组里的所有数字都在0到n-1的范围内. 数组中某些数字是重复的,但不知道有几个数字是重复 ...

  5. hdu-2544-最短路(Floyd算法模板)

    题目链接 题意很清晰,入门级题目,适合各种模板,可用dijkstra, floyd, Bellman-ford, spfa Dijkstra链接 Floyd链接 Bellman-Ford链接 SPFA ...

  6. [BZOJ4573][ZJOI2016]大♂森林

    bzoj luogu uoj sol \(orz\ \ HJT\ \ dalao\)教会我做这道题. 考虑每两个相邻位置的树的差异. 对于一个1操作(更换生长节点),假设区间是\([l,r]\),那么 ...

  7. nodejs渲染到页面的理解

    一般逻辑都是: 打开页面,前端发请求到服务端,服务端返回数据到前端,前端根据数据生成DOM节点,然后append到DOM中. 如果是nodejs渲染到页面,我的理解是: 打开页面,服务端直接把数据查询 ...

  8. h5 离线缓存小demo

    传统的web应用是在线应用,这其实也是web的特色,对于PC时代问题并不大,但到了移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得更低.比如:在火车上,穿山越岭进隧道,便无法访问w ...

  9. poj 2154 Color——带优化的置换

    题目:http://poj.org/problem?id=2154 置换的第二道题! 需要优化!式子是ans=∑n^gcd(i,n)/n (i∈1~n),可以枚举gcd=g,则有phi( n/g )个 ...

  10. Python获取%appdata%路径的方法

    import osimport sys import winreg print(os.name)print(sys.getdefaultencoding())print(sys.version)pri ...