css3制作左右拉伸动画菜单
微博上看到这样一篇文章（http://js.itivy.com/?p=495），用jquery和css3制作左右拉伸动画菜单，看了下实现效果（http://js.itivy.com/jiaoben963/index.html），感觉用css3就够了，不需要jquery。于是尝试了下，只用css3基本上也实现了原文的效果，如下：
点击顶栏的result可以看到效果，未作浏览器兼容性优化。
css3制作左右拉伸动画菜单的更多相关文章
- 非常酷的CSS3垂直下拉动画菜单
昨天我向大家介绍了一款兼容性不错的jQuery淡入淡出下拉菜单,今天要分享一款相对绚丽的CSS3垂直下拉动画菜单,不过需要支持CSS3的浏览器才能有效果.下面是效果图,一起看看. 我们也可以在这里查看 ...
- 利用CSS3制作淡入淡出动画效果
CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致. 利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态 ...
- CSS3/jQuery创意盒子动画菜单
作为前端开发者,各种各样的jQuery菜单见过不少,这款jQuery/CSS3菜单却是别具一格,菜单项嵌入到九宫格中,像小盒子一样,加上温馨的背景,菜单整体外观十分可爱.点击菜单项,盒子就会展开,展示 ...
- 用bootstrap和css3制作按钮式下拉菜单
利用bootstrap框架的字体图标和下拉菜单效果,以及css3的动画效果,可以做出比较优雅的按钮式下拉菜单样式 <style> .myBtnStyle .dropdown-menu sp ...
- 纯CSS3制作皮卡丘动画壁纸
前言 明天就放假了,趁着今晚的空挡时间来写这篇博客——这是我昨晚实现的一个简单的CSS3动画效果.话说还得缘起我逛了一下站酷网,然后不小心看到了一张皮卡丘的手机壁纸,觉得很可爱,然后觉得这种效果是可以 ...
- css3 制作平滑过度动画
-webkit-transition(属性渐变) -webkit-transition:CSS属性(none|all|属性) 持续时间 时间函数 延迟时间 CSS属性(transition-pr ...
- CSS3制作上下跳动动画箭头效果
动画效果如下: 代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8&q ...
- CSS3 3D折叠展开动画菜单
在线演示 本地下载
- HTML5/CSS3超酷环形动画菜单
在线演示 本地下载
随机推荐
- 去掉Arraylist集合中的重复元素
package cn.collection; import java.util.ArrayList; import java.util.Iterator; import java.util.Scann ...
- java学习笔记 --- 网络编程（网络的基础知识）
1.网络模型: |--OSI(open stystem Interconnection开放式系统互连) |--特点: 是一种异构系统互连的分层结构:提供了控制互连系统交互规则的标准骨架:定义一种抽象结 ...
- 20165210 预习作业3 Linux安装及学习
Linux安装及学习 一.Linux安装 通过参考教程:基于VirtualBox虚拟机安装Ubuntu图文教程成功的安装上了Linux但在过程中还是有一些小问题的. 首先按着步骤走,一开始没什么毛病, ...
- UI及物体渲染顺序
1.决定UI渲染在所有物体前,ZTest Always,Canvas中的RenderMode影响该值. 2.都是ZTest Always 时影响覆盖的因素: 父子及先后关系: 渲染队列: sortin ...
- Maven里头的pom.xml配置详解
正常的pom配置文件如下所示: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http ...
- [转]深入详解javascript之delete操作符
最近重新温习JS,对delete操作符一直处于一知半解的状态,偶然发现一篇文章,对此作了非常细致深入的解释,看完有茅塞顿开的感觉,不敢独享,大致翻译如下. 原文地址:http://perfection ...
- Oracle查询数据表结构(字段,类型,大小,备注)
作用:想要生成整个Oracle数据库所有表结构WORD文档(数据库设计说明书) Oracle数据库字典介绍 Oracle数据字典是有表和视图组成的,存储有关数据库结构信息的一些数据库对象.数据库 ...
- Dos简单命令
1.cmd命令进入某个目录,具体教程:http://blog.csdn.net/aidenliu/article/details/5390113 (注意的是:切换目录时不能直接cmd D:\Nancy ...
- 一段shallowCopy和deepCopy的认识
:什么是浅拷贝(shallow copy)和深拷贝(deep copy)? A: 浅拷贝就是成员数据之间的一一赋值:把值一一赋给要拷贝的值.但是可能会有这样的情况:对象还包含资源,这里的资源可以值堆资 ...
- UEditor富文本编辑器的图片上传 http://fex.baidu.com/ueditor/#server-deploy
http://fex.baidu.com/ueditor/#server-deploy http://fex.baidu.com/ueditor/#server-path 首先 editor配置文件中 ...