根据慕课网上的案例写了粽情端午，对css3动画掌握了更深，也对js加一步学习了，以我目前的水平可能做不了什么好的，但是写完这个之后，一直在尝试着写另一个css3的案例，就是不知道能不能写完了。发现的问题还是js掌握的不好，在学习css3的同时，也要加一步对js进行复习。以下是我模仿的粽情端午的案例代码：
<!DOCTYPE html>
<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) }
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:antialiased;
font-family: 'WenQuanYi Micro Hei',Simsun, sans-serif;
}
.main{
width: 1200px;
height: 600px;
background: url(bg.jpg);
position: absolute;
margin-left: -600px;
margin-top: -300px;
left: 50%;
top: 50%;
overflow: hidden;
}
.c_zongzi_box{
width: 312px;
height: 315px;
position: absolute;
left: 700px;
top: 184px;
}
.c_zongzi_box_rock{
-webkit-animation:rock 2s infinite;
}
.c_zongzi{
width: 312px;
height: 315px;
background: url(zz.png);
transition:all 1s;
}
.c_zongzi_out{
opacity: 1;
transform:scale(.5);
}
.c_shengzi_1{
width: 218px;
height: 180px;
position: absolute;
background: url(line_1.png);
top: 120px;
left: 10px;
z-index: 999;
cursor: pointer;
}
.c_shengzi_2{
width: 219px;
height: 159px;
background: url(line_2.png);
position: absolute;
top: 158px;
left:10px;
}
.c_shengzi_3{
width: 264px;
height: 117px;
background: url(line_3.png);
position: absolute;
top: 220px;
left: 10px;
}
.c_shengzi_4{
width: 288px;
height: 56px;
background: url(line_4.png);
position: absolute;
top: 290px;
left:10px;
}
.c_shengzi_0{
display: none;
}
.c_zongzirou{
background: url(zzr_1.png) no-repeat;
background-size: 288px 206px;
position: absolute;
width: 288px;
height: 240px;
top: 50px;
left: 34px;
z-index: 101;
opacity: 0;
transform:scale(.8);
transform-origin:top center;
}
.c_zongzirou_in{
opacity: 1;
transform:scale(1);
}
.c_zongzirou_view_1{
transition:all 0;
background: url(zzr_1.png) no-repeat;
}
.c_zongzirou_view_2{
transition:all 0;
background: url(zzr_2.png) no-repeat;
}
.c_zongzirou_view_3{
transition:all 0;
background: url(zzr_3.png) no-repeat;
}
.c_zongzirou_view_4{
transition:all 0;
background: url(zzr_4.png) no-repeat;
}
.c_zongzirou_view_0{
transition:all 0;
background: url(zzr_1.png) no-repeat;
}
.c_zuoye{
background: url(leaf_left.png);
width: 114px;
height: 266px;
position: absolute;
top: -39px;
left: -13px;
z-index: 101;
opacity: 0;
transition:all 1s;
transform-origin:left bottom;
}
.c_zuoye_in{
opacity: 1;
transform:rotate(-3deg);
}
.c_zuoye_out{
opacity: 0;
transform:rotate(-15deg);
}
.c_youye{
background: url(leaf_right.png);
width: 318px;
height: 338px;
position: absolute;
top: -9px;
left: 80px;
z-index: 111;
opacity: 0;
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{
background: url(leaf_expand.png);
width: 618px;
height: 468px;
position: absolute;
top: -45px;
left: -150px;
z-index: 99;
opacity:0;
transition:all 1s;
}
.c_diye_in{
opacity: 1;
}
.c_t_1{
width: 180px;
height: 100px;
background: url(t_jixiang.png);
position: absolute;
left: 50%;
top: 50%;
z-index: 200;
margin-left: -70px;
margin-top: -50px;
opacity: 0;
transform-origin:center center;
transform:scale(.8);
}
.c_t_2{
width: 180px;
height: 100px;
background: url(t_ruyi.png);
position: absolute;
left: 50%;
top: 50%;
z-index: 200;
margin-left: -70px;
margin-top: -50px;
opacity: 0;
transform-origin:center center;
transform:scale(.8);
}
.c_t_in{
opacity: 1;
}
/*文字视角*/
.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) rotate(8deg) translate(-46px,-3px);
}
.c_t_mirror_2{
transition:all 0;
transform: scale(.7) rotateY(70deg) rotate(-7deg) translate(240px,25px);
}
/*transiton:all 0 为了让文字跟着粽子的旋转动，而自己本身不需要有任何动画效果*/
.c_t_view_3{
transiton:all 0;
transform:scale(.65) rotateY(52deg) rotate(17deg) translate(-145px,24px);
}
.c_t_mirror_3{
transition:all 0;
transform:scale(.75) rotateY(48deg) rotate(-14deg) translate(67px,10px);
}
.c_t_view_4{
transition:all 0;
transform:scale(.5) rotateY(50deg) rotate(24deg) translate(-178px,10px);
}
.c_t_mirror_4{
transition:all 0;
transform:scale(.8) rotateY(30deg) rotate(-5deg) translate(42px,10px);
}
/**祝福语*/
.text{
position: absolute;
width: 400px;
height: 300px;
left: 180px;
top: 140px;
font-size: 14px;
line-height: 20px;
color: #333;
}
.text_in{
opacity: 1;
}
.text .caption{
width: 400px;
height: 240px;
background: url(caption.png) no-repeat;
margin-left: 40px; /*为了实现左右晃动动画*/
opacity: 0;
transition:all 1s;
}
.text .caption_rock{
animation:4s rock infinite;
}
.text .from{
width: 400px;
margin-top: 10px;
margin-left: 40px;
text-align: right;
opacity: 0;
transition:all 1s 1.5s;
}
.text .msg{
width: 400px;
margin-top: 10px;
margin-left: 40px;
opacity: 0;
transition:all 1s 1s;
}
.text .to{
width: 400px;
margin-top: 10px;
margin-left: 40px;
opacity: 0;
transition:all 1s .5s;
}
.text_in .caption,
.text_in .to,
.text_in .msg,
.text_in .from{
opacity: 1;
margin-left: 0px;
}
</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" id="caption"></div>
<div class="to" style="font-size: 20px;line-height: 20px;">朋友：</div>
<div class="msg" style="font-size: 20px;line-height: 20px;">每一粒思念都粘连着我最真诚的想念，每一颗祝福都收藏着我采自天然的幸福，每一层快乐都包裹着我们之间的情谊不变，每一个粽子都香飘万里到你那里，致我的祝愿，端午节，致我最好的朋友，挂念。</div>
<div class="from" style="font-size: 20px;line-height: 20px;">杨</div>
</div>
</div>
</body>
<script type="text/javascript">
/*获取id*/
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();
/*1.粽子不停的在抖动
* 2.绳子点击触发绳子事件
*/
s1.add(1,function(){
g('c_zongzi_box').className = 'c_zongzi_box c_zongzi_box_rock';
g("c_shengzi").onclick = function(){
s2.start();
}
})
//粽子展开的动作
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_out';
g("c_zongzirou").className = 'c_zongzirou 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_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_zuoye_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";
g("caption").className = "caption caption_rock"
})
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";
g('c_t_1').className ="c_t_1 c_t_in c_t_view_0";
g("c_t_2").className = "c_t_2 c_t_in c_t_mirror_0";
})
//每隔5秒循环一次执行
s3.add(4500,function(){
s3.start()
})
//s2.start();
//图片加载器
var imgs = ['zzr_2.png','zzr_3.png','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>
</html>
扫一扫
2227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
