当前位置：首页 > 科技观察

纯CSS3绘制小黄人并实现动画效果

时间：2023-03-22 10:13:47 科技观察

前言我前两天刚发了一篇关于小黄人CSS3动画的博客，但是实现的CSS3动画是基于我在zcool.com上找的一张小黄的jpg格式图片man，然后用PS把需要做动画的部分剪下来，最后完成动画效果。然而，其实我的初衷是想体验一下动画配图的火爆，但是找不到素材，只好用最笨的方法来满足自己的需求。我以为我几乎看不下去了。但是，还是抵挡不住内心的渴望，于是我连夜用CSS3画了小黄人，实现了类似的动画效果。话题好了，我们来看看下面两张图的区别：当然很多人会说大小明显不一样，嘴巴和头发也不一样。但其实最大的区别是，用一个更形象的例子：这是两个孩子，第一个是超市货架上拿的，另一个是自己生的。它是如何诞生的？——使用CSS3！那你生下来就得会动，不然早夭，我就多拍了几张，就变成了这样：怎么？虽然手脚的动画还是不太像，但是人类聪明的大脑还是能看出来是什么意思的！今天就让我们来学习如何生小黄人吧。首先直接放出HTML结构给大家看看：

好了，我在每个地方都标出了它的用途，你可以稍微了解一下，心里有一个通用模型或层次结构，然后是一个疯狂的猜测......我会一步步解释，一步步实现：首先对容器和整体做一些简单的样式设置：body{margin:0;padding:0;}.wrapper{width:300px;margin:100pxauto;}.litteH{position:relative;}.bodyH{position:absolute;width:240px;height:400px;border:5pxsolid#000;border-radius:115px;background:rgb(249,217,70);overflow:hidden;z-index:2;}其中.bodyH主要是绘制小黄人的身体。身体的比例很重要。现在运行看看效果：好了，身体已经有了，现在我们来穿裤子吧！.bodyH.condoleBelt{position:absolute;}.bodyH.trousers{position:absolute;bottom:0;width:100%;height:100px;border-top:6pxsolid#000;background:rgb(32,116,160);}.trousers_top{width:160px;height:60px;border:6pxsolid#000;border-bottom:none;border-radius:005px5px;background:rgb(32,116,160);position:absolute;bottom:100px;left:34px;}where.trousers_top是长方形的部分，那么裤子穿上之后是什么样子的呢？现在看起来像个胶囊，不行，赶紧修改，给个吊带，不然裤子掉了：.bodyH.condoleBelt.left,.bodyH.condoleBelt.right{width:100px;height:16px;border:5pxsolid#000；背景：rgb（32,116,160）；位置：绝对；顶部：-90px；左侧：-35px；z-index：2；-webkit-transform：旋转（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:after{left:5px;}这块主要是实现两个吊带，一个在左边一个在左边，然后我用:after伪元素实现了吊带上的小黑点：嘿嘿，开始好看了，接下来就全力以赴实现裤兜和修改边缘：.pocket{width:60px;高度：45px；边框：6pxsolid#000；边框半径：0px0px25px25px；位置：绝对；底部：65px；左：84px；}.line_right{宽度：30px；高度：30px；边框-底部-左-半径：100px；border-bottom:6pxsolid#000;border-left:6pxsolid#000;position:absolute;left:0;bottom:60px;-webkit-transform:rotate(-75deg);}.line_left{宽度:30px;高度:30px;border-bottom-right-radius:100px;border-bottom:6pxsolid#000;border-right:6pxsolid#000;position:absolute;right:0;bottom:63px;-webkit-transform:rotate(75deg);}.line_bottom{height:40px;border:3pxsolid#000;border-radius:3px;position:absolute;left:118px;bottom:0px;}先看效果图：OK，注意两点：1。我把裤子放在body里面，然后在.bodyH中加上overflow:hidden，这样我们就不用太担心溢出了，裤子的效果也很容易实现；2.可以看到裤子两边有两个弧度长方形的曲线段，我通过给长方形的某个角来实现圆角效果，然后只设置两侧的边框样式相邻这个角，然后旋转角度来达到这个效果。当然，只能实现一个简单的。影响好，我们继续，先实现下面的眼睛：.eyes{position:relative;z-index:3;}.eyes.leftEye,.eyes.rightEye{width:85px;height:85px;border-radius:50%;border:6pxsolid#000;background:#fff;position:absolute;top:60px;left:27px;}.eyes.leftEye{left:124px;}.eyes.leftEye.left_blackEye,.eyes.rightEye.right_blackEye{width:40px;height:40px;border-radius:50%;background:#000;position:absolute;top:24px;left:22px;}.eyes.leftEye.left_blackEye.left_white,.eyes.rightEye.right_blackEye.right_white{width:20px;height:20px;border-radius:50%;background:#fff;position:absolute;top:7px;left:17px;}.eyes.leftEye.left_blackEye.left_white{top:4px;left:17px;}.eyes.leftEye:after,.eyes.rightEye:after{content:'';width:28px;height:18px;background:#000;position:absolute;left:-30px;top:37px;-webkit-transform:skewX(20deg)rotate(7deg);}.eyes.leftEye:after{left:89px;top:37px;-webkit-transform:skewX(-20deg)rotate(-7deg);}眼睛静止pretty很容易实现。先画眼镜，再画黑眼球，再画白点。***我只是画了眼镜框。我使用了:after伪元素来实现眼框。效果图如下：嘴巴是我最迷惑的，不过还是可以实现的：.mouse{position:relative;}.mouse.mouse_shape{width:55px;height:35px;border:5pxsolid#000;border-bottom-left-radius:30px;background:#fff;position:absolute;top:175px;left:98px;z-index:3;-webkit-transform:rotate(-35deg);}首先，它也是通过矩形的其中一个角来实现的，用圆角来模拟嘴巴的形状，然后旋转一下：结果是这样的，所以如果要达到我们预期的效果，就需要把上半部分遮住，所以我使用：after伪元素来实现遮罩效果：.mouse.mouse_shape:after{content:'';width:70px;height:32px;border-bottom:5pxsolid#000;border-radius:35px26px5px5px;background:red;position:absolute;top:-16px;left:3px;-webkit-transform:rotate(34deg);}这个地方需要慢慢调整到合适的位置。仿真图如下：红色部分是mask，也是一个矩形。底部边框设置为实现与嘴巴下部闭合效果，此时我们可以将颜色改为肤色：.mouse.mouse_shape:after{content:'';width:70px;height:32px;border-bottom:5pxsolid#000;border-radius:35px26px5px5px;background:rgb(249,217,70);position:absolute;top:-16px;left:3px;-webkit-transform:rotate(34deg);-webkit-animation:mouse_mask5sease-in-outinfinite;}效果图如下：接下来实现双手Part，这部分不难，就是两个圆角矩形，旋转角度，然后level低于bodylevel，然后通过:after伪元素实现手臂关节就搞定了。.hands{position:relative;}.hands.leftHand,.hands.rightHand{width:80px;height:80px;border:6pxsolid#000;border-radius:25px;background:rgb(249,217,70);position:absolute;top:220px;left:-23px;-webkit-transform:rotate(40deg);}.hands.leftHand{left:182px;top:220px;-webkit-transform:rotate(-40deg);}.hands.leftHand:after,.hands.rightHand:after{content:'';width:6px;border:3pxsolid#000;border-radius:3px;position:absolute;left:13px;top:50px;-webkit-transform:rotate(90deg);}.hands.leftHand:after{left:53px;top:50px;-webkit-transform:rotate(-90deg);}效果图如下：接下来是脚的部分，主要是上图的设计，我用了一个矩形，然后设置不同的圆角值，加一点旋转来模拟。对于这一块，我觉得不是很像，所以差点妥协了。.feet{position:relative;}.feet.left_foot,.feet.right_foot{width:36px;height:50px;border-bottom-right-radius:6px;border-bottom-left-radius:9px;background:#000;位置：绝对；顶部：406px；左：88px；-webkit-transform-origin：righttop；}.feet.left_foot{border-bottom-right-radius:9px;border-bottom-left-radius:6px;left:130px;-webkit-transform-origin:lefttop;}.feet.left_foot:after,.feet.right_foot:after{content:'';width:60px;height:35px;border-radius:20px10px21px15px;background:#000;位置：绝对；左：-36px；上：14.4px；-webkit-transform:rotate(5deg);}.feet.left_foot:after{border-radius:10px20px15px21px;left:13px;-webkit-transform:rotate(-5deg);}效果图如下：一开始不想画头发，感觉怪怪的。***我试了下，还是不错的，那就补上吧。原理和裤子左右两侧的实现原理是一样的，只是参数值不同而已。请参考代码琢磨：.hair{position:relative;}.left_hair_one{width:130px;height:100px;border-radius:50%;border-top:8pxsolid#000;position:absolute;left:17px;top:-17px;-webkit-transform:rotate(27deg);}.left_hair_two{width:80px;height:80px;border-radius:50%;border-top:6pxsolid#000;position:absolute;left:45px;top:-10px;-webkit-transform:rotate(15deg);}Shadow:.groundShadow{width:200px;height:2px;border-radius:50%;background:rgba(0,0,0,0.3);框-shadow:002px4pxrgba(0,0,0,0.3);position:relative;top:455px;left:25px;}***是初始效果实现：这时候你可能会问：然后呢？不是还在动吗？是的，这里我简单说一下实现的思路：1.头发：我要实现的是被小风轻轻吹动2.眼睛：我为眼睛想象的场景是那个小黄人悠闲的走着，时不时看看两边的风景。所以眼睛转动的很悠闲，所以分配的时间可以长一点；3.嘴巴：嘴巴真的很难动，因为要动，面具必须实时更换，不能暴露，所以终于实现了最有意思的是，当它看向左边，它卖得有点可爱；4.手脚：这部分真的很难写实。双脚不在正常行走状态，只能模仿卓别林爷爷的走路方式，左右脚动作立即执行，而不是同步执行。对于手，我是一个简单的模仿者，走路时有挥手的天生惯性，左脚配右手，右脚配左手。考虑到它的手是背在身后的，我把摆动幅度设置的很小，有效果但不明显。OK，我就直接把动画代码放上来吧：.left_hair_one{-webkit-animation:lefthair2sease-in-outinfinite;}@-webkit-keyframeslefthair{0%,25%,31%,100%{}30%{-webkit-transform:rotate(31deg)translate3d(-3px,-1px,0);}}.eyes.leftEye.left_blackEye,.eyes.rightEye.right_blackEye{-webkit-animation:blackeye5sease-ininfinite;}@-webkit-keyframesblackeye{0%,20%,50%,70%,100%{-webkit-transform:translateX(0px);}30%,40%{-webkit-transform:translateX(15px);}80%,90%{-webkit-transform:translateX(-15px);}}.eyes.leftEye.left_blackEye.left_white,.eyes.rightEye.right_blackEye.right_white{-webkit-animation:whiteeye5sease-in-outinfinite;}@-webkit-keyframeswhiteeye{0%,20%,50%,70%,100%{-webkit-transform:translateX(0px);}30%,40%{-webkit-transform:translate3d(3px,4px,0);}80%,90%{-webkit-transform:translate3d(-15px,4px,0);}}.mouse.mouse_shape{-webkit-animation:mouse5sease-in-outinfinite;}@-webkit-keyframesmouse{40%,43%{宽度:45px;height:25px;top:180px;}0%,35%,48%,100%{width:55px;height:35px;top:175px;-webkit-transform:rotate(-35deg);}}.mouse.mouse_shape:after{-webkit-animation:mouse_mask5sease-in-outinfinite;}@-webkit-keyframesmouse_mask{40%,43%{width:60.5px;top:-19.3px;left:1.5px;}0%,35%,48%,100%{width:70px;top:-16px;left:3px;-webkit-transform:rotate(33deg);}}.hands.rightHand{-webkit-animation:rightHand.8sease-in-outinfinite;}@-webkit-keyframesrightHand{0%,50%,100%{-webkit-transform:rotate(40deg);}30%{-webkit-transform:旋转(37deg)translateX(1px);}}.hands.leftHand{-webkit-animation:leftHand.8sease-in-outinfinite;}@-webkit-keyframesleftHand{0%,50%,100%{-webkit-transform:旋转(-40deg);}80%{-webkit-transform:rotate(-37deg)translateX(-1px);}}.feet.right_foot{-webkit-animation:rightfoot.8sease-in-outinfinite;}@-webkit-keyframesrightfoot{0%,50%,100%{-webkit-transform:rotate(0deg);}80%{-webkit-transform:rotate(10deg);}}.feet.left_foot{-webkit-animation:leftfoot。8sease-in-outinfinite;}@-webkit-keyframesleftfoot{0%,50%,100%{-webkit-transform:rotate(0deg);}30%{-webkit-transform:rotate(-10deg);}}文字比较大，看多了代码会变乱。如果懒得整理，可以直接到我的github上下载。这个简单好玩的案例吧：https://github.com/JR93/littleHuang

上一篇：一小段200行的Python代码制作了一个换脸程序

下一篇：生物识别技术的五大缺陷和两大应用场景

纯CSS3绘制小黄人并实现动画效果相关文章

最新推荐

猜你喜欢