《纯css3画出小黄人并实现动画效果》由会员分享，可在线阅读，更多相关《纯css3画出小黄人并实现动画效果（21页珍藏版）》请在金锄头文库上搜索。
1、纯CSS3画出小黄人并实现动画效果前言前两天我刚发布了一篇CSS3实现小黄人动画的博客，但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片，并自己用PS抠出需要实现动画的部分，最后才完成的动画效果。但是，其实我的初衷是想体验一下用图片做动画的赶脚，但是找不到素材，才无奈用了最笨的方法来满足自己的需求，本想勉强能看就行了。可是呢，还是抵不住自己内心的完美，于是乎，用了一个晚上用CSS3画出了小黄人再实现类似的动画效果。内容OK，大家看一下下面两张图有什么不同：当然，很多人会说，明显大小不同，嘴巴，头发也是不一样的。但是其实最大的不同是，用一个形象一点的例子就是：这是两个孩子，
2、第一个是从超市货架上拿的，另外一个是我自己生的。怎么生呢？用CSS3！那么生下来得会动啊，不然就夭折了，所以，我就多拍了几个，就变成这样子了：怎么样？虽然手脚动画还是不怎么神似，但人类聪明地大脑还是能看得出啥意思的吧！今天就让我们一起学习如何生出一个小黄人来。首先，还是直接把HTML结构放出来给大家打量打量： 好的，每一处我都标明了它的用途，大家可以稍微理解一下，在头脑里有一个大概的模型或者层次结构。接下来就是猛料了。我将分步讲解，一步一步实现：首先对容器和整体做一些简单的样式设置：body margin: 0; padding:0;.wrapper width: 300px; margin:
3、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;.b
4、odyH .trousers position: absolute; bottom: 0; width: 100%; height: 100px; border-top: 6px solid #000; background: rgb(32,116,160);.trousers_top width: 160px; height: 60px; border:6px solid #000; border-bottom: none; border-radius: 0 0 5px 5px; background: rgb(32,116,160); position: absolute; bottom:
5、 100px; left:34px;其中.trousers_top就是矩形部分，那么穿完裤子是什么样子的呢？现在怎么看都像一颗胶囊，不行，赶紧修饰修饰，给它一个吊带，不然裤子会掉呢：.bodyH .condoleBelt .left,.bodyH .condoleBelt .right width: 100px; height: 16px; border:5px solid #000; background: rgb(32,116,160); position: absolute; top:-90px; left:-35px; z-index: 2; -webkit-transform:rot
6、ate(45deg);.bodyH .condoleBelt .left top:-88px; left:165px; -webkit-transform:rotate(-45deg);.bodyH .condoleBelt .left:after,.bodyH .condoleBelt .right:after content: ; width: 8px; height: 8px; border-radius: 50%; background: #000; position: absolute; top:4px; left:88px;.bodyH .condoleBelt .left:aft
7、er left:5px;这一块主要就是实现两个吊带，左右各一条，然后我使用：after伪元素来实现吊带上的小黑点：咦，开始有模有样了，接下来我们一鼓作气把裤袋和一下修饰的边边给实现了：.pocket width: 60px; height: 45px; border:6px solid #000; border-radius: 0px 0px 25px 25px; position: absolute; bottom:65px; left:84px;.line_right width: 30px; height: 30px; border-bottom-left-radius: 100px;
8、border-bottom:6px solid #000; border-left:6px solid #000; position: absolute; left: 0; bottom:60px; -webkit-transform:rotate(-75deg);.line_left width: 30px; height: 30px; border-bottom-right-radius: 100px; border-bottom:6px solid #000; border-right:6px solid #000; position: absolute; right: 0; bottom:63px; -webkit-transform:rotate(75deg);.line_bottom height: 40px; border:3px solid #000; border-radius: 3px; position: absolute; left:118px;
