<!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网页抓取数据

    我的数据通过一个TextBox输入,这些代码是写在一个button的点击事件里的. 网页数据抓取大概分为两步,第一步是获取网页源代码: 具体注释如下: var currentUrl = TextBox ...

  2. EF中执行原生sql与使用Local获取本地数据

    使用DbSet的Local属性可以访问当前context中被追踪且没有被标记为删除的实体(内存中的数据) using (var context = new BloggingContext()) { / ...

  3. 关于Oracle dmp文件导入随笔

    进入博客园已经两年多了,每次想写点什么,都是给自己个各种借口,不了了之~今天就从Oracle数据库最长用的导入开始吧! 1.低版本的exp/imp可以连接到高版本(或同版本)的数据库服务器,比如:10 ...

  4. 路由转发(curl)

    <?php ini_set('memory_limit', '640M'); ini_set('default_charset', 'utf-8'); define('webroot', 'ht ...

  5. hdu 验证角谷猜想 1279

    Problem Description 数论中有许多猜想尚未解决,其中有一个被称为"角谷猜想"的问题,该问题在五.六十年代的美国多个著名高校中曾风行一时,这个问题是这样描述的:任何 ...

  6. inline-block样式间距

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

  7. 畅通工程再续--hdu1875

    畅通工程再续 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  8. Xshell4连接Linux后 win快捷键锁屏

    今天在使用Xshell连接CentOS后 使用Vim编辑器编辑完后 习惯性的按了Ctrl+S 然后按什么都不起作用 只能重新连接 通过查资料得知 Ctrl + S 是Linux 锁屏的快捷键 要解除锁 ...

  9. async 异步流程控制规则

    github 学习async网址 : https://github.com/caolan/async/ 1.Async 函数介绍 async 主要实现了三个部分的流程控制功能 1.集合:Collect ...

  10. 在UC浏览器上很炫的一个效果

    效果简述: 这个效果将会强行去除UC浏览器的网址输入框和底部的菜单栏,这样网页将会占据整个手机界面.感觉看起来很像是一个APP. 浏览器界面右下角将会出现一个向上的标志,用来唤出简单的菜单栏. (界面 ...