<!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. String StringBuffer StringBuilder （转）

    转自:http://www.iteye.com/topic/522167 众所周知,String是由字符组成的串,在程序中使用频率很高.Java中的String是一个类,而并非基本数据类型. 不过她却 ...

  2. web 安全 初探 (正在更新)

    1.web应用程序所采用的防卫机制的几个核心构成:1.处理用户对应用程序的数据和功能的访问,以防止用户未经授权访问.2.处理用户的输入,以防止恶意的输入导致未预期的行为.3.处理攻击,以确保应用程序在 ...

  3. django的model对象转化成dict

    今天发现一个掉渣天的方法,Django的forms包里面有一个方法:model_to_dict(),它可以将一个model对象转化成dict. In [1]: from apps.dormitory. ...

  4. uiautomator <一> 编译运行

    uiautomator testcase 一.新建Java工程 二.导入lib包 android.jar 和 uiautomator.jar ,选中点击右键Add to buildPath 三.新建测 ...

  5. [LA] 3644 - X-Plosives [并查集]

    A secret service developed a new kind of explosive that attain its volatile property only when a spe ...

  6. N年之后，只记得三井寿！而我们程序猿们也要加油珍惜时间！

    [感觉程序员看一篇励志文章效果大于6篇技术文章,3份源码下载.....所以上此文] [说明:本文不少段落是摘自别人文章,因为本人写程序的文笔有限,怕感动不了大家,所以摘取了不错的部分] 前段时间重新看 ...

  7. ListView中RadioButton实现单项选择

    1:FragmentHack5.java public class FragmentHack5 extends Fragment { View view; ListView lvCountries; ...

  8. DDP和DDU什么区别

    DU/DDP 就是A发货给国外B,B只要呆在家里看电视,货会自动送上门,当中的所有运输清关等事情都是由A来负责(A可以委托货代来负责),区别就是DDU是不包括税金的,也就是货值的百分之多少,税金会在B ...

  9. 最新版AltiumDesignerSummer9下载+破解

    下载地址:ed2k://|file|AltiumDesignerSummer9Build9.3.1.19182.7z|1875307483|e65d364bf987fb5dcfb81c081a1562 ...

  10. WPF用样式实现TextBox的虚拟提示效果

    [版权声明]本文为博主原创,未经允许禁止用作商业用途,如有转载请注明出处. 话说好多软件和网站都能实现虚拟提示,好吧这个名词是我自己起的,因为我也不知道这么形容这个效果. 效果描述:在TextBox没 ...