本文主要包含CSS3,小黄人,动画等相关知识,佚名 希望在学习及工作中可以帮助到您
每次看到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结构：
- <body>
- <div class="title">
- <p>小黄人</p>
- </div>
- <div class="wrapper">
- <div class="littleH">
- <div class="light">
- <div class="light_left">
- <p>欢迎欢迎，热烈欢迎</p>
- </div>
- <div class="light_right">
- <p>欢迎欢迎，热烈欢迎</p>
- </div>
- <div class="load"></div>
- </div>
- <div class="littleH_body">
- <div class="leftHair"></div>
- <div class="rightHair"></div>