第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時(shí)綁定郵箱和手機(jī)立即綁定

源碼，懶得優(yōu)化了，自己整理吧，態(tài)亂了

<!DOCTYPE?html>
<html>
<head>
	<title>粽子節(jié)</title>
	<meta?charset="UTF-8">
</head>
	<style?type="text/css">
	/*動(dòng)畫樣式*/
	@-webkit-keyframes?rock{
		0%{?transform:rotate(0deg);}
		10%{?transform:rotate(3deg);}
		20%{?transform:rotate(-3deg);}
		30%{?transform:rotate(2deg);}
		40%{?transform:rotate(-2deg);}
		50%{?transform:rotate(1deg);}
		60%{?transform:rotate(-1deg);}
		70%{?transform:rotate(0deg);}
		100%{?transform:rotate(0deg);}
	}
	*{
		padding:?0;
		margin:?0;
	}
	body{
		background:?#000;
		min-height:?600px;
		min-width:?1200px;
		-webkit-font-smoothing:antialisased;
		font-family:?'WenQuanYi?Micro?Hei',?SimSun,?sans-serif;
	}
	.main{
		width:?1200px;
		height:?600px;
		background:?url(img/bg.jpg);
		position:?absolute;
		left:?50%;
		top:?50%;
		margin-left:?-600px;
		margin-top:?-300px;
		overflow:?hidden;
	}
	/*粽子盒子*/
	.c_zongzi_box{
		width:?312px;
		height:?305px;
		position:?absolute;
		left:?700px;
		top:?184px;
		cursor:?pointer;
	}
	.c_rock{
		-webkit-animation:rock?2s?infinite;
	}
	.c_zongzi{
		width:?312px;
		height:?305px;
		background:?url(img/zz.png);
		transition:?all?1s;
	}
	.c_zongzi_out{
		opacity:?0;
		transform:?scale(0.5);
	}
	/*part1繩子下來*/
	.c_shengzi_1{
		width:?218px;
		height:?180px;
		position:?absolute;
		background:?url(img/line_1.png);
		left:?10px;
		top:?120px;
		z-index:?999;
		transform:all?0.5s;
	}
	.c_shengzi_2{
		width:?219px;
		height:?159px;
		position:?absolute;
		background:?url(img/line_2.png);
		left:?10px;
		top:?158px;
	}
	.c_shengzi_3{
		width:?264px;
		height:?117px;
		position:?absolute;
		background:?url(img/line_3.png);
		left:?10px;
		top:?220px;
	}
	.c_shengzi_4{
		width:?288px;
		height:?56px;
		position:?absolute;
		background:?url(img/line_4.png);
		left:?10px;
		top:?290px;
	}
	/*part2粽子肉出場*/
	.c_zongzirou{
		width:?288px;
		height:?206px;
		position:?absolute;
		background-image:?url(img/zzr_1.png);
		background-size:?288px?206px;
		left:?50px;
		top:?54px;
		z-index:?110;
		opacity:?0;
		transform-origin:?center?center;
		transform:?scale(0.8);
	}
	.c_zongzirou_in{
		opacity:?1;
		transform:?scale(1);
	}
	.c_zongzirou_ins{
		transition:?all?1s;
	}
	.c_zongzirou2{
		transform:rotateX(180deg)?rotateY(180deg)?scale(1,0);
		z-index:?100;
		transform-origin:center?bottom;
		width:?288px;
		height:?206px;
		position:?absolute;
		background-image:?url(img/zzr_1.png);
		background-size:?288px?206px;
		left:?50px;
		bottom:?45px;
		opacity:?0;
	}
	/*part2-3左邊葉子*/
	.c_zuoye{
		width:?114px;
		height:?266px;
		position:?absolute;
		background:?url(img/leaf_left.png);
		left:?0px;
		top:?-30px;
		z-index:?201;
		opacity:?0;
		transform-origin:?left?bottom;
	}
	.c_zuoye_in{
		opacity:?1;
		transform:rotate(-5deg);
		transition:all?2s;
	}
	.c_zuoye_out{
		opacity:?0;
		transform:rotate(-15deg);
		transition:all?1s;
	}
	/*part2-3右邊葉子*/
	.c_youye{
		width:?318px;
		height:?338px;
		position:?absolute;
		background:?url(img/leaf_right.png);
		left:?80px;
		top:?-60px;
		z-index:?201;
		opacity:?0;
		transform-origin:?left?bottom;
		transform:scale(0.8);
	}
	.c_youye_in{
		opacity:?1;
		transform:rotate(5deg)?scale(0.8);
		transition:all?2s;
	}
	.c_youye_out{
		opacity:?0;
		transform:rotate(15deg)?scale(0.8);
		transition:all?1s;
	}
	/*part4下面的葉子*/
	.c_diye{
		width:?618px;
		height:?468px;
		position:?absolute;
		background:?url(img/leaf_expand.png);
		left:?-110px;
		top:?-43px;
		z-index:?99;
		opacity:?0;
		transition:all?1s;
	}
	.c_diye_in{
		opacity:?1;
	}
	/*文字*/
	.c_t_1{
		width:?180px;
		height:?100px;
		position:?absolute;
		background:?url(img/t_jixiang.png);
		left:?50%;
		top:?50%;
		margin-left:?-50px;
		margin-top:?-30px;
		z-index:?900;
		transform-origin:center?center;
		transform:scale(0.8);
		opacity:?0;
	}
	.c_t_2{
		width:?180px;
		height:?100px;
		position:?absolute;
		background:?url(img/t_ruyi.png);
		left:?50%;
		top:?50%;
		margin-left:?-50px;
		margin-top:?-30px;
		z-index:?200;
		transform-origin:center?center;
		transform:scale(0.8);
		opacity:?0;
	}
	.c_t_3{
		width:?180px;
		height:?100px;
		position:?absolute;
		background:?url(img/t_haoyun.png);
		left:?50%;
		top:?50%;
		margin-left:?-50px;
		margin-top:?-30px;
		z-index:?200;
		opacity:?0;
		transform:scale(0.8,0);
		transform-origin:center?bottom;
	}
	.c_t_in{
		opacity:?1;
	}
	.c_t_ins{
		transition:all?1s;
	}
	/*粽子肉旋轉(zhuǎn)*/
	.c_zongzirou_view2{
		background-image:?url(img/zzr_2.png);
	}
	.c_zongzirou_view3{
		background-image:?url(img/zzr_3.png);
	}
	.c_zongzirou_view4{
		background-image:?url(img/zzr_4.png);
	}
	/*粽子肉翻轉(zhuǎn)*/
	.c_zongzirou_v1{
		opacity:?1;
		transform:scale(1,0.85)?translate(0,-15px);
	}
	.c_zongzirou_v2{
		opacity:?1;
		transform:scale(1,0.65)?translate(0,-50px);
	}
	.c_zongzirou_v3{
		opacity:?1;
		transform:scale(1,0.45)?translate(0,-120px);
	}
	.c_zongzirou_v4{
		opacity:?1;
		transform:scale(1,0);
	}
	.c_zongzirou2_v1{
		opacity:?1;
		transform:rotate(180deg)?scale(1,0.45)?translate(0,180px);
	}
	.c_zongzirou2_v2{
		opacity:?1;
		transform:rotate(180deg)?scale(1,0.65)?translate(0,185px);
	}
	.c_zongzirou2_v3{
		opacity:?1;
		transform:rotate(180deg)?scale(1,0.85)?translate(0,190px);
	}
	.c_zongzirou2_v4{
		opacity:?1;
		transform:rotate(180deg)?scale(1,1)?translate(0,195px);
	}
	/*文字的視角*/
	.c_t_v0{
		transform:scale(0.8);
	}
	.c_t_m0{
		display:?none;
	}
	.c_t_v2{
		transform:scale(0.8)?rotateY(30deg)?translate(-50px,?0)?rotate(8deg);
	}
	.c_t_m2{
		transform:scale(0.7)?rotateY(70deg)?translate(283px,?-15px)?rotate(-8deg);
	}
	.c_t_v3{
		transform:scale(0.75)?rotateY(49deg)?translate(-94px,?0)?rotate(15deg);
	}
	.c_t_m3{
		transform:scale(0.75)?rotateY(49deg)?translate(118px,?0)?rotate(-15deg);
	}
	.c_t_v4{
		transform:scale(0.6)?rotateY(50deg)?translate(-196px,?10px)?rotate(24deg);
	}
	.c_t_m4{
		transform:scale(0.8)?rotateY(30deg)?translate(58px,?10px)?rotate(-5deg);
	}

	.c_t_t1{
		opacity:?1;
		transform:scale(0.6,0.25)?translate(0,150px);
	}
	.c_t_t2{
		opacity:?1;
		transform:scale(0.7,0.4)?translate(0,40px);
	}
	.c_t_t3{
		opacity:?1;
		transform:scale(0.8,0.6)?translate(0,15px);
	}
	.c_t_t4{
		opacity:?1;
		transform:scale(0.8)?translate(0,-10px);
	}

	.c_t_tx1{
		opacity:?1;
		transform:scale(0.8,0.6)?translate(0,-50px);
	}
	.c_t_tx2{
		opacity:?1;
		transform:scale(0.7,0.4)?translate(0,-150px);
	}
	.c_t_tx3{
		opacity:?1;
		transform:scale(0.6,0.25)?translate(0,-300px);
	}
	.c_t_tx4{
		transform:scale(0);
	}

	/*說明*/
	.text{
		position:?absolute;
		width:?400px;
		height:?370px;
		left:?180px;
		top:?140px;
		font-size:?14px;
		line-height:?20px;
		color:?#333;
		opacity:?0;
	}
	.text_in{
		opacity:?1;
		transition:all?1s;
	}
	.text?.caption{
		width:?400px;
		height:?240px;
		background:?url(img/caption.png)?no-repeat;
		margin-left:?40px;
		opacity:?0;
		transition:all?1s;
	}
	.text?.caption_rock{
		-webkit-animation:rock?4s?infinite;
	}
	.text?.to{
		width:?400px;
		margin-top:?10px;
		margin-left:?40px;
		opacity:?0;
		transition:all?1s?0.5s;
	}
	.text?.msg{
		width:?400px;
		margin-top:?10px;
		margin-left:?40px;
		opacity:?0;
		transition:all?1s?1s;
	}
	.text?.from{
		width:?400px;
		margin-top:?10px;
		margin-left:?40px;
		text-align:?right;
		opacity:?0;
		transition:all?1s?1.5s;
	}
	.text_in?.caption,
	.text_in?.to,
	.text_in?.msg,
	.text_in?.from{
		opacity:?1;
		margin-left:?0;
	}

	</style>
<body>
	<div?class="main">
		<div?class="c_zongzi_box"?id="c_zongzi_box">
			<div?class="c_zongzi"?id="c_zongzi"></div>
			<div?class="c_shengzi_1"?id="c_shengzi_1"></div>
			<!--此處是打開后!-->
			<div?class="c_zongzirou"?id="c_zongzirou"></div>
			<div?class="c_zongzirou2"?id="c_zongzirou2"></div>
			<div?class="c_zuoye"?id="c_zuoye"></div>
			<div?class="c_youye"?id="c_youye"></div>
			<div?class="c_diye"?id="c_diye"></div>
			<!--此處是打開后文字!-->
			<div?class="c_t_1"?id="c_t_1"></div>
			<div?class="c_t_2"?id="c_t_2"></div>
			<div?class="c_t_3"?id="c_t_3"></div>
		</div>
		<!--祝福文字!-->
		<div?class="text"?id="text">
			<div?class="caption"?id="caption"></div>
			<div?class="to">A:</div>
			<div?class="msg">hello</div>
			<div?class="from">B</div>
		</div>
	</div>
	<script?type="text/javascript">
	var?g=function(id){
		return?document.getElementById(id);
	};
	//時(shí)間類函數(shù)
	var?Timeline=function(){
		this.order=[];//動(dòng)畫序列
		this.add=function(timeout,func,log){
			this.order.push({
				timeout:timeout,
				func:func,
				log:log
			});
			//支持快進(jìn)
			this.start=function(ff){
				for?(var?i?in?this.order){
					(function(me){
						var?fn=me.func,
							timeout=me.timeout,
							log=me.log;
							timeout=Math.max(timeout-(ff||0),0);

							setTimeout(fn,timeout);
							setTimeout(function(){
								console.log('time:',timeout,'log:',log);
							},timeout);
					})(this.order[i]);
				}
			};
		};
	};

	//操作行為
	var?s=new?Timeline();
	var?s2=new?Timeline();
	var?s3=new?Timeline();
	var?s4=new?Timeline();

	//入場動(dòng)畫
	s.add(0,function(){
		g('c_zongzi_box').className='c_zongzi_box?c_rock';
		g('c_shengzi_1').onclick=function(){
			s2.start();
		};
	},'抖動(dòng)了');
	//點(diǎn)擊后
	s2.add(0,function(){
		g('c_zongzi_box').className='c_zongzi_box';
		g('text').className='text?text_in';
	},'動(dòng)畫開始了，我也不抖了');
	s2.add(100,function(){
		g('c_shengzi_1').className='c_shengzi_2';
	},'繩子2了');
	s2.add(600,function(){
		g('c_shengzi_1').className='c_shengzi_3';
	},'繩子3了');
	s2.add(1100,function(){
		g('c_shengzi_1').className='c_shengzi_4';
		g('caption').className='caption?caption_rock';
	},'繩子4了');
	s2.add(2100,function(){
		g('c_zongzi').className='c_zongzi_out';
		g('c_zongzirou').className='c_zongzirou?c_zongzirou_in?c_zongzirou_ins';
		g('c_zuoye').className='c_zuoye?c_zuoye_in';
		g('c_youye').className='c_youye?c_youye_in';
		g('c_t_1').className='c_t_1?c_t_in?c_t_ins';
	},'皮換肉了,葉子和字出來');
	s2.add(3600,function(){
		g('c_zuoye').className='c_zuoye?c_zuoye_in?c_zuoye_out';
		g('c_youye').className='c_youye?c_youye_in?c_youye_out';
		g('c_diye').className='c_diye?c_diye_in';
		g('c_t_1').onclick=function(){
				g('c_t_1').setAttribute('s4start','on');
				s4.start();
				g('c_t_1').onclick=null;
			};
		if(g('c_t_1').getAttribute('s4start')!='on'){
			s3.start(1200);
			g('c_t_1').onclick=null;
		}
	},'葉子換大葉子');
	//旋轉(zhuǎn)
	s3.add(1200,function(){
		g('c_zongzirou').className='c_zongzirou?c_zongzirou_in?c_zongzirou_view2';
		g('c_t_1').className='c_t_1?c_t_in?c_t_v2?';
		g('c_t_2').className='c_t_2?c_t_in?c_t_m2';
	});
	s3.add(1600,function(){
		g('c_zongzirou').className='c_zongzirou?c_zongzirou_in?c_zongzirou_view3';
		g('c_t_1').className='c_t_1?c_t_in?c_t_v3';
		g('c_t_2').className='c_t_2?c_t_in?c_t_m3';
	});
	s3.add(2000,function(){
		g('c_zongzirou').className='c_zongzirou?c_zongzirou_in?c_zongzirou_view4';
		g('c_t_1').className='c_t_1?c_t_in?c_t_v4';
		g('c_t_2').className='c_t_2?c_t_in?c_t_m4';
	});
	s3.add(2400,function(){
		g('c_zongzirou').className='c_zongzirou?c_zongzirou_in';
		g('c_t_1').className='c_t_1?c_t_in?c_t_m0';
		g('c_t_2').className='c_t_2?c_t_in?c_t_v0';
	});
	s3.add(4400,function(){
		g('c_zongzirou').className='c_zongzirou?c_zongzirou_in?c_zongzirou_view4';
		g('c_t_1').className='c_t_1?c_t_in?c_t_v4';
		g('c_t_2').className='c_t_2?c_t_in?c_t_m4';
	});
	s3.add(4800,function(){
		g('c_zongzirou').className='c_zongzirou?c_zongzirou_in?c_zongzirou_view3';
		g('c_t_1').className='c_t_1?c_t_in?c_t_v3';
		g('c_t_2').className='c_t_2?c_t_in?c_t_m3';
	});
	s3.add(5200,function(){
		g('c_zongzirou').className='c_zongzirou?c_zongzirou_in?c_zongzirou_view2';
		g('c_t_1').className='c_t_1?c_t_in?c_t_v2';
		g('c_t_2').className='c_t_2?c_t_in?c_t_m2';
	});
	s3.add(5600,function(){
		g('c_zongzirou').className='c_zongzirou?c_zongzirou_in';
		g('c_t_1').className='c_t_1?c_t_in?c_t_v0';
		g('c_t_2').className='c_t_2?c_t_in?c_t_m0';
		g('c_t_1').onclick=function(){
				g('c_t_1').setAttribute('s4start','on');
				s4.start();
				g('c_t_1').onclick=null;
			};
	});
	s3.add(8000,function(){
		if(g('c_t_1').getAttribute('s4start')!='on'){
			s3.start(1200);
		}
	});

	s4.add(100,function(){
		g('c_zongzirou').className='c_zongzirou?c_zongzirou_in?c_zongzirou_v1';
		g('c_zongzirou2').className='c_zongzirou2?c_zongzirou2_v1';
		g('c_t_3').className='c_t_3?c_t_in?c_t_t1';
		g('c_t_1').className='c_t_1?c_t_in?c_t_tx1';
	});
	s4.add(600,function(){
		g('c_zongzirou').className='c_zongzirou?c_zongzirou_in?c_zongzirou_v2';
		g('c_zongzirou2').className='c_zongzirou2?c_zongzirou2_v2';
		g('c_t_3').className='c_t_3?c_t_in?c_t_t2';
		g('c_t_1').className='c_t_1?c_t_in?c_t_tx2';
	});
	s4.add(1100,function(){
		g('c_zongzirou').className='c_zongzirou?c_zongzirou_in?c_zongzirou_v3';
		g('c_zongzirou2').className='c_zongzirou2?c_zongzirou2_v3';
		g('c_t_3').className='c_t_3?c_t_in?c_t_t3';
		g('c_t_1').className='c_t_1?c_t_in?c_t_tx3';
	});
	s4.add(1600,function(){
		g('c_zongzirou').className='c_zongzirou?c_zongzirou_in?c_zongzirou_v4';
		g('c_zongzirou2').className='c_zongzirou2?c_zongzirou2_v4';
		g('c_t_3').className='c_t_3?c_t_in?c_t_t4';
		g('c_t_1').className='c_t_1?c_t_in?c_t_tx4';
	});
	s4.add(2600,function(){
		g('c_zongzirou').className='c_zongzirou?c_zongzirou_in?c_zongzirou_v3';
		g('c_zongzirou2').className='c_zongzirou2?c_zongzirou2_v3';
		g('c_t_3').className='c_t_3?c_t_in?c_t_t3';
		g('c_t_1').className='c_t_1?c_t_in?c_t_tx3';
	});
	s4.add(3100,function(){
		g('c_zongzirou').className='c_zongzirou?c_zongzirou_in?c_zongzirou_v2';
		g('c_zongzirou2').className='c_zongzirou2?c_zongzirou2_v2';
		g('c_t_3').className='c_t_3?c_t_in?c_t_t2';
		g('c_t_1').className='c_t_1?c_t_in?c_t_tx2';
	});
	s4.add(3600,function(){
		g('c_zongzirou').className='c_zongzirou?c_zongzirou_in?c_zongzirou_v1';
		g('c_zongzirou2').className='c_zongzirou2?c_zongzirou2_v1';
		g('c_t_3').className='c_t_3?c_t_in?c_t_t1';
		g('c_t_1').className='c_t_1?c_t_in?c_t_tx1';
	});
	s4.add(4100,function(){
		g('c_zongzirou').className='c_zongzirou?c_zongzirou_in';
		g('c_zongzirou2').className='c_zongzirou2';
		g('c_t_3').className='c_t_3';
		g('c_t_1').className='c_t_1?c_t_in';
	});
	s4.add(4500,function(){
		g('c_t_1').setAttribute('s4start','off');
		s3.start();
	});

	//圖片加載器
	var?imgs=['img/zzr_2.png','img/zzr_3.png','img/zzr_4.png'];
	var?imgs_onload=function(){
		imgs.pop();
		if(imgs.length?===?0)?{
			s.start();
		}
	};
	for(var?j?in?imgs){
		var?img=new?Image();
		img.onload=imgs_onload;
		img.src=imgs[j];
	}

	</script>
</body>
</html>


正在回答

4 回答

http://img1.sycdn.imooc.com//5cff383e00019f7d15001500.jpg

能幫忙看一下嗎

0 回復(fù) 有任何疑惑可以回復(fù)我~

我的動(dòng)畫樣式定義有問題

0 回復(fù) 有任何疑惑可以回復(fù)我~

圖片加載器那一塊完全有很多方法可以優(yōu)化~~其他地方吧。。。比如說用一個(gè)變量 a 代替 g('c_zongzirou')什么的~~~太多了

0 回復(fù) 有任何疑惑可以回復(fù)我~

如果有bug請反饋，應(yīng)該沒有亂點(diǎn)bug了

0 回復(fù) 有任何疑惑可以回復(fù)我~

舉報(bào)

0/150
提交
取消
JS+CSS3實(shí)現(xiàn)“粽情端午”
  • 參與學(xué)習(xí)       39501    人
  • 解答問題       78    個(gè)

用JS和CSS3技術(shù)實(shí)現(xiàn)3D效果粽子特效動(dòng)畫，掌握動(dòng)畫制作過程

進(jìn)入課程

源碼，懶得優(yōu)化了，自己整理吧，態(tài)亂了

我要回答 關(guān)注問題
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號