《纯CSS3画出小黄人并实现动画效果》由会员分享，可在线阅读，更多相关《纯CSS3画出小黄人并实现动画效果（21页珍藏版）》请在金锄头文库上搜索。
1、纯 CSS3画出小黄人并实现动画效果前言前两天我刚发布了一篇 CSS3 实现小黄人动画的博客，但是实现的 CSS3 动画是基于我在站酷网找到的一张小黄人的 jpg 格式图片，并自己用 PS 抠出需要实现动画的部分，最后才完成的动画效果。但是，其实我的初衷是想体验一下用图片做动画的赶脚，但是找不到素材，才无奈用了最笨的方法来满足自己的需求，本想勉强能看就行了。可是呢，还是抵不住自己内心的完美，于是乎，用了一个晚上用 CSS3画出了小黄人再实现类似的动画效果。内容OK，大家看一下下面两张图有什么不同：当然，很多人会说，明显大小不同，嘴巴，头发也是不一样的。但是其实最大的不同是，用一个形象一点的例子
2、就是：这是两个孩子，第一个是从超市货架上拿的，另外一个是我自己生的。怎么生呢？ 用 CSS3！那么生下来得会动啊，不然就夭折了，所以，我就多拍了几个，就变成这样子了：怎么样？虽然手脚动画还是不怎么神似，但人类聪明地大脑还是能看得出啥意思的吧！今天就让我们一起学习如何生出一个小黄人来。首先，还是直接把 HTML结构放出来给大家打量打量： 好的，每一处我都标明了它的用途，大家可以稍微理解一下，在头脑里有一个大概的模型或者层次结构。接下来就是猛料了。我将分步讲解，一步一步实现：首先对容器和整体做一些简单的样式设置：bodymargin: 0;padding:0;.wrapperwidth: 300p
3、x;margin:100px auto;.litteHposition: relative;.bodyHposition: 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 .condoleBeltposition: absolute;.b
4、odyH .trousersposition: absolute; bottom: 0;width: 100%;height: 100px;border-top: 6px solid #000;background: rgb(32,116,160);.trousers_topwidth: 160px;height: 60px;border:6px solid #000;border-bottom: none;border-radius: 0 0 5px 5px;background: rgb(32,116,160);position: absolute;bottom: 100px;left:3
5、4px;其中.trousers_top 就是矩形部分，那么穿完裤子是什么样子的呢？现在怎么看都像一颗胶囊，不行，赶紧修饰修饰，给它一个吊带，不然裤子会掉呢：.bodyH .condoleBelt .left,.bodyH .condoleBelt .rightwidth: 100px;height: 16px;border:5px solid #000; background: rgb(32,116,160);position: absolute;top:-90px;left:-35px;z-index: 2;-webkit-transform:rotate(45deg);.bodyH .co
6、ndoleBelt .lefttop:-88px;left:165px;-webkit-transform:rotate(-45deg);.bodyH .condoleBelt .left:after,.bodyH .condoleBelt .right:aftercontent: ;width: 8px;height: 8px;border-radius: 50%;background: #000;position: absolute;top:4px;left:88px;.bodyH .condoleBelt .left:afterleft:5px;这一块主要就是实现两个吊带，左右各一条，然
7、后我使用：after 伪元素来实现吊带上的小黑点：咦，开始有模有样了，接下来我们一鼓作气把裤袋和一下修饰的边边给实现了：.pocketwidth: 60px;height: 45px;border:6px solid #000;border-radius: 0px 0px 25px 25px;position: absolute;bottom:65px;left:84px;.line_rightwidth: 30px;height: 30px;border-bottom-left-radius: 100px;border-bottom:6px solid #000;border-left:6p
8、x solid #000;position: absolute;left: 0;bottom:60px;-webkit-transform:rotate(-75deg);.line_leftwidth: 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_bottomheig
9、ht: 40px;border:3px solid #000;border-radius: 3px;position: absolute;left:118px;bottom: 0px;先看效果图：OK，两个注意点说一下：1.我把裤子放在身体里面，然后给.bodyH 添加 overflow:hidden，这样我们就不用去多虑溢出怎么办，而且很轻松就能实现裤子的效果；2.可以看到裤子两边有两条有弧度的曲线段，我是通过给矩形某一个角实现圆角效果，然后只设置与这个角相邻的两条边的边框样式，然后旋转一下角度就实现这个效果了，当然只能实现简单一点的效果。好的，我们继续，接下来先实现以下眼睛部分吧：.eye
10、sposition: relative;z-index: 3;.eyes .leftEye,.eyes .rightEyewidth: 85px;height: 85px;border-radius: 50%;border:6px solid #000;background: #fff;position: absolute;top:60px;left: 27px;.eyes .leftEyeleft: 124px;.eyes .leftEye .left_blackEye,.eyes .rightEye .right_blackEyewidth: 40px;height: 40px;borde
11、r-radius: 50%;background: #000;position: absolute;top:24px;left:22px;.eyes .leftEye .left_blackEye .left_white,.eyes .rightEye .right_blackEye .right_whitewidth: 20px;height: 20px;border-radius: 50%;background: #fff;position: absolute;top:7px;left:17px;.eyes .leftEye .left_blackEye .left_whitetop:4p
12、x;left:17px;.eyes .leftEye:after,.eyes .rightEye:aftercontent: ; width: 28px;height: 18px;background: #000;position: absolute;left:-30px;top:37px;-webkit-transform:skewX(20deg) rotate(7deg);.eyes .leftEye:afterleft:89px;top:37px;-webkit-transform:skewX(-20deg) rotate(-7deg);眼睛部分还是挺好实现的，先画眼镜，然后黑眼珠，再画
13、白点，最后我才画的眼镜框，眼睛框我是用：after 伪元素实现的。效果图如下：嘴巴是最困惑我的，但还是最后还是能实现：.mouseposition: relative;.mouse .mouse_shapewidth: 55px;height: 35px;border:5px solid #000;border-bottom-left-radius: 30px;background: #fff; position: absolute;top:175px;left:98px;z-index: 3;-webkit-transform:rotate(-35deg);首先也是通过矩形其中一个角实现圆角
14、来模拟嘴巴形状，再加以旋转：结果是这样的，那么想要达到我们预期的效果，就需要把上半部分给遮掉，所以我用：after 伪元素来实现遮罩效果：.mouse .mouse_shape:aftercontent: ;width: 70px;height: 32px;border-bottom:5px solid #000;border-radius:35px 26px 5px 5px;background: red;position: absolute;top:-16px;left:3px;-webkit-transform:rotate(34deg);这个地方就需要慢慢调到合适的位置，模拟图如下：红
15、色部分就是遮罩了，也是一个矩形，设置了底边框，实现和嘴巴下半部分形成闭合效果，现在我们就可以把颜色改成肤色就行了：.mouse .mouse_shape:aftercontent: ;width: 70px;height: 32px;border-bottom:5px solid #000;border-radius:35px 26px 5px 5px;background: rgb(249,217,70);position: absolute;top:-16px;left:3px;-webkit-transform:rotate(34deg);-webkit-animation: mouse
16、_mask 5s ease-in-out infinite;效果图如下：接下来实现双手部分，这一部分不难，就是两个圆角矩形，旋转了角度，然后层级低于身体的层级就行，然后再通过：after 伪元素实现胳膊关节处就搞定了。.handsposition: relative;.hands .leftHand,.hands .rightHandwidth: 80px;height: 80px;border:6px solid #000;border-radius: 25px;background: rgb(249,217,70);position: absolute;top:220px;left:-23px;-webkit-transform:rotate(40deg);.hand
