谁有源码，发一下给我，谢谢-慕课网

首页课程实战体系课手记专栏慕课教程

谁有源码，发一下给我，谢谢

来源：2-6 动画样式（粽肉动画）

GYA

2015-06-22 16:24

对于我做后端的，这节奏太快了，学不懂。。。

写回答关注

5回答

Rongdd

2015-07-06 15:49:14

已采纳

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js+css3</title>
</head>
<style type="text/css">
/*动画样式*/
@-webkit-keyframes rotateplane {
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{
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(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_zhongzi_box_rock{
-webkit-animation: rotateplane 2s infinite;
}
/*粽子*/
.c_zongzi{
width:312px;
height:305px;
background:url(img/zz.png);
transition:all 1s;

}
.c_zongzi_out{
opacity:1;
-webkit-transform:scale(.5);
}
/*绳子*/
.c_shengzi_1{
width:218px;
height:180px;
background:url(img/line_1.png);
position:absolute;
left:10px;
top:120px;

}

.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 206px;
position:absolute;
left:50px;
top:34px;
z-index:101;
opacity: 0;/*透明度*/
webkit-transform-origin:top center;
-webkit-transform:scale(.8);
transition:all 1s;
}
.c_zongzirou_in{
opacity: 1;
-webkit-transform:scale(1);
}
/*左叶*/
.c_zuoye{
width:114px;
height:266px;
background:url(img/leaf_left.png);
position:absolute;
left:0px;
top:-30px;
z-index:1;
opacity: 0;/*透明度*/
-webkit-transform-origin:left bottom;
transition:all 1s;
}
.c_zuoye_in{
opacity:1;
-webkit-transform:rotate(-5deg);

}
.c_zuoye_out{
opacity:0;
-webkit-transform:rotate(-15deg);
}

/*右叶*/
.c_youye{
width:318px;
height:338px;
background:url(img/leaf_right.png);
position:absolute;/*显示在前面*/
left:80px;
top:-60px;
z-index:111;
opacity: 0;/*透明度*/

-webkit-transform-origin:left bottom;
transition:all 1s;
-webkit-transform:scale(.8);
}
.c_youye_in{
opacity:1;
-webkit-transform:rotate(5deg) scale(.8);
}
.c_youye_out{
opacity:0;
-webkit-transform:rotate(15deg) scale(.8);
}
/*底叶*/
.c_diye{
width:618px;
height:468px;
background:url(img/leaf_expand.png);
position:absolute;
left:-150px;
top:-45px;
z-index:99;
opacity: 0;/*透明度*/
transition:all 1s;
}
.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;
-webkit-transform-origin:center center;
-webkit-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;
-webkit-transform-origin:center center;
-webkit-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;
transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;

}
.text .caption{
width:400px;
height:240px;
background: url(img/caption.png) no-repeat;
margin-left: 40px;
transition: all 1s;
/*-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;*/
opacity: 0;/*透明度*/
}

.text .to{
width:400px;
margin-top: 10px;
margin-left: 40px;
transition: all 1s .5s;
/* -moz-transition: all 1s .5s;
-webkit-transition: all 1s .5s;
-o-transition: all 1s .5s;*/
opacity: 0;/*透明度*/
}
.text .msg{
width:400px;
margin-top: 10px;
margin-left: 40px;
opacity: 0;/*透明度*/
transition: all 1s 1s;
/*-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;*/
}
.text .from{
width:400px;
margin-top: 10px;
margin-left: 40px;
text-align:right;
opacity: 0;/*透明度*/
transition: all 1s 1.5s;
/*-moz-transition: all 1s 1.5s;
-webkit-transition: all 1s 1.5s;
-o-transition: all 1s 1.5s;*/
}
.text_in .caption,
.text_in .to,
.text_in .msg,
.text_in .from{
margin-left: 0px;
opacity: 1;
}
/*粽子肉的视角（旋转）*/\
.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);
-webkit-transform:rotateY(180deg);/*Y轴旋转180度*/
}

</style>
<body>
<div class="main">
<div class="c_zongzi_box c_zhongzi_box_rock">
<div class="c_zongzi"></div>
<div class="c_shengzi_1"></div>

<div class="c_zongzirou"></div>
<div class="c_zuoye"></div>
<div class="c_youye"></div>
<div class="c_diye"></div>

<div class="c_t_1"></div>
<div class="c_t_2"></div>
</div>
<div class="text text_in">
<div class="caption"></div>
<div class="to">慕课网</div>
<div class="msg">慕课网。你学习的网站。</div>
<div class="from">小穆</div>

</div>
</div>

</body>
</html>

1 0

GYA

非常感谢！

2015-07-23 13:57:12

共 1 条回复 >
qq_浅秋_04051456

2017-08-04 10:50:19

为什么我的视角0还会有对称翻转的过程啊啊？！！

0 0
qq_阿法狗狗狗_04402230

2017-07-30 14:33:15

把all后面那个0去了就行了

0 0
忄束負

2017-04-11 22:35:46

为啥
.c_zongzirou_view_1{
transition:all 0;
background-image:url(img/zzr_1.png);
}
transition:all 0; 不执行啊

0 0
qq_05_0

2015-11-02 21:58:22

没有效果！

0 0