為什么粽子肉視角0還有翻轉(zhuǎn)過程？！
我都添加了transition: all 0;了啊，為什么還有翻轉(zhuǎn)過程？代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dragon Boat Day</title>
</head>
<style type="text/css">
/*動(dòng)畫*/
@-webkit-keyframes rock{
0%{ -webkit-transform:rotate(0deg) }
10%{-webkit-transform:rotate(3deg)}
20%{-webkit-transform:rotate(-3deg)}
30%{-webkit-transform:rotate(2deg)}
40%{-webkit-transform:rotate(-2deg)}
50%{-webkit-transform:rotate(1deg)}
60%{-webkit-transform:rotate(-1deg)}
70%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(0deg)}
}
*{
padding:0; margin:0;
}
body{
min-width:1200px;
min-height:600px;
}
.main{
width:1200px;
height:600px;
background:#000 url(img/bg.jpg);
position:absolute;
left:50%;
top:50%;
margin-left:-600px;
margin-top:-300px;/*以上幾句讓背景圖居中*/
}
.c_zongzi_box{
width:312px;
height:305px;
position:absolute;
left:700px;
top:184px;
}
.c_zongzi_box_rock{
-webkit-animation:rock 2s infinite; ? ? /*加上一直抖動(dòng)的動(dòng)畫效果*/
}
.c_zongzi{
width:312px;
height:305px;
background:url(img/zz.png);
transition:all 1s;
}
.c_zongzi_out{?
opacity:.0;
transform:scale(.5);
}
.c_rope_1{
width:218px;
height:180px;
background:url(img/line_1.png);
position:absolute;
left:10px;
top:120px;/*絕對(duì)定位是相對(duì)于父級(jí)而言。使繩子移到粽子上*/
z-index:999;
cursor:pointer; ? /*變成手形*/
}
.c_rope_2{
width:219px;
height:159px;
background:url(img/line_2.png);
position:absolute;
left:10px;
top:158px;
}
.c_rope_3{
width:264px;
height:117px;
background:url(img/line_3.png);
position:absolute;
left:10px;
top:220px;
}?
.c_rope_4{
width:288px;
height:56px;
background:url(img/line_4.png);
position:absolute;
left:10px;
top:29 0px;
}
.c_rope_0{ ? ? ? ? ? ? ? ? ?/*讓其消失*/
display:none;
}
.c_flesh{
width:288px;
height:206px;
background:url(img/zzr_1.png);
background-size:288px 206px;
position:absolute;
left:50px;
top:34px;
z-index:110;
opacity:0;
transition:all 1s; ? ?/*動(dòng)畫持續(xù)時(shí)長(zhǎng)*/
transform:scale(.8); ? /*先縮小，后續(xù)再放大*/
transform-origin:top center; ? ? /*縮放中心點(diǎn)*/
}
.c_flesh_in {
opacity:1;
transform:scale(1); ?
}
.c_leftleaf{
width:114px;
height:266px;
background:url(img/leaf_left.png);
/*background-size:288px 206px;*/
position:absolute;
left:0px;
top:-30px;
z-index:1;
opacity:0;
/*display:none;是不能用的，調(diào)試后發(fā)現(xiàn)導(dǎo)致仍無法顯示*/
transition:all 1s;?
transform-origin:left bottom;
}
.c_leftleaf_in{
opacity:1;
transform:rotate(-5deg);/*旋轉(zhuǎn)負(fù)十五度*/
}
.c_leftleaf_out{
opacity:0;
transform:rotate(-15deg);
}
.c_rightleaf{
width:318px;
height:338px;
background:url(img/leaf_right.png);
position:absolute;
left:0px;
top:-30px;
z-index:111;
opacity:0;
transform-origin:right bottom;
transition:all 1s;?
transform:scale(.8); ? /*經(jīng)調(diào)試發(fā)現(xiàn)有點(diǎn)大*/
}
.c_rightleaf_in{
opacity:1;
transform:rotate(5deg) scale(.8);
}
.c_rightleaf_out{
opacity:0;
transform:rotate(15deg) scale(.8);
}
.c_belowleaf{
width:618px;
height:468px;
background:url(img/leaf_expand.png);
position:absolute;
left:-150px;
top:-45px;
z-index:99;
opacity:0;
/*display:none;*/
transition:all 1s;?
}
.c_belowleaf_in{
opacity:1;
}
.c_t_1{
width:180px;
height:100px;
background:url(img/t_jixiang.png);
position:absolute;
left:50%;
top:50%;
margin-left:-70px;
margin-top:-50px;
z-index:200;
transform-origin: center center;
transform: scale(.8);
opacity:0;
transition:all 1s;?
}
.c_t_2{
width:180px;
height:100px;
background:url(img/t_ruyi.png);
position:absolute;
left:50%;
top:50%;
margin-left:-70px;
margin-top:-50px;
z-index:200;
transform-origin: center center;
transform: scale(.8);
opacity:0;
transition:all 1s;?
}
.c_t_in{
opacity:1;
}
? ? ? /*************祝福語*/
}
.text{
position:absolute;
width:400px;
height:370px;
margin-left: 180px;
margin-top: 140px;
font-size:14px;
line-height: 20px;
color: #333;
}
.text .caption{
width:400px;
height: 240px;
background:url(img/caption.png) no-repeat;
margin-top:60px;
margin-left:200px;
opacity:0;
transition:all 1s;
}
.text .to{
width: 400px;
margin-top: 60px;
margin-left: 200px;
opacity:0;
transition:all 1s .5s;
}
.text .msg{
width: 400px;
margin-top: 10px;
margin-left: 235px;
opacity:0;
transition:all 1s 1s;
}
.text .from{
width: 400px;
margin-top: 10px;
margin-left: 200px;
opacity:0;
transition:all 1s 1.5s;
}
.text_in .caption,.text_in .to,.text_in .msg,.text_in .from{
opacity:1;
/*margin-left:0px;*/
}
/*粽子肉旋轉(zhuǎn)*/
.c_flesh_view_1{
transition:all 0;
background-image:url(img/zzr_1.png);
}
.c_flesh_view_2{
transition:all 0;
background-image:url(img/zzr_2.png);
}
.c_flesh_view_3{
transition:all 0;
background-image:url(img/zzr_3.png);
}
.c_flesh_view_4{
transition:all 0;
background-image:url(img/zzr_4.png);
}
.c_flesh_view_0{ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?/*還對(duì)稱翻轉(zhuǎn)呢*/
transition:all 0;
background-image:url(img/zzr_1.png); ? ? ? ? ? ??
-webkit-transform: rotateY(180deg);
}
/*文字視角*/
/*.c_t_view_1{
transform:scale(.8) rotateY(30deg) translate(-50px 0) rotate(8deg); ?/*translate是平移*/
}
/*.c_t_view_2{
transform:scale(.7) rotateY(70deg) translate(283px -15) rotate(-8deg);
}
.c_t_view_3{transform:scale(.75) rotateY(49deg) translate(-94px 0) rotate(15deg);}
.c_t_view_4{transform:scale(.75) rotateY(47deg) translate(118px 0) rotate(-15deg);}
.c_t_view_5{transform:scale(.6) rotateY(50deg) translate(-196px 0) rotate(20deg);}
.c_t_view_6{transform:scale(.6) rotateY(30deg) translate(58px 0) rotate(-5deg);}
.c_t_view_0{
z-index:0;
display:none;
}*/
.c_t_view_0{
transform:scale(.8);
}
.c_t_mirror_0{
display:none;
}
.c_t_view_2{
transform:scale(.8) rotateY(30deg) translate(-50px,0) rotate(8deg);
}
.c_t_mirror_2{
transform:scale(.7) rotateY(70deg) translate(283px,-15px) rotate(-8);
}
.c_t_view_3{
transform:scale(.75) rotateY(49deg) translate(-94px,0) rotate(15deg)
}
.c_t_mirror_3{
transform:scale(.75) rotateY(49deg) translate(118px,0) rotate(-15deg)
}
.c_t_view_4{
transform:scale(.6) rotateY(50deg) translate(196px,10) rotate(24deg)
}
.c_t_mirror_4{
transform:scale(.8) rotateY(30deg) translate(58px,10) rotate(-5deg)
}
</style>
<script type="text/javascript">
/*獲取DOM*/
?var g=function(id){
? return document.getElementById(id);
?}
?/*時(shí)間軸對(duì)象構(gòu)造器*/
var Timeline=function(){
this.order=[];//animation
this.add=function(timeout,func,log){
this.order.push({timeout:timeout,func:func,log:log});
}
//參數(shù)ff支持快進(jìn)
this.start=function(ff){
for(s in this.order){
(function(me){
var fn=me.func;
var timeout=me.timeout;
var log=me.log;
timeout=Math.max(timeout-(ff||0) ,0);//實(shí)現(xiàn)快進(jìn)
setTimeout(fn,timeout);
setTimeout(function(){console.log('time->',timeout,'log->',log)},timeout)
})
(this.order[s])
}
}
}
//初始場(chǎng)景
var s1=new Timeline();
//粽子展開場(chǎng)景
var s2=new Timeline();
//粽子旋轉(zhuǎn)場(chǎng)景
var s3=new Timeline();
s1.add(1,function(){
g('c_zongzi_box').className='c_zongzi_box c_zongzi_box_rock';
g('c_rope').onclick=function(){
s2.start();
g('c_rope').onclick=function(){}
};
})
//定義粽子展開動(dòng)畫
s2.add(1,function(){
g('c_zongzi_box').className='c_zongzi_box';
g('text').className='text text_in';
})
s2.add(100,function(){
g('c_rope').className='c_rope_2' ;
})
s2.add(500,function(){
g('c_rope').className='c_rope_3';
})
s2.add(1000,function(){
g('c_rope').className='c_rope_4' ;
})
s2.add(1500,function(){
g('c_rope').className='c_rope_0';
})
s2.add(2000,function(){
g('c_zongzi').className='c_zongzi c_zongzi_out';?
g('c_flesh').className='c_flesh ?'; //但視頻中是c_flesh_out
g('c_leftleaf').className='c_leftleaf c_leftleaf_in';
g('c_rightleaf').className='c_rightleaf c_rightleaf_in';
g('c_t_1').className='c_t_1 c_t_in';
g('c_t_2').className='c_t_2 c_t_mirror_0';
})
s2.add(3000,function(){
g('c_leftleaf').className='c_leftleaf c_leftleaf_in c_leftleaf_out';
g('c_rightleaf').className='c_rightleaf c_rightleaf_in c_rightleaf_out';//要保留in的樣式，因?yàn)橛袀€(gè)旋轉(zhuǎn)過程
g('c_belowleaf').className='c_belowleaf c_belowleaf_in';
s3.start();
})
? ?//粽子托盤旋轉(zhuǎn)動(dòng)畫定義
? ? s3.add(1000,function(){
? ? ?g('c_flesh').className='c_flesh c_flesh_in c_flesh_view_1'
? ? })
? ? s3.add(1200,function(){
? ? ?g('c_flesh').className='c_flesh c_flesh_in c_flesh_view_2'
? ? })
? ? s3.add(1400,function(){
? ? ?g('c_flesh').className='c_flesh c_flesh_in c_flesh_view_3'
? ? })
? ? s3.add(1600,function(){
? ? ?g('c_flesh').className='c_flesh c_flesh_in ?c_flesh_view_4'
? ? })
? ? s3.add(1800,function(){
? ? ?g('c_flesh').className='c_flesh c_flesh_in c_flesh_view_0'
? ? })
? ? s3.add(3000,function(){
? ? ?g('c_flesh').className='c_flesh ?c_flesh_in c_flesh_view_4'
? ? })
? ? s3.add(3200,function(){
? ? ?g('c_flesh').className='c_flesh c_flesh_in ?c_flesh_view_3'
? ? })
? ? s3.add(3400,function(){
? ? ?g('c_flesh').className='c_flesh ?c_flesh_in c_flesh_view_2'
? ? })
? ? s3.add(3600,function(){
? ? ?g('c_flesh').className='c_flesh ?c_flesh_in c_flesh_view_1'
? ? })
? ? s3.add(5000,function(){
? ? ?s3.start();
? ? })
s2.start(3000);
//var s=new Timeline();
//s.add(1000,function(){console.log('first')},'int')
//s.add(3500,function(){console.log('second')},'int')
//s.start(2000);
</script>
<body>
<div>
<div class="c_zongzi_box c_zongzi_box_rock" id="c_zongzi_box"> ?<!-- 可以接多個(gè)class,最末的優(yōu)先級(jí)最高（只顯示） -->
<div id="c_zongzi"></div>
<div id="c_rope"></div>
<div id="c_flesh"></div>
<div id="c_leftleaf"></div>
<div id="c_rightleaf"></div>
<div id="c_belowleaf"></div>
<div id="c_t_1"></div>
<div id="c_t_2"></div>
</div>
<div id="text">
<div></div>
<div>我愛及愛我的人們：</div>
<div>端午節(jié)快樂！!<br>我的生日快到啦,記得準(zhǔn)備好禮物呦！</div>
<div>小楠</div>
</div>
</div>
</body>
</html>
2021-10-19
因?yàn)槎x了class的問題