<!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. ASP.NET 根据现有动态页面生成静态Html

    现有动态页面的格式都是类似 pageName.aspx?ID=1的格式,后面由于发布服务器的原因,要求将动态页面转为静态html后上传. 首先根据页面生成的格式,枚举获取页面html: foreach ...

  2. Java ------------获取不会重复的随机数

    import java.util.UUID; public class UTest {    public static void main(String[] args) { //UUID通过rand ...

  3. SQL Server 2005中的分区表（三）：将普通表转换成分区表

    在设计数据库时,经常没有考虑到表分区的问题,往往在数据表承重的负担越来越重时,才会考虑到分区方式,这时,就涉及到如何将普通表转换成分区表的问题了. 那么,如何将一个普通表转换成一个分区表 呢?说到底, ...

  4. DTO学习系列之AutoMapper（三）

    本篇目录: Custom Type Converters-自定义类型转换器 Custom Value Resolvers-自定义值解析器 Null Substitution-空值替换 Containe ...

  5. OpenGL ES 2.0 雾

    在场景中使用雾不但可以提高真实感,特定的情况下还能优化性能.具体是指当物体离摄像机足够远时,雾就足够浓,此时只能看到雾而看不到物体,也就不必对物体着色进行详细计算,这样可以大大提高渲染效率. 雾有很多 ...

  6. Java中的int和Integer

    代码: public class Test{ public static void main(String[] args){ Integer i01 = 59; int i02 = 59; Integ ...

  7. 使用python发邮件

    使用python发邮件 网上有很多发邮件的例子,本人在网上找了一份,稍加修改后使用 上源码 # encoding=utf-8 from email.mime.image import MIMEImag ...

  8. Mysql学习（慕课学习笔记4）创建数据表、查看数据表、插入记录

    创建数据表 Create table [if not exists] table_name(column_name data_type,…….) UNSIGNED 无符号SIGNED 有符号 查看创建 ...

  9. LESSCSS

    LESSCSS应需求而生 CSS 的语法相对简单,对使用者的要求较低,但同时也带来一些问题:CSS 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因 ...

  10. python视频教程大全集下载

    python3英文视频教程(全87集) http://pan.baidu.com/s/1dDnGBvV Python从入门到精通视频(全60集)链接:http://pan.baidu.com/s/1e ...