课程代码：这个代码还是有些问题的，仅供参考
<!DOCTYPE html>
<html>
<head>
<title>demo for all</title>
<meta charset="utf-8">
<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)}
60%{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:antiaisaed;
font-family: Noto Sans S Chinese,Times New Roman;
}
.main{
width: 1200px;
height: 600px;
background: #000 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;
}
.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_shengzi_0{
display: none;
}
.c_shengzi_1{
width: 218px;
height: 180px;
background: url(./img/line_1.png);
position: absolute;
left: 10px;
top: 120px;
z-index: 999;
cursor: pointer;
}
.c_shengzi_2{
width: 219px;
height: 159px;
background: url(./img/line_2.png);
position: absolute;
left: 10px;
top: 158px;
}
.c_shengzi_3{
width: 264px;
height: 117px;
background: url(./img/line_3.png);
position: absolute;
left: 10px;
top: 220px;
}
.c_shengzi_4{
width: 288px;
height: 56px;
background: url(./img/line_4.png);
position: absolute;
left: 10px;
top: 290px;
}
.c_zongzirou{
width:288px;
height:206px;
background:url(./img/zzr_1.png);
background-size: 288px;
position: absolute;
top: 50px;
left: 34px;
z-index: 101;
opacity: 0;
transform-origin: top center;
transition: all 1s;
transform:scale(.8);
}
.c_zongzirou_in{
opacity: 1;
transform:scale(.8);
}
.c_zuoye{
width: 114px;
height: 266px;
background: url(./img/leaf_left.png);
position: absolute;
z-index: 1;
left: 20px;
top: -50px;
opacity: 0;
transform-origin:left bottom;
transition: all 1s;
transition:scale(.8);
}
.c_zuoye_in{
opacity: 1;
transform:rotate(-5deg);
}
.c_zuoye_out{
opacity: 0;
transform:rotate(-15deg);
}
.c_youye{
width: 318px;
height: 338px;
background: url(./img/leaf_right.png);
position: absolute;
z-index: 111;
left: 90px;
top: -80px;
opacity: 0;
transition: all 1s;
transform-origin:left bottom;
transition: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(./img/leaf_expand.png);
position: absolute;
z-index: 99;
left: -150px;
top: -60px;
opacity: 0;
}
.c_diye_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;
transform: scale(0.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(0.8);
opacity: 0;
transition:all 1s;
}
.c_t_in{
opacity: 1;
}
.text{
position: absolute;
width: 400px;
height: 370px;
top: 140px;
left: 180px;
font-size: 14px;
line-height: 20px;
color: #333;
}
.text_in{
}
.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;
}
/*粽子肉的旋转*/
.c_zongzirou_view_1{
transition: all 0;
background-image: url(./img/zzr_1.png);
}
.c_zongzirou_view_2{
transition: all 0;
background-image: url(./img/zzr_2.png);
}
.c_zongzirou_view_3{
transition: all 0;
background-image: url(./img/zzr_3.png);
}
.c_zongzirou_view_4{
transition: all 0;
background-image: url(./img/zzr_4.png);
}
.c_zongzirou_view_0{
transition: all 0;
background-image: url(./img/zzr_1.png);
transform:rotateY(180deg);
}
/*文字的视角*/
.c_t_view_o{
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(-8deg);
}
.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, 10px) rotate(24deg);
}
.c_t_mirror_4{
transform:scale(.8) rotateY(30deg) translate(-58px, 10px) rotate(-5deg);
}
</style>
</head>
<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" id="caption"></div>
<div class="to">亲爱的小伙伴们:</div>
<div class="msg">悠悠艾草香，绵绵情意长；丝丝问候你，甜甜粽子尝；美梦在悠扬，身边有安康；龙舟驶江里，艾草挂门上；祝福我送上，端午节快乐！...</div>
<div class="from">Dar_Ling</div>
</div>
</div>
<script>
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_box_rock';
g('c_shengzi').onclick=function(){
s2.start(3000);
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';
g('caption').className='caption caption_rock';
})
s2.add(1500,function(){
g('c_shengzi').className='c_shengzi_0';
})
s2.add(2000,function(){
g('c_zongzi').className='c_zongzi_out';
g('c_zongzirou').className='c_zongzirou_in c_zongzirou';
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';
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_yuoye 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_5';
})
s3.add(3000,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(3200,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_5';
})
s3.add(3400,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(3600,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(3800,function(){
g('c_zongzirou').className='c_zongzirou c_zongzirou_in c_zongzirou_view_1';
})
s3.add(5000,function(){
s3.start();
})
s2.start();
var imgs = ['./img/zzr_2.png','./zzr_2.png','./zzr_4.png'];
var imgs_onload = function(){
imgs.pop()
if(img.length==0){
s1.start();
}
}
for( s in imgs){
var img = new Image();
img.onload = imgs_onload;
img.src=imgs[s];
}
</script>
</body>
</html>
