<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Examples</title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="" rel="stylesheet">

<script type="text/javascript" src="jquery.js"></script>

</head>

<style type="text/css">

.test {

	margin: 500px auto;

	text-align: center;

	width: 100px;

	height: 100px;

}

.test button {

	height: 100px;

	background: none;

	outline: none;

	cursor: pointer;

	border: none;

}

.test span {

	width: 100px;

	height: 10px;

	background: red;

	position: relative;

	display: block;

	border-radius: 10px;

	transition: background .3s .2s ;

	/*激活之后 ，前面的秒数是动画消耗的时间，后面的秒数是推迟开始的时间*/

}

.test span:before {

	content: "";

	display: block;

	top: -30px;

	left: 0;

	width: 100px;

	height: 10px;

	background: red;

	position: absolute;

	border-radius: 10px;

	transition: top .3s .2s ease, -webkit-transform .3s ease;

}

.test span:after {

	content: "";

	background: red;

	display: block;

	width: 100px;

	height: 10px;

	top: 30px;

	position: absolute;

	left: 0;

	border-radius: 10px;

	transition: top .3s .2s ease, -webkit-transform .3s ease;

}

.test button.active span {

	background: transparent;

	border-radius: 10px;

	-webkit-transform-origin: 50% 50%;

    transition:  background .2s .1s ease;

    /*激活之前 ，前面的秒数是动画消耗的时间，后面的秒数是推迟开始的时间*/

}

.test button.active span:before {

	transform: rotate(45deg);

	top: 0;

	transition: top .3s ease, -webkit-transform .3s .2s ease;

}

.test button.active span:after {

	transform: rotate(-45deg);

	top: 0;

	transition: top .3s ease, -webkit-transform .3s .2s ease;

}

</style>

<body>

    <div class="test">

        <button>

    	<span></span>

    	</button>

    </div>

</body>

</html>

<script type="text/javascript">

    //自定义开关

    var _a = true;

    $("button").click(function(){

	    if(_a == true){

            $(this).addClass("active");

            _a= false;

        }else{

        	$(this).removeClass("active");

            _a= true;

        }

    })

</script>

　　

css3实现手机菜单展开收起动画的更多相关文章

  1. vue.js 实现点击展开收起动画

    最近公司项目加了个页面,其中要求是这样的,点击对应列表,展开和收起, 其实就是显示和隐藏内容部分:说来惭愧,我花了半天时间才搞出来(自黑一下~), ,,接下来分享给大家,先上效果图: .vue页面: ...

  2. css3 menu 手机菜单3

    首先看一下效果图; 效果1,主要是 scale(0) -->scale(1px);opacity:0;—>opacity: 1; 然后递归延迟 怕麻烦也可以自己写个for循环 .five ...

  3. css3 menu 手机菜单1

    首先看一下效果图; 效果1,主要是 translateY(100px) -->translateY(0px);opacity:0;—>opacity: 1; 然后递归延迟 怕麻烦也可以自己 ...

  4. jQuery手机菜单

      效果展示 http://hovertree.com/texiao/nav/4/ 手机扫描二维码查看效果: 源码下载 http://hovertree.com/h/bjaf/kroft6c7.htm ...

  5. jQuery鼠标悬停3d菜单展开动画

    效果体验:http://hovertree.com/texiao/jquery/93/ 竖直的主菜单贴着页面左侧,当光标移入菜单项时,以3D动画的方式弹出对应的二级菜单.采用jQuery和CSS3实现 ...

  6. 多种css3时尚侧栏菜单展开显示效果Off-Canvas Menu Effects

    今天我们想分享多种css3时尚侧栏菜单展开显示效果.侧边栏应用广泛,我们之前已经产生了一些效果灵感.风格演变,今天我们要展示一套新的灵感的现代效果.不同的布局和菜单的同步转换和页面可以让一切看起来更有 ...

  7. 纯css3开发的响应式设计动画菜单（支持ie8）

    这是一个响应式设计的菜单.单击列表图标,当你显示屏大小可以完全水平放下所有菜单项时,菜单水平显示(如图1).当你的显示屏不能水平放置所有菜单项时,菜单垂直显示(如图2). 而且显示的时候是以动画的型式 ...

  8. [TimLinux] CSS 纯CSS实现动画展开/收起功能

    内容转自CSS世界,理解之后进行了简化,简化后代码: <!DOCTYPE html> <html> <head> <meta charset=utf-8 /& ...

  9. javasript简单实现文字的展开收起（无动画）

    今天在工作遇到展开和收起的需求,在网上找了很多方法,今天来写一下我觉得比较简单的方法 在项目中需要达到如图这种效果 首先想的是使用overflow简单且粗暴,在需要展开的的文字定义样式 { overf ...

随机推荐

  1. Silverlight Visifire控件 后台设置颜色

    ColorSet cs = new ColorSet(); cs.Id = "colorset1"; // 设置ColorSet 的 Id 为 colorset1 1.cs.Bru ...

  2. 电脑文本text和部分文字出现其他语言乱码

     1.文本的编码存在问题 解决办法: 将text文件打开>>文件(左上角)>>另存为>>选择其他格式的编码试试(在保存键左侧)>>保存再打开 2.系统区 ...

  3. inline-block样式间距

    原始问题和解决方法请参考 淘宝UED官方博客:inline-block 前世今生 布局时采用行内块display:inline-block,发现元素之间有空隙,原因是由于空白字符引起的,详细见上面链接 ...

  4. php 序列化储存和转化 json_encode() json_decode($q,true)

    序列化是将变量转换为可保存或传输的字符串的过程:反序列化就是在适当的时候把这个字符串再转化成原来的变量使用.这两个过程结合起来,可以轻松地存储和传输数据,使程序更具维护性. 例如:当需要数据库只有一个 ...

  5. Android再学习-20141018-布局-进度条

    20141018-Android再学习 对齐至控件的基准线 为了保证印刷字母的整齐而划定的线(四线三格的第三条线). android:layout_alignBaseline 与父控件的四个边缘对齐( ...

  6. Python基础第五天

    双层装饰器 字符串格式化 Python字符串格式有2种方式:百分号方式.format方式:建议使用format方式 1.百分号方式 格式:%[(name)][flags][width].[precis ...

  7. 设置Ubuntu Mysql可以远程链接

    1:修改my.cnf配置文件 $sudo vim /etc/mysql/my.cnf 修改为: bind-address = 0.0.0.0 2:进行授权操作 mysql> grant all ...

  8. man手册导出成txt,pdf,html的一些小技巧

    经常man一些shell命令,有时候有想导出来编辑或注释一下,所以要导出.方法有很多种,根据自己的实际需要觉得比较实用的记录下分享一下. 1.导出成txt man –t bash |col –b &g ...

  9. (DP)Best Time to Buy and Sell Stock

    题目: Say you have an array for which the ith element is the price of a given stock on day i. If you w ...

  10. if switch练习（体重）

    public class shencai { public static void main(String[] args) { int h= 186,g= 80; String Sex = " ...