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

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

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

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

OK,其實主要目的還是知識點的學習吧：

這個demo涉及的知識點有：

perspective

perspective-origin

transform-style

transform-origin

animation

@keyframes

translate3d,translateX，rotateY….

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

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

html結構：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表