                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /JS+CSS3實現“粽情端午”

誰有源碼，發一下給我，謝謝

對于我做后端的，這節奏太快了，學不懂。。。

GYA

2015-06-22

源自：JS+CSS3實現“粽情端午” 2-6

關注問題我要回答

1976

操作

收起

5 回答

Rongdd
2015-07-06

<html>

<head>

</head>

/*動畫樣式*/

@-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="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>

0 回復有任何疑惑可以回復我~

收起回答

GYA 提問者

非常感謝！

2015-07-23 回復有任何疑惑可以回復我~

qq_淺秋_04051456
2017-08-04

為什么我的視角0還會有對稱翻轉的過程啊?。浚?！

0 回復有任何疑惑可以回復我~

收起回答

qq_阿法狗狗狗_04402230
2017-07-30

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

0 回復有任何疑惑可以回復我~

收起回答

忄束負
2017-04-11

為啥

? .c_zongzirou_view_1{

? ? ? ? transition:all 0;

? ? ? ? background-image:url(img/zzr_1.png);

? ? ? }

transition:all 0; 不執行啊

0 回復有任何疑惑可以回復我~

收起回答

qq_05_0
2015-11-02

沒有效果！

0 回復有任何疑惑可以回復我~

收起回答

舉報

0/150

提交

取消

JS+CSS3實現“粽情端午”

參與學習 39497 人
解答問題 78 個

用JS和CSS3技術實現3D效果粽子特效動畫，掌握動畫制作過程

進入課程

本課相似問答

2 回答資料下載提供源代碼

1 回答老師，求源碼？

1 回答資源下載

1 回答老師，資料下載中能提供源代碼嗎？

2 回答源碼參考問題

搜索更多本課相關問答

誰有源碼，發一下給我，謝謝

我要回答關注問題

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

誰有源碼，發一下給我，謝謝

5 回答

本課相似問答

誰有源碼，發一下給我，謝謝

誰有源碼，發一下給我，謝謝

誰有源碼，發一下給我，謝謝