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

/jr1993/p/4658772.html纯CSS3画出小黄人并实现动画效果前言前两天我刚发布了一篇CSS3实现小黄人动画的博客，但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片，并自己用PS抠出需要实现动画的部分，最后才完成的动画效果。但是，其实我的初衷是想体验一下用图片做动画的赶脚，但是找不到素材，才无奈用了最笨的方法来满足自己的需求，本想勉强能看就行了。可是呢，还是抵不住自己内心的完美，于是乎，用了一个晚上用CSS3画出了小黄人再实现类似的动画效果。内容OK，大家看一下下面两张图有什么不同：当然，很多人会说，明显大小不同，嘴巴，头发也是不一样的。但是其实最大的不同是，用一个形象一点的例子就是：这是两个孩子，第一个是从超市货架上拿的，另外一个是我自己生的。怎么生呢？——用CSS3！那么生下来得会动啊，不然就夭折了，所以，我就多拍了几个，就变成这样子了：怎么样？虽然手脚动画还是不怎么神似，但人类聪明地大脑还是能看得出啥意思的吧！今天就让我们一起学习如何生出一个小黄人来。首先，还是直接把HTML结构放出来给大家打量打量：div 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好的，每一处我都标明了它的用途，大家可以稍微理解一下，在头脑里有一个大概的模型或者层次结构。接下来就是猛料了。。。我将分步讲解，一步一步实现：首先对容器和整体做一些简单的样式设置：body{ 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，身体已经有了，现在赶紧给它穿个裤子吧！.bodyH .condoleBelt{ position: absolute;}.bodyH .trousers{ position: absolute; bottom: 0; width: 100%; height: 100px; border-top: 6px solid #000; background: rgb(32,116,160);}.trousers_top{ width: 16