<!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. Web Service学习笔记（webservice、soap、wsdl、jws详细分析) （转）

    Web Service概述 Web Service的定义 W3C组织对其的定义如下,它是一个软件系统,为了支持跨网络的机器间相互操作交互而设计.Web Service服务通常被定义为一组模块化的API ...

  2. 五种常见的ASP.NET应用程序安全缺陷

    下面给出了五个例子,阐述如何按照上述建议增强应用程序的安全性.这些例子示范了代码中可能出现的缺陷,以及它们带来的安全风险.如何改写最少的代码来有效地降低攻击风险.1 篡改参数◎ 使用ASP.NET域验 ...

  3. Java Se 基础系列(笔记) -- BasicDataType

    java.lang.String类代表不可变的字符序列 String类常用方法:1.public char charAt(int index); -- 返回下标为index的字符 2.public i ...

  4. windows应用中调用DLL一步步试验

    试验环境: PC:win10 build 10143 IDE: vs2015 RC WinPhone: win10 build 10136 简单界面,点按钮,算加法 一.主程用C++ 1.新建visu ...

  5. js字符串数字计算

    1.字符串转换为数字用 -0 var a=1; var b='2'; var c= a+b;(12) var c=a+(b-0);(3)

  6. AngularJS 通过 Spring Restful 上传文件

    总结一下,在写下这些文字之前心里很不爽,一个小问题倒腾了这么久...  JS 端: // 指令 app.directive('fileModel', ['$parse', function($pars ...

  7. CentOS和Ubuntu的区别

    CentOS(Community ENTerprise Operating System)是Linux发行版之一,它是来自于Red Hat Enterprise Linux依照开放源代码规定释出的源代 ...

  8. vim 多行注释

    多行注释: 1. 进入命令行模式,按ctrl + v进入 visual block模式,然后按j, 或者k选中多行,把需要注释的行标记起来 2. 按大写字母I,再插入注释符,例如// 3. 按esc键 ...

  9. The Time in Words

    def main(): time = ["one", "two", "three", "four", "fiv ...

  10. 递归:汉诺塔 - 零基础入门学习Python024

    递归:汉诺塔 让编程改变世界 Change the world by program 似乎谈到递归算法就要拿汉诺塔来举例,没办法,因为小甲鱼小时候太笨了,这个游戏老是玩不过关,好不容易在自学编程的时候 ...