《纯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