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

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

聯(lián)想到我要做CSS3動畫，呵呵……怎么辦 ? ——沒辦法，摳唄！(此處勿噴，著實無素材)

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

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

這個demo涉及的知識點有：

perspective

perspective-origin

transform-style

transform-origin

animation

@keyframes

translate3d,translateX，rotateY….

這些知識點有些涉及css3d動畫，各個知識點的具體詳解我就不解釋了，有興趣可以到這里了解一下：http://isux.tencent.com/css3/index.html

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

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

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

小黃人

總結(jié)

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

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