为什么粽子肉视角0还有翻转过程？！
qq_浅秋_04051456
2017-08-04 10:52
我都添加了transition: all 0;了啊，为什么还有翻转过程？代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dragon Boat Day</title>
</head>
<style type="text/css">
/*动画*/
@-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; /*加上一直抖动的动画效果*/
}
.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;/*绝对定位是相对于父级而言。使绳子移到粽子上*/
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; /*动画持续时长*/
transform:scale(.8); /*先缩小，后续再放大*/
transform-origin:top center; /*缩放中心点*/
}
.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;是不能用的，调试后发现导致仍无法显示*/
transition:all 1s;
transform-origin:left bottom;
}
.c_leftleaf_in{
opacity:1;
transform:rotate(-5deg);/*旋转负十五度*/
}
.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); /*经调试发现有点大*/
}
.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;*/
}
/*粽子肉旋转*/
.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{ /*还对称翻转呢*/
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);
}
/*时间轴对象构造器*/
var Timeline=function(){
this.order=[];//animation
this.add=function(timeout,func,log){
this.order.push({timeout:timeout,func:func,log:log});
}
//参数ff支持快进
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);//实现快进
setTimeout(fn,timeout);
setTimeout(function(){console.log('time->',timeout,'log->',log)},timeout)
})
(this.order[s])
}
}
}
//初始场景
var s1=new Timeline();
//粽子展开场景
var s2=new Timeline();
//粽子旋转场景
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(){}
};
})
//定义粽子展开动画
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的样式，因为有个旋转过程
g('c_belowleaf').className='c_belowleaf c_belowleaf_in';
s3.start();
})
//粽子托盘旋转动画定义
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"> <!-- 可以接多个class,最末的优先级最高（只显示） -->
<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>端午节快乐！!<br>我的生日快到啦,记得准备好礼物呦！</div>
<div>小楠</div>
</div>
</div>
</body>
</html>
1回答
-
- 慕梦前来
- 2021-10-19 19:42:05
因为定义了class的问题
JS+CSS3实现“粽情端午”
39505 学习 · 74 问题
相似问题