誰(shuí)有源碼，發(fā)一下給我，謝謝
對(duì)于我做后端的，這節(jié)奏太快了，學(xué)不懂。。。
GYA
2015-06-22
5 回答
舉報(bào)
0/150
提交
取消
2015-07-06
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js+css3</title>
</head>
<style type="text/css">
/*動(dòng)畫(huà)樣式*/
@-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;
? ? }
? /*粽子盒子，所有內(nèi)部元件都在這*/
? ? .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;
? ? ? }
? ? ? /*粽子肉的視角（旋轉(zhuǎn)）*/\
? ? ? .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軸旋轉(zhuǎn)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">慕課網(wǎng)</div>
? ? ?<div class="msg">慕課網(wǎng)。你學(xué)習(xí)的網(wǎng)站。</div>
? ? ?<div class="from">小穆</div>
? ? ?
? </div>
</div>
</body>
</html>
2017-08-04
為什么我的視角0還會(huì)有對(duì)稱翻轉(zhuǎn)的過(guò)程啊?。浚。?/p>
2017-07-30
把a(bǔ)ll后面那個(gè)0去了就行了
2017-04-11
為啥
? .c_zongzirou_view_1{
? ? ? ? transition:all 0;
? ? ? ? background-image:url(img/zzr_1.png);
? ? ? }
transition:all 0; 不執(zhí)行啊
2015-11-02
沒(méi)有效果！