求本課的代碼
求本課程的代碼
qq_與_7
2018-05-27
1 回答
舉報
0/150
提交
取消
求本課程的代碼
2018-05-27
舉報
2018-11-12
<!DOCTYPE?html><html?lang="en"><head><meta?charset="UTF-8"><meta?name="viewport"?content="width=device-width,?initial-scale=1.0"><meta?http-equiv="X-UA-Compatible"?content="ie=edge"><title>Document</title><style>/*?動畫樣式定義?*/@-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;}.main?{width:?1200px;height:?600px;/*?設(shè)置背景?*/background:?#000?url(img/bg.jpg);/*?浮動?*/position:?absolute;/*?右、下50%，在減去margin-右下就可以居中?*/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;}/*?定義rock的動畫時間，infinite代表著無限執(zhí)行(沒有其他方法影響的話)?*/.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:?1;transform:?scale(0.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;/*?display:?none;?*/transform-origin:?top?center;transition:?all?1s;transform:?scale(0.8);}.c_zongzirou_in{/*?display:?block;?*/opacity:?1;transition:?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;transform-origin:?left?bottom;transition:?all?1s;}.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;left:?80px;top:?-60px;z-index:?111;opacity:?0;transform-origin:?left?bottom;transition:?all?1s;transform:?scale(0.8);}.c_youye_in{opacity:?1;transform:rotate(5deg)?scale(0.8);}.c_youye_out{opacity:?0;transform:rotate(15deg)?scale(0.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;}/*?字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?center;/*?縮放0.8?*/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;/*?縮放0.8?*/transform:?scale(0.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;/*?display:?none;?*/}.text_in{/*?display:?block;?*/}.text?.caption{width:?400px;height:?240px;background:?url(img/caption.png)?no-repeat;margin-left:40px;opacity:?0;transition:?all?1s;}.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:?0px;}/*?粽子肉旋轉(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);transform:rotateY(180deg)}.c_t_view_1{transform:?scale(0.8)?rotateY(30deg)?translate(-50px,?0)?rotate(8deg);}.c_t_view_2{transform:?scale(0.7)?rotateY(70deg)?translate(283px,?-15)?rotate(-8deg);}.c_t_view_3{transform:?scale(0.75)?rotateY(49deg)?translate(-94px,?0)?rotate(15deg);}.c_t_view_4{transform:?scale(0.75)?rotateY(49deg)?translate(118px,?0)?rotate(-15deg);}.c_t_view_5{transform:?scale(0.8)?rotateY(50deg)?translate(-196px,?0)?rotate(24deg);}.c_t_view_6{transform:?scale(0.8)?rotateY(30deg)?translate(-58px,?0)?rotate(-5deg);}.c_t_view_0{transform:?scale(0.8);}.c_t_mirror_0{display:?none;}.c_t_view_2{transform:?scale(0.8)?rotateY(30deg)?translate(-50px,?0)?rotate(8deg);}.c_t_mirror_2{transform:?scale(0.7)?rotateY(70deg)?translate(283px,?-15px)?rotate(-8deg);}.c_t_view_3{transform:?scale(0.75)?rotateY(49deg)?translate(-94px,?0)?rotate(15deg);}.c_t_mirror_3{transform:?scale(0.75)?rotateY(49deg)?translate(118px,?0)?rotate(-15deg);}.c_t_view_4{transform:?scale(0.6)?rotateY(50deg)?translate(196px,?10px)?rotate(24deg);}.c_t_mirror_4{transform:?scale(0.8)?rotateY(30deg)?translate(58px,?10px)?rotate(-5deg);}</style></head><body><div?class="main"><div?class="c_zongzi_box"><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"><div?class="caption"></div><div?class="to">致所有的粽子們</div><div?class="msg">其實粽子并不好吃，而且很難消化</div><div?class="from">某不知名的</div></div></div></body></html>