我做出来的有问题
我的文件夹是a 该文件夹有5583afa20001bb1f00000000子文件夹，子文件夹有图片的素材，我是跟着老师您做的但是做出来有问题
<html>
<head>
<title>粽情端午</title>
<meta charset="utf-8" />
</head>
<style type="text/css">
/*动画样式定义*/
@-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)}
6%{ transform:rotate(-1deg)}
70%{ transform:rotate(0deg)}
100%{ transform:rotate(0deg)}
}
*{
padding:0;margin:0;
}
body{
background:#000;
min-width:1200px;
min-height:600px;
-webkit-font-smoothing: antialiased;
font-family:'WenQuanyi Micro Hei',SimSun,sans-serif;
}
.main{
width:1200px;
height:600px;
background:#000 url(5583afa20001bb1f00000000/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;
}
.c_zongzi_box_rock{
-webkit-animation:rock 2s infinite;
}
/*粽子*/
.c_zongzi{
width:312px;
height:305px;
background:url(5583afa20001bb1f00000000/img/zz.png);
opacity:1;
transition:all 1s;
}
.c_zongzi_out{
opacity:0;
transform:scale(.5);
}
/*绳子*/
.c_shengzi_1{
width:218px;
height:180px;
background:url(5583afa20001bb1f00000000/img/line_1.png);
position:absolute;
left:10px;
top:120px;
z-index:999;
cursor:pointer;
}
.c_shengzi_2{
width:219px;
height:159px;
background:url(5583afa20001bb1f00000000/img/line_2.png);
position:absolute;
left:10px;
top:158px;
}
.c_shengzi_3{
width:264px;
height:117px;
background:url(5583afa20001bb1f00000000/img/line_3.png);
position:absolute;
left:10px;
top:220px;
}
.c_shengzi_4{
width:288px;
height:56px;
background:url(5583afa20001bb1f00000000/img/line_4.png);
position:absolute;
left:10px;
top:290px;
}
.c_shengzi_0{
display:none;
}
/*粽子肉*/
.c_zongzirou{
width:288px;
height:206px;
background:url(5583afa20001bb1f00000000/img/zzr_1.png);
background-size:288px 206px;
position:absolute;
left:50px;
top:54px;
z-index:110;
opacity:0;
transform-origin:top center;
transform:top
transition:all 1s;
transform:scale(.8);
}
.c_zongzirou_in{
opacity:1;
transform:scale(1);
}
/*左叶*/
.c_zuoye{
width:114px;
height:266px;
background:url(5583afa20001bb1f00000000/img/leaf_left.png);
position:absolute;
left:0px;
top:-30px;
z-index:1;
opacity:0;
transform-origin:left bottom;
transition:all 1s;
}
.c_zuoye_in{
opacity:1;
transform:rotate(-5deg);
}
.c_zuoye_out{
opacity:0;
transform:rotate(-15deg);
}
/*右叶*/
.c_youye{
width:318px;
height:338px;
background:url(5583afa20001bb1f00000000/img/leaf_right.png);
position:absolute;
left:80px;
top:-60px;
z-index:111;
opacity:0;
transform-origin:left bottom;
transition:all 1s;
transform:scale(.8);
}
.c_youye_in{
opacity:1;
transform:rotate(5deg) scale(.8);
}
.c_youye_out{
opacity:0;
transform:rotate(15deg) scale(.8);
}
/*底叶*/
.c_diye{
width:618px;
height:468px;
background:url(5583afa20001bb1f00000000/img/leaf_expand.png);
position:absolute;
left:-150px;
top:-45px;
z-index:99;
opacity:0;
display:none;
transition:all 1s;
}
.c_diye_in{
opacity:1;
}
/*字1*/
.c_t_1{
width:180px;
height:100px;
background:url(5583afa20001bb1f00000000/img/t_jixiang.png);
position:absolute;
left:50%;
top:50%;
margin-left:-70px;
margin-top:-70px;
z-index:200;
transform-origin:center center;
transform:scale(.8);
opacity:0;
transition:all 1s;
}
.c_t_2{
width:180px;
height:100px;
background:url(5583afa20001bb1f00000000/img/t_ruyi.png);
position:absolute;
left:50%;
top:50%;
margin-left:-70px;
margin-top:-70px;
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;
left:180px;
top:140px;
font-size:14px;
line-height:20px;
color:#333;
}
.text_in{
display:block;
}
.text.caption{
width:400px;
height:240px;
background:url(5583afa20001bb1f00000000/img/caption.png) no-repeat;
margin-left:40px;
opacity:0;
transition:all 1s;
}
.text.to{
width:400px;
margin-top:10px;
margin-left:40px;
opacity:0;
transition:all 1s .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:0px;
}
/*粽子肉的视角（旋转）*/
.c_zongzirou_view_1{
transition:all 0;
background-image:url
(5583afa20001bb1f00000000/img/zzr_1.png);
}
.c_zongzirou_view_2{
transition:all 0;
background-image:url
(5583afa20001bb1f00000000/img/zzr_2.png);
}
.c_zongzirou_view_3{
transition:all 0;
background-image:url
(5583afa20001bb1f00000000/img/zzr_3.png);
}
.c_zongzirou_view_4{
transition:all 0;
background-image:url
(5583afa20001bb1f00000000/img/zzr_4.png);
transform:rotateY(180deg);
}
/*文字的视角*/
.c_t_view_0{
transition:all 0;
transform:scale(.8);
}
.c_t_mirror_0{
transition:all 0;
display:none;
}
.c_t_view_2{
transition:all 0;
transform:scale(.8) rotateY(30deg) translate
(-50px,0) rotate(8deg);
}
.c_t_mirror_2{
transition:all 0;
transform:scale(.7) rotateY(70deg) translate
(283px,-15px) rotate(-8deg);
}
.c_t_view_3{
transition:all 0;
transform:scale(.75) rotateY(49deg)
translate(-94px,0) rotate(15deg);
}
.c_t_mirror_3{
transition:all 0;
transform:scale(.75) rotateY(49deg)
translate(118px,0) rotate(-15deg);
}
.c_t_view_4{
transition:all 0;
transform:scale(.6) rotateY(50deg) translate
(-196px,10px) rotate(-15deg);
}
.c_t_mirror_4{
transition:all 0;
transform:scale(.8) rotateY(30deg) translate
(58px,0) rotate(-5deg);
}
</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"></div>
<div class="c_zongzirou" id="c_zongzirou"></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>
<div class="text" id="text">
<div class="caption"></div>
<div class="to">亲爱的小伙伴们：</div>
<div class="msg">在端午节的日子里，梦丘给大家送来心意了，祝大家快乐每一天！</div>
<div class="from">梦丘</div>
</div>
<script type="text/javascript">
var g=function(id){
return document.getElementById(id);
}
var TimeLine=function(){
this.order=[];//动画序列
this.add=function(timeout,func,log){
this.order.push({
timeout:timeout,
func:func,
log:log,
});
}
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_rock';
g('c-shengzi').onclick=function(){
s2.start();
g('c-shengzi').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__shengzi').className='c_shengzi_2 ';
});
s2.add(500,function(){
g('c_shengzi').className='c_shengzi_3 ';
});
s2.add(1000,function(){
g('c_shengzi').className='c_shengzi_4 ';
});
s2.add(1500,function(){
g('c_shengzi').className='c_shengzi_0 ';
});
s2.add(2000,function(){
g('c_zongzi').className='c_zongzi c_zongzi_out';
g('c_zongzirou').className='c_zongzi c_zongzirou_in';
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_1_in';
g('c_t_2').className='c_t_2 c_t_mirror_0';
});
s2.add(3000,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';
s3.start();
});
//粽子托盘旋转动画定义
s3.add(1000,function(){
g('c_zongzirou').className ="c_zongzirou c_zongzirou_in
c_zongzirou_view_1"
})
s3.add(1200,function(){
g('c_zongzirou').className ="c_zongzirou c_zongzirou_in
c_zongzirou_view_2"
g('c_t_1').className='c_t_1 c_t_in c_t_view_2';
g('c_t_2').className='c_t_2 c_t_in c_t_mirror_2';
})
s3.add(1400,function(){
g('c_zongzirou').className ="c_zongzirou c_zongzirou_in
c_zongzirou_view_3";
g('c_t_1').className='c_t_1 c_t_in c_t_view_3';
g('c_t_2').className='c_t_2 c_t_in c_t_mirror_3';
})
s3.add(1600,function(){
g('c_zongzirou').className ="c_zongzirou c_zongzirou_in
c_zongzirou_view_4";
g('c_t_1').className='c_t_1 c_t_in c_t_view_4';
g('c_t_2').className='c_t_2 c_t_in c_t_mirror_4';
})
s3.add(1800,function(){
g('c_zongzirou').className ="c_zongzirou c_zongzirou_in
c_zongzirou_view_0"
g('c_t_1').className='c_t_1 c_t_in c_t_mirror_0';
g('c_t_2').className='c_t_2 c_t_in c_t_view_0';
})
s3.add(3000,function(){
g('c_zongzirou').className ="c_zongzirou c_zongzirou_in
c_zongzirou_view_4";
g('c_t_1').className='c_t_1 c_t_in c_t_view_4';
g('c_t_2').className='c_t_2 c_t_in c_t_mirror_4';
})
s3.add(3200,function(){
g('c_zongzirou').className ="c_zongzirou c_zongzirou_in
c_zongzirou_view_3";
g('c_t_1').className='c_t_1 c_t_in c_t_view_3';
g('c_t_2').className='c_t_2 c_t_in c_t_mirror_3';
})
s3.add(3400,function(){
g('c_zongzirou').className ="c_zongzirou c_zongzirou_in
c_zongzirou_view_2";
g('c_t_1').className='c_t_1 c_t_in c_t_view_2';
g('c_t_2').className='c_t_2 c_t_in c_t_mirror_2';
})
s3.add(3600,function(){
g('c_zongzirou').className ="c_zongzirou c_zongzirou_in c_zongzirou_view_1"
})
s3.add(5000,function(){
s3.start();
})
s2.start();
//图片加载器
var imgs=
['5583afa20001bb1f00000000/img/zzr_2.png','5583afa20001bb1f00000000/img/zzr_3.png','5583a
fa20001bb1f00000000/img/zzr_4.png'];
var imgs_onload=function(){
imgs.pop();
if( imgs.length==0){
s1.start();
}
}
for(s in imgs){
var img=new Image;
img.onload=imgs.onload;
img.src=imgs[s];
}
</script>
</div>
</body>
</html>
