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