纯CSS3画出黄小人并实现动画效果.docxVIP

原文出处：?郭锦荣?前言前两天我刚发布了一篇CSS3实现小黄人动画的博客，但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片，并自己用PS抠出需要实现动画的部分，最后才完成的动画效果。但是，其实我的初衷是想体验一下用图片做动画的赶脚，但是找不到素材，才无奈用了最笨的方法来满足自己的需求，本想勉强能看就行了。可是呢，还是抵不住自己内心的完美，于是乎，用了一个晚上用CSS3画出了小黄人再实现类似的动画效果。正题OK，大家看一下下面两张图有什么不同：/blog/694143/201507/191612150167349.png当然，很多人会说，明显大小不同，嘴巴，头发也是不一样的。但是其实最大的不同是，用一个形象一点的例子就是：这是两个孩子，第一个是从超市货架上拿的，另外一个是我自己生的。怎么生呢？——用CSS3！那么生下来得会动啊，不然就夭折了，所以，我就多拍了几个，就变成这样子了：怎么样？虽然手脚动画还是不怎么神似，但人类聪明地大脑还是能看得出啥意思的吧！今天就让我们一起学习如何生出一个小黄人来。首先，还是直接把HTML结构放出来给大家打量打量：XHTML12345678910111213141516171819202122232425262728293031323334353637383940414243444546div class=wrapper!-- 容器 --?div class=littleH!-- 小黄人 --?div class=bodyH!-- 身体 --?div class=trousers!-- 裤子 --?div class=condoleBelt!-- 吊带 --?div class=left/div?div class=right/div?/div?div class=trousers_top/div!-- 裤子突出的矩形部分 --?div class=pocket/div!-- 裤袋 --?!-- 三条线 --?span class=line_left/span?span class=line_right/span?span class=line_bottom/span?/div?/div?div class=hair!-- 头发 --?span class=left_hair_one/span?span class=left_hair_two/span?/div?div class=eyes!-- 眼睛 --?div class=leftEye!-- 左眼 --?div class=left_blackEye?div class=left_white/div?/div?/div?div class=rightEye!-- 右眼 --?div class=right_blackEye?div class=right_white/div?/div?/div?/div?div class=mouse!-- 嘴巴 --?div class=mouse_shape/div?/div?div class=hands!-- 双手 --?div class=leftHand/div?div class=rightHand/div?/div?div class=feet!-- 双脚 --?div class=left_foot/div?div class=right_foot/div?/div?div class=groundShadow/div!-- 脚底阴影 --?/div?/div好的，每一处我都标明了它的用途，大家可以稍微理解一下，在头脑里有一个大概的模型或者层次结构。接下来就是猛料了。。。我将分步讲解，一步一步实现：首先对容器和整体做一些简单的样式设置：CSS123456789101112131415161718192021body{?margin: 0;?padding:0;}.wrapper{?width: 300px;?margin:100px auto;}.litteH{?position: relative;}.bodyH{?position: absolute;?width: 240px;?height: 400px;?border:5px solid #000;?border-radius: 115px;?background: rgb(249,217,70);?overflow: hidden;?z-index: 2;}其中.bodyH主要就是绘制小黄人的身体，身体的比例很重要，现在运行看一下效果：OK，身体已经有了，现在赶紧给它穿个裤子吧！CSS12345678910111213141516171819202122.bodyH .condoleBelt{?positi