每次看到CSS3動(dòng)畫(huà)就心癢癢想試一下，記得一個(gè)多月前看了白樹(shù)哥哥的一篇博客，突然開(kāi)竅，于是拿他提供的demo試了一下，感覺(jué)很棒！下圖為demo提供的動(dòng)畫(huà)幀設(shè)計(jì)稿。

自己也想說(shuō)搞一個(gè)DIY的動(dòng)畫(huà)出來(lái)，可是，會(huì)PS不一定會(huì)設(shè)計(jì)啊，我搞不出一套動(dòng)畫(huà)設(shè)計(jì)稿出來(lái)啊【抓狂】….于是乎，去了站酷網(wǎng)找找素材，我果然還是太天真了，最后從心只找到了一張圖：

聯(lián)想到我要做CSS3動(dòng)畫(huà)，呵呵……怎么辦 ? ——沒(méi)辦法，摳唄！(此處勿噴，著實(shí)無(wú)素材)

……最后效果變成這樣子,這是移動(dòng)端的例子！(gif圖有卡頓現(xiàn)象，請(qǐng)湊合看吧,非喜勿噴…)：

OK,其實(shí)主要目的還是知識(shí)點(diǎn)的學(xué)習(xí)吧：

這個(gè)demo涉及的知識(shí)點(diǎn)有：

perspective

perspective-origin

transform-style

transform-origin

animation

@keyframes

translate3d,translateX，rotateY….

這些知識(shí)點(diǎn)有些涉及css3d動(dòng)畫(huà)，各個(gè)知識(shí)點(diǎn)的具體詳解我就不解釋了，有興趣可以到這里了解一下：http://isux.tencent.com/css3/index.html

回到這個(gè)案例，話說(shuō)這么挫的動(dòng)畫(huà)是怎么具體實(shí)現(xiàn)的呢？ 我將分享代碼給大家練習(xí)：

html結(jié)構(gòu)：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

小黃人

總結(jié)

以上是生活随笔為你收集整理的html设计动画小黄人,CSS3实现可爱的小黄人动画的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。