15款手机端打开菜单动画过渡特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 15款手机端打开菜单动画过渡特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>15款手机端打开菜单动画过渡特效</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<link href='http://fonts.useso.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic' rel='stylesheet' type='text/css'>
	<link href="css/main.css" rel="stylesheet" type="text/css"/>
	<style>
	.mobile-inner-nav a{
		-webkit-animation-duration: 0.5s;
		animation-duration: 0.5s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		-webkit-animation-name: returnToNormal;
		animation-name: returnToNormal;
	}
			
	@-webkit-keyframes returnToNormal {
	  0% {
	    opacity: 0;
	    -webkit-transform: translate3d(0, -100%, 0);
	            transform: translate3d(0, -100%, 0);
	  }

	  100% {
	    opacity: 1;
	    -webkit-transform: none;
	            transform: none;
	  }
	}

	@keyframes returnToNormal {
	  0% {
	    opacity: 0;
	    -webkit-transform: translate3d(0, -100%, 0);
	            transform: translate3d(0, -100%, 0);
	  }

	  100% {
	    opacity: 1;
	    -webkit-transform: none;
	            transform: none;
	  }
	}
	</style>
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<div class="htmleaf-container">
		<div class="wrapper">
		  <div class="wrapper-inner">
		    <div class="wrapper-inner-buttons">
		      <a href="index.html" class="current">Example 1</a>
		      <a href="example2.html">Example 2</a>
		      <a href="example3.html">Example 3</a>
		      <a href="example4.html">Example 4</a>
		      <a href="example5.html">Example 5</a>
		      <a href="example6.html">Example 6</a>
		      <a href="example7.html">Example 7</a>
		      <a href="example8.html">Example 8</a>
		      <a href="example9.html">Example 9</a>
		      <a href="example10.html">Example 10</a>
		      <a href="example11.html">Example 11</a>
		      <a href="example12.html">Example 12</a>
		      <a href="example13.html">Example 13</a>
		      <a href="example14.html">Example 14</a>
		      <a href="example15.html">Example 15</a>
		    </div>

		      <div class="mobile">
		        <div class="mobile-inner">
		          <div class="mobile-inner-header">
		            <div class="mobile-inner-header-icon mobile-inner-header-icon-out"><span></span><span></span></div>
		          </div>
		          <div class="mobile-inner-nav">
		            <a href="#">Home</a>
		            <a href="#">Services</a>
		            <a href="#">Portfolio</a>
		            <a href="#">Blog</a>
		            <a href="#">About</a>
		            <a href="#">Contact</a>
		          </div>
		          <img src="_assets/photo1.jpg"/>
		          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse elementum felis eget commodo vulputate. Etiam finibus ex sem, sed molestie sapien euismod et. Nunc dolor magna, iaculis ut ipsum a, finibus imperdiet enim. Aliquam eget mi facilisis, dapibus felis sed, efficitur leo. Fusce vestibulum augue a ex feugiat pretium. Morbi eu aliquet mi. Nunc nec mi at quam rhoncus tincidunt eget non lectus.</p> <p> Nullam elementum ornare posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec vel eros nec massa faucibus commodo vel eget dui. Donec tincidunt orci id dui varius, dapibus tristique dolor mollis. Sed non faucibus quam, id ultrices lectus. Nunc lacinia dui sed justo suscipit, nec ornare ligula fermentum. Sed vitae tincidunt enim. Maecenas eget magna ex. In suscipit risus sem.</p>
		        </div>
		      </div>
		  </div>
		</div>
	</div>
	
	<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
	<script>
	$(window).load(function () {
	  $(".mobile-inner-header-icon").click(function(){
	  	$(this).toggleClass("mobile-inner-header-icon-click mobile-inner-header-icon-out");
	  	$(".mobile-inner-nav").slideToggle(250);
	  });
	  $(".mobile-inner-nav a").each(function( index ) {
	  	$( this ).css({'animation-delay': (index/10)+'s'});
	  });
	});
	</script>
</body>
</html>

CSS代码(main.css):

body{margin:0px;padding:0px;background-color:#ffffff;font-family:'Source Sans Pro',sans-serif;}
#header{background-color:#3f8dbf;float:left;width:100%;height:50px;color:rgba(255,255,255,1);line-height:50px;position:fixed;left:0px;top:0px;z-index:1;}
#header a{color:rgba(255,255,255,1);text-decoration:none;display:block;font-size:15px;}
#header-left{float:left;height:50px;}
#header-left:hover #header-left-icon{background-color:#3F8DBF;}
#header-left:hover #header-left-text{background-color:#599BC8;}
#header-left-icon{float:left;height:50px;width:50px;text-align:center;background-color:#35759F;-webkit-transition:background 0.5s;-moz-transition:background 0.5s;-o-transition:background 0.5s;transition:background 0.5s;}
#header-left-icon a{font-size:25px;}
#header-left-text{float:left;height:50px;-webkit-transition:background 0.5s;-moz-transition:background 0.5s;-o-transition:background 0.5s;transition:background 0.5s;}
#header-left-text a{padding-left:20px;padding-right:20px;}
#header-right{float:right;height:50px;}
#header-right:hover #header-right-icon{background-color:#3F8DBF;}
#header-right:hover #header-right-text{background-color:#599BC8;}
#header-right-icon{float:right;height:50px;width:50px;text-align:center;background-color:#35759F;-webkit-transition:background 0.5s;-moz-transition:background 0.5s;-o-transition:background 0.5s;transition:background 0.5s;}
#header-right-text{float:right;height:50px;-webkit-transition:background 0.5s;-moz-transition:background 0.5s;-o-transition:background 0.5s;transition:background 0.5s;}
#header-right-text a{padding-right:20px;padding-left:20px;}
.wrapper{width:100%;float:left;margin-top:50px;margin-bottom:150px;}
.wrapper-inner{width:1100px;margin-right:auto;margin-left:auto;-webkit-touch-callout:none;/* iOS Safari */
 -webkit-user-select:none;/* Chrome/Safari/Opera */
 -khtml-user-select:none;/* Konqueror */
 -moz-user-select:none;/* Firefox */
 -ms-user-select:none;/* IE/Edge */
 user-select:none;/* non-prefixed version,currently not supported by any browser */
}
.wrapper-inner-buttons{width:100%;float:left;margin-top:50px;text-align:center;}
.wrapper-inner-buttons a{background-color:#3f8dbf;line-height:35px;padding-right:15px;padding-left:15px;margin:10px;display:inline-block;text-align:center;text-decoration:none;color:#FFFFFF;-webkit-transition:background 0.5s;-moz-transition:background 0.5s;-o-transition:background 0.5s;transition:background 0.5s;border-radius:calc(35px / 2);}
.wrapper-inner-buttons a.current{background-color:#f5d76e;color:#d35400;}
.wrapper-inner-buttons a:hover{background-color:#35759F;color:#fff;}
.mobile{width:100%;float:left;margin-top:100px;}
.mobile-inner{width:550px;margin-right:auto;margin-left:auto;background-color:#fafafa;position:relative;}
.mobile-inner img{width:100%;margin-bottom:30px;}
.mobile-inner p{color:#676767;line-height:25px;font-size:16px;padding-bottom:30px;padding-right:30px;padding-left:30px;margin:0px;}
.mobile-inner-header{background-color:rgba(0,0,0,0.7);width:100%;height:50px;position:absolute;top:0px;left:0px;}
.mobile-inner-header-icon{color:#ffffff;height:50px;font-size:25px;text-align:center;float:right;width:50px;position:relative;-webkit-transition:background 0.5s;-moz-transition:background 0.5s;-o-transition:background 0.5s;transition:background 0.5s;}
.mobile-inner-header-icon:hover{background-color:rgba(255,255,255,0.2);cursor:pointer;}
.mobile-inner-header-icon span{position:absolute;left:calc((100% - 25px) / 2);top:calc((100% - 1px) / 2);width:25px;height:1px;background-color:rgba(255,255,255,1);}
.mobile-inner-header-icon span:nth-child(1){transform:translateY(4px) rotate(0deg);}
.mobile-inner-header-icon span:nth-child(2){transform:translateY(-4px) rotate(0deg);}
.mobile-inner-header-icon-click span:nth-child(1){animation-duration:0.5s;animation-fill-mode:both;animation-name:clickfirst;}
.mobile-inner-header-icon-click span:nth-child(2){animation-duration:0.5s;animation-fill-mode:both;animation-name:clicksecond;}
@keyframes clickfirst{0%{transform:translateY(4px) rotate(0deg);}
100%{transform:translateY(0) rotate(45deg);}
}
@keyframes clicksecond{0%{transform:translateY(-4px) rotate(0deg);}
100%{transform:translateY(0) rotate(-45deg);}
}
.mobile-inner-header-icon-out span:nth-child(1){animation-duration:0.5s;animation-fill-mode:both;animation-name:outfirst;}
.mobile-inner-header-icon-out span:nth-child(2){animation-duration:0.5s;animation-fill-mode:both;animation-name:outsecond;}
@keyframes outfirst{0%{transform:translateY(0) rotate(-45deg);}
100%{transform:translateY(-4px) rotate(0deg);}
}
@keyframes outsecond{0%{transform:translateY(0) rotate(45deg);}
100%{transform:translateY(4px) rotate(0deg);}
}
.mobile-inner-nav{background-color:rgba(0,0,0,0.9);width:100%;position:absolute;top:50px;left:0px;padding-top:30px;padding-bottom:80px;display:none;}
.mobile-inner-nav a{display:inline-block;line-height:50px;text-decoration:none;width:80%;margin-left:10%;color:#FFFFFF;border-bottom:solid 1px rgba(255,255,255,0.3);-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s;font-weight:300;}
.mobile-inner-nav a:hover{color:rgba(255,255,255,0.4);border-bottom:solid 1px rgba(255,255,255,0.2);}

附件:下载该文件资源,减少时间成本(增值服务)