经验分享程序开发文档资料数据资源其它资源

html5菜单列表项展开动画特效

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 html5菜单列表项展开动画特效 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

html5菜单列表项展开动画特效

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>html5菜单列表项展开动画特效</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">

</head>
<body>
<div class="demo">
  <div class="demo__overlay"></div>
  <div class="demo__menu-btn">
	<div class="demo__menu-btn-line"></div>
	<div class="demo__menu-btn-line"></div>
	<div class="demo__menu-btn-line"></div>
  </div>
  <div class="demo__menu-bg"></div>
  <div class="demo__menu-items">
	<div class="demo__menu-item" data-section="home">Home</div>
	<div class="demo__menu-item" data-section="source">Source of inspiration</div>
	<div class="demo__menu-item" data-section="demos">Other demos</div>
	<div class="demo__menu-item" data-section="about">About</div>
  </div>
  <div class="demo__section demo__section--home active-section">
	<h2 class="demo__section-heading">Home</h2>
	<p class="demo__description">Just click menu button</p>
  </div>
  <div class="demo__section demo__section--source">
	<h2 class="demo__section-heading">Source of inspiration</h2>
	<p class="demo__description">Based on 
	  <a class="demo__link" href="#">this dribbble shot</a> 
	  by Gal Shir</p>
  </div>
  <div class="demo__section demo__section--demos">
	<h2 class="demo__section-heading">Other demos</h2>
  </div>
  <div class="demo__section demo__section--about">
	<h2 class="demo__section-heading">About</h2>
  </div>
</div>

<script src='js/stopExecutionOnTimeout.js?t=1'></script>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
	var $demo = $('.demo');
	var menuTextAT = 500;
	$(document).on('click', '.demo__menu-btn', function () {
		$demo.addClass('menu-active');
	});
	$(document).on('click', '.demo__menu-item', function () {
		var $item = $(this);
		var targetSection = $item.data('section');
		$item.addClass('clicked');
		$demo.removeClass('menu-active');
		$('.demo__section.active-section').removeClass('active-section');
		$('.demo__section--' + targetSection).addClass('active-section');
		setTimeout(function () {
			$item.removeClass('clicked');
		}, menuTextAT);
	});
});
</script>
</body>
</html>

JS代码(stopExecutionOnTimeout.js):

"use strict";
	"object"!=typeof window.CP&&(window.CP={
}
),window.CP.PenTimer={
	programNoLongerBeingMonitored:!1,timeOfFirstCallToShouldStopLoop:0,_loopExits:{
}
,_loopTimers:{
}
,START_MONITORING_AFTER:2e3,STOP_ALL_MONITORING_TIMEOUT:5e3,MAX_TIME_IN_LOOP_WO_EXIT:2200,exitedLoop:function(o){
	this._loopExits[o]=!0}
,shouldStopLoop:function(o){
	if(this.programKilledSoStopMonitoring)return!0;
	if(this.programNoLongerBeingMonitored)return!1;
	if(this._loopExits[o])return!1;
	var t=this._getTime();
	if(0===this.timeOfFirstCallToShouldStopLoop)return this.timeOfFirstCallToShouldStopLoop=t,!1;
	var i=t-this.timeOfFirstCallToShouldStopLoop;
	if(i<this.START_MONITORING_AFTER)return!1;
	if(i>this.STOP_ALL_MONITORING_TIMEOUT)return this.programNoLongerBeingMonitored=!0,!1;
	try{
	this._checkOnInfiniteLoop(o,t)}
catch(n){
	return this._sendErrorMessageToEditor(),this.programKilledSoStopMonitoring=!0,!0}
return!1}
,_sendErrorMessageToEditor:function(){
	try{
	if(this._shouldPostMessage()){
	var o={
	action:"infinite-loop",line:this._findAroundLineNumber()}
;
	parent.postMessage(JSON.stringify(o),"*")}
else this._throwAnErrorToStopPen()}
catch(t){
	this._throwAnErrorToStopPen()}
}
,_shouldPostMessage:function(){
	return document.location.href.match(/boomerang/)}
,_throwAnErrorToStopPen:function(){
	throw"We found an infinite loop in your Pen. We've stopped the Pen from running. Please correct it or contact support@codepen.io."}
,_findAroundLineNumber:function(){
	var o=new Error,t=0;
	if(o.stack){
	var i=o.stack.match(/boomerang\S+:(\d+):\d+/);
	i&&(t=i[1])}
return t}
,_checkOnInfiniteLoop:function(o,t){
	if(!this._loopTimers[o])return this._loopTimers[o]=t,!1;
	var i=t-this._loopTimers[o];
	if(i>this.MAX_TIME_IN_LOOP_WO_EXIT)throw"Infinite Loop found on loop:"+o}
,_getTime:function(){
	return+new Date}
}
,window.CP.shouldStopExecution=function(o){
	return window.CP.PenTimer.shouldStopLoop(o)}
,window.CP.exitedLoop=function(o){
	window.CP.PenTimer.exitedLoop(o)}
;

CSS代码(styles.css):

*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;}
html,body{font-size:62.5%;}
body{background:#F2E274;font-family:"Open Sans",Helvetica,Arial,sans-serif;}
.demo{z-index:1;overflow:hidden;position:absolute;left:50%;top:50%;width:26rem;height:44rem;margin-left:-13rem;margin-top:-22rem;border-radius:0.5rem;background:#fff;box-shadow:0.3rem 0.5rem 0.5rem rgba(0,0,0,0.2);}
.demo__overlay{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.15);pointer-events:none;opacity:0;-webkit-transition:opacity 0.4s 0.35s;transition:opacity 0.4s 0.35s;}
.demo.menu-active .demo__overlay{opacity:1;-webkit-transition:opacity 0.4s 0.4s;transition:opacity 0.4s 0.4s;}
.demo__menu-btn{z-index:3;position:absolute;left:2rem;top:2rem;width:2.4rem;height:1.6rem;-webkit-transition:-webkit-transform 0.4s 0.75s;transition:transform 0.4s 0.75s;cursor:pointer;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
.demo.menu-active .demo__menu-btn{-webkit-transition:-webkit-transform 0.4s;transition:transform 0.4s;-webkit-transform:translate3d(-2rem,0,0);transform:translate3d(-2rem,0,0);}
.demo__menu-btn-line{position:absolute;left:0;width:100%;height:0.2rem;background:#879BAF;-webkit-transition:width 0.4s 0.75s,-webkit-transform 0.4s 0.35s;transition:width 0.4s 0.75s,transform 0.4s 0.35s;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
.demo.menu-active .demo__menu-btn-line{width:26rem;-webkit-transition:width 0.4s,-webkit-transform 0.4s 0.32s;transition:width 0.4s,transform 0.4s 0.32s;}
.demo__menu-btn-line:nth-child(1){top:0;}
.demo.menu-active .demo__menu-btn-line:nth-child(1){-webkit-transform:translate3d(0,4rem,0);transform:translate3d(0,4rem,0);}
.demo__menu-btn-line:nth-child(2){top:0.7rem;}
.demo.menu-active .demo__menu-btn-line:nth-child(2){-webkit-transform:translate3d(0,9.5rem,0);transform:translate3d(0,9.5rem,0);}
.demo__menu-btn-line:nth-child(3){top:1.4rem;}
.demo.menu-active .demo__menu-btn-line:nth-child(3){-webkit-transform:translate3d(0,15rem,0);transform:translate3d(0,15rem,0);}
.demo__menu-bg{z-index:1;position:absolute;left:0;top:0;width:100%;height:24.8rem;background:#fff;border-bottom:0.2rem solid #879BAF;-webkit-transform:scaleY(0.3);-ms-transform:scaleY(0.3);transform:scaleY(0.3);-webkit-transform-origin:50% 0;-ms-transform-origin:50% 0;transform-origin:50% 0;opacity:0;-webkit-transition:opacity 0.2s 0.55s,-webkit-transform 0.4s 0.35s;transition:opacity 0.2s 0.55s,transform 0.4s 0.35s;pointer-events:none;}
.demo.menu-active .demo__menu-bg{pointer-events:auto;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);opacity:1;-webkit-transition:opacity 0.2s 0.4s,-webkit-transform 0.4s 0.4s;transition:opacity 0.2s 0.4s,transform 0.4s 0.4s;}
.demo__menu-items{z-index:2;position:absolute;left:0;top:0;width:100%;pointer-events:none;}
.demo.menu-active .demo__menu-items{pointer-events:auto;}
.demo__menu-item{height:6rem;padding-left:2rem;margin-bottom:0.2rem;font-size:1.8rem;line-height:6rem;color:#7F91A4;background-color:rgba(127,145,164,0);opacity:0;-webkit-transform:translateX(-1rem);-ms-transform:translateX(-1rem);transform:translateX(-1rem);-webkit-transition:opacity 0.2s 0.15s,-webkit-transform 0.2s 0.15s;transition:opacity 0.2s 0.15s,transform 0.2s 0.15s;cursor:pointer;}
.demo__menu-item.clicked{-webkit-animation:menuItemClicked 0.3s;animation:menuItemClicked 0.3s;}
.demo.menu-active .demo__menu-item{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);}
.demo.menu-active .demo__menu-item:nth-child(1){-webkit-transition:opacity 0.2s 0.4s,-webkit-transform 0.2s 0.4s;transition:opacity 0.2s 0.4s,transform 0.2s 0.4s;}
.demo.menu-active .demo__menu-item:nth-child(2){-webkit-transition:opacity 0.2s 0.55s,-webkit-transform 0.2s 0.55s;transition:opacity 0.2s 0.55s,transform 0.2s 0.55s;}
.demo.menu-active .demo__menu-item:nth-child(3){-webkit-transition:opacity 0.2s 0.7s,-webkit-transform 0.2s 0.7s;transition:opacity 0.2s 0.7s,transform 0.2s 0.7s;}
.demo.menu-active .demo__menu-item:nth-child(4){-webkit-transition:opacity 0.2s 0.85s,-webkit-transform 0.2s 0.85s;transition:opacity 0.2s 0.85s,transform 0.2s 0.85s;}
.demo__section{position:absolute;left:0;top:0;width:100%;height:100%;padding:7rem 2rem 0;opacity:0;-webkit-transition:opacity 0.4s;transition:opacity 0.4s;pointer-events:none;}
.demo__section:after{content:"";position:absolute;left:1rem;bottom:1rem;width:24rem;height:17rem;border-radius:0.5rem;background:#E7F6FB;}
.demo__section.active-section{opacity:1;pointer-events:auto;}
.demo__section-heading{margin-bottom:1.5rem;text-align:center;font-size:2.2rem;text-transform:uppercase;}
.demo__description{text-align:center;font-size:1.5rem;}
@-webkit-keyframes menuItemClicked{0%{background-color:#7F91A4;}
100%{background-color:rgba(127,145,164,0);}
}
@keyframes menuItemClicked{0%{background-color:#7F91A4;}
100%{background-color:rgba(127,145,164,0);}
}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
37.72 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
37.72 KB
立即下载
武思飘荷
了解
打赏作者 鼓励作者
html5特效
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章