                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /HTML/CSS
                        
                        /JS+CSS3實(shí)現(xiàn)“粽情端午”

為什么粽子不抖動(dòng)

<!doctype>

<HTML>

<head>

</head>

? ?@-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;

? ?background:#000 url(img/bg.jpg);

? ?position:absolute;

? ? left:50%；

? ? top:50%； ? ?

? ? overflow:hidden;

? ?}

.c_zongzi_box

? ?{

? ? width:312px;

? ? ?height:305px;

? ? ?position:absolute;

? ? ?left:700px;

? ? ?top:184px;

? ?}

.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;

? ? -webkit-transform:scale(.5);

? ? ?}

? ?.c_shengzi_1

? ? {

? ? ? width:218px;

? ? ? height:180px;

? ? ? background:url(img/line_1.png);

? ? ? position:absolute;

? ? ?left:10px;

? ? ?top:120px;

z-index:999;

? ? ?cursor:pointer;

? ? }

? ? ? .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:260px;

? ? }

? ? ?.c_zongzirou

? ? {

? ? ? width:288px;

? ? ? height:206px;

? ? ? position:absolute;

? ? ? left:50px;

? ? ? top:34px;

? ? ? background-size:288px 206px;

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

? ? ? z-index:110;

? ? ? opacity:0;

?transition:all 1s;

?transform-origin:top center;

?transform:scale(.8);

? ? }

.c_zongzirou_in

{opacity:1;

transform:scale(1);}

? .c_zuoye

? ? {

? ? ? width:114px;

? ? ? height:266px;

? ? ? position:absolute;

? ? ? left:0px;

? ? ? top:-30px;

? ? ? background:url(img/leaf_left.png);

? ? ? 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;

? ? ? position:absolute;

? ? ? left:80px;

? ? ? top:-60px;

? ? ? background:url(img/leaf_right.png);

? ? ? 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:1;

transform:rotate(15deg) scale(.8);}

? ? ? .c_diye

? ? {

? ? ? width:618px;

? ? ? height:468px;

? ? ? position:absolute;

? ? ? left:-150px;

? ? ? top:-45px;

? ? ? background:url(img/leaf_expand.png);

? ? ? 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;

? ? ? ? ?transform:scale(.8);

? ? ? ? ?transform-origin:center center;

? ? ? ? opacity:0;

? ? ?}

.c_t_in

{opacity:1;}

?.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:scale(.8);

? ? ? ? ?transform-origin:center center;

? ? ? ? ?opacity:0;

? ? ?}

? ? ?.text

? ? ? {

? ? ? ?position:absolute;

? ? ? ?width:400px;

? ? ? ? height:370px;

? ? ? ? left:180px;

? ? ? ? top:140px;

? ? ? ? ?font-size:14px;

? ? ? ? ?line-height:20px;

? ? ? ? ?color:#333;

? ? ? ? ?opacity:0;

? ? ? ? display:none;

? ? ? ? ? transition:all 1s;

? ? ? }

? ?.text .caption

? ? ? {

? ? ? ?width:400px;

? ? ? ? height:240px;

? ? ? ?background:url(img/caption.png) no-repeat;

? ? ? ?margin-left:40px;

? ? ? }

? ? ?.text .to

? ? ? {

? ? ? ?width:400px;

? ? ? ? margin-top:10px;

? ? ? ?margin-left:40px;

? ? ? ?transition:all 1s .5s;

? ? ? ?}

? ? ? ?.text ?.msg

? ? ? {

? ? ? ?width:400px;

? ? ? ? margin-top:10px;

? ? ? ?margin-left:40px;

? ? ? ?transition:all 1s 1s;

? ? ? ?}

? ? ? .text ?.from

? ? ? {

? ? ? ?width:400px;

? ? ? ? margin-top:10px;

? ? ? ?margin-left:40px;

? ? ? ?text-align:right;

? ? ? ? transition:all 1s 1.5s;

? ? ? ?}

? ? ? ?.text_in

? ? ? ?{ ?display:block;

? ? ? ? ? opacity:1;?

? ? ? ? }

? ? ?.text_in .to,

? ? ? .text_in .msg,

? ? ? .text_in .from

? ? ?{ ?opacity:1;?

? ? ? ? ?margin-left:0px;

? ? ?}

.c_zongzirou_view_1

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

?

}

.c_zongzirou_view_2

{background-image:url(img/zzr_2.png);

?

}

?.c_zongzirou_view_3

{background-image:url(img/zzr_3.png);

transition:all 0;

}

?.c_zongzirou_view_4

{background-image:url(img/zzr_4.png);

transition:all 0;

}

?.c_zongzirou_view_0

{

transition:all 0;

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

transform:rotateY(180deg);

?

}

.c_t_view_0

{transform:scale(.8);}

.c_t_mirror_0

{display:none;}

.c_t_view_2

{transform:scale(.8) rotateY(30deg) translate(-50px,0) rotate(8deg) ;}

.c_t_mirror_2

{transform:scale(.7) rotateY(70deg) translate(283px,-15px) rotate(-8deg);}

.c_t_view_3

{transform:scale(.75) rotateY(49deg) translate(-94px,0) rotate(15deg);}

.c_t_mirror_3

{transform:scale(.75) rotateY(49deg) translate(118px,0) rotate(-15deg);}

.c_t_view_4

{transform:scale(.6) rotateY(50deg) translate(196px,10px) rotate(24deg);}

.c_t_mirror_4

{transform:scale(.8) rotateY(30deg) translate(58px,10px) rotate(-5deg);}

</style>

var g=function(id)

{return document.getElementById(id);}

var Timeline=function(){-}

/*{this.order=[];

this.order=function(timeout,func,log)

? ? ? ?{this.order.push({

? ? ? ? ?timeout:timeout,

?func:func,

?log:log,

? ? ? ? ? ? ? ? });

}

this.start=function()

? ? ? ? ? ? ? ? ? ? ? {

? for(s in this.order)

? {

? (function(me)

? {

? var fn=me.func;

? var timeout=me.timeout;

? var log=me.log;

? setTimeout(fn,timeout);

? setTimeout(function(){console.log('time->',timeout,'log->',log);},timeout);

? }

? )(this.order[s])

? }

}*/

/*初始場(chǎng)景*/

var s1=new Timeline();

/*粽子展開(kāi)的場(chǎng)景*/

var s2=new Timeline();

/*粽子旋轉(zhuǎn)的場(chǎng)景*/

var s3=new Timeline();

s1.add(1,function()

{g('c_zongzi_box').className='c_zongzi_box c_zongzi_box_rock';

g('c_chengzi').onclick=function()

? ? ? ? ? ? ? ? ? ?{s2.start();

g('c_shengzi').onclick=function(){}

}

})

s2.add(1,function()

{g('c_zongzi_box').className='c_zongzi_box ';})

/*s2.add(100,function()

{g('c_zognzi_box').className='c_zongzi_box ';})*/

s1.start();

</script>

<body>

? ?<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_zuoye ?"></div>

? ? ? ? ? <div class="c_zongzirou "></div>

? ? ? ? ? ?<div class="c_youye "></div>

? ? ? ? ? ?<div class="c_diye "></div>

? ? ? ? ? <div class="c_t_1 ?"></div>

? ? ? ? ?<div class="c_t_2 c_t_in c_t_view_0 "></div>

? ? ? </div>

? ? ? <div class="text text_in">

? ? ? ? ? ? ?<div class="caption"></div>

? ? ? ? ? ? ? <div class="to">小伙伴們</div>

? ? ? ? ? ? ? <div class="msg">在端午節(jié)來(lái)臨之際，我給大家送來(lái)心意，希望大家找到真正的喜樂(lè)和滿(mǎn)足</div>

? ? ? ? ? ? ? ?<div class="from">小慧</div>

? ? ? </div>

? ? ??

</div>

</body>

</HTML>

老師代碼敲到這，實(shí)現(xiàn)的功能是粽子在抖動(dòng) ，鼠標(biāo)放上去后粽子不再抖動(dòng)，可是為什么我代碼敲到這粽子一開(kāi)始就不會(huì)動(dòng)

不能飛的魚(yú)

2016-06-09

源自：JS+CSS3實(shí)現(xiàn)“粽情端午” 2-10

關(guān)注問(wèn)題我要回答

1436

操作

收起

1 回答

huangliang
2016-08-27

?

.c_zongzi_box_rock?{

????? -webkit-animation:rock 2s infinite;

? ?}

把.c_zongzi_box_rock加上去（<div class="c_zongzi_box ?c_zongzi_box_rock" id="c_zongzi_box">）

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

qq_淺秋_04051456

為什么我的加上還是不抖動(dòng)??？而且，我的在chrome改后也不會(huì)更新頁(yè)面，應(yīng)該如何操作chrome調(diào)試？

2017-04-25 回復(fù) 有任何疑惑可以回復(fù)我~

舉報(bào)

0/150

提交

取消

JS+CSS3實(shí)現(xiàn)“粽情端午”

參與學(xué)習(xí) 39501 人
解答問(wèn)題 78 個(gè)

用JS和CSS3技術(shù)實(shí)現(xiàn)3D效果粽子特效動(dòng)畫(huà)，掌握動(dòng)畫(huà)制作過(guò)程

進(jìn)入課程

本課相似問(wèn)答

2 回答粽子為啥不抖動(dòng)了

1 回答不給id粽子就不抖動(dòng)

1 回答粽子抖動(dòng)動(dòng)畫(huà)，為啥和老師操作一樣確沒(méi)效果？

1 回答“粽情端午”2-4部分，實(shí)現(xiàn)粽子抖動(dòng)動(dòng)畫(huà)時(shí)，在chrome中是怎么調(diào)試的，為啥我的不行？

2 回答我的粽子總是消失不了，粽子底葉出現(xiàn)不了

搜索更多本課相關(guān)問(wèn)答

為什么粽子不抖動(dòng)

我要回答關(guān)注問(wèn)題

使用 Ctrl+D 可將網(wǎng)站添加到書(shū)簽

微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

為什么粽子不抖動(dòng)

1 回答

本課相似問(wèn)答

為什么粽子不抖動(dòng)