百分百源码网-让建站变得如此简单！ 登录 注册 签到领金币！

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>CSS教程> css3怎样画出小黄人并实现动画结果？（代码示例）
分享文章到：

css3怎样画出小黄人并实现动画结果？（代码示例）

发布时间：09/01 来源：未知 浏览： 关键词：
css3怎样画出小黄人？下面本篇文章给大家介绍一下运用CSS画出小黄人并实现动画结果的办法。有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对大家有所帮忙。 css3怎样画出小黄人？下面本篇文章给大家介绍一下运用CSS画出小黄人并实现动画结果的办法。有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对大家有所帮忙。

第一来看看结果图（小黄人动画）

怎么样？虽然手足动画还是不怎么神似，但人类聪慧地大脑还是能看得出啥意思的吧！今天就让我们一起学习怎样生出一个小黄人来。

第一，还是直接把HTML构造放出来给大家端详端详：

好的，每一处我都标明了它的用法，大家可以略微了解一下，在脑筋里有一个大约的模型或者条理构造。

接下来就是猛料了。。。我将分步解说，一步一步实现：

第一对容器和整体做一些简略的样式设定：

body{
    margin: 0;
    padding:0;
}
.wrapper{
    width: 300px;
    margin: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;
}
.bodyH .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: 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:rotate(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;
    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;
    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;
    bottom: 0px;
}

先看结果图：

OK，两个注意点说一下：

1.我把裤子放在身体里面，然后给.bodyH增加overflow:hidden，这样我们就不消去多虑溢出怎么办，并且很轻松就能实现裤子的结果；

2.可以看到裤子两边有两条有弧度的曲线段，我是通过给矩形某一个角实现圆角结果，然后只设定与这个角相邻的两条边的边框样式，然后扭转一下角度就实现这个结果了，固然只能实现简略一点的结果。

好的，我们继续，接下来先实现下列眼睛局部吧：

.eyes{
    position: relative;
    z-index: 3;
}
.eyes .leftEye,.eyes .rightEye{
    width: 85px;
    height: 85px;
    border-radius: 50%;
    border:6px solid #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);
}

眼睛局部还是挺好实现的，先画眼镜，然后黑眼珠，再画白点，最后我才画的眼镜框，眼睛框我是用：after伪元素实现的。结果图如下：

嘴巴是最困惑我的，但还是最后还是能实现：

.mouse{
    position: relative;
}
.mouse .mouse_shape{
    width: 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);
}

第一也是通过矩形其中一个角实现圆角来模拟嘴巴外形，再加以扭转：

效果是这样的，那么想要达到我们预测的结果，就需要把上半局部给遮掉，所以我用：after伪元从来实现遮罩结果：

.mouse .mouse_shape:after{
    content: '';
    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);
}

这个地方就需要渐渐调到合适的位置，模拟图如下：

红色局部就是遮罩了，也是一个矩形，设定了底边框，实现和嘴巴下半局部构成闭合结果，此刻我们就可以把色彩改成肤色就行了：

.mouse .mouse_shape:after{
    content: '';
    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_mask 5s ease-in-out infinite;
}

结果图如下：

接下来实现双手局部，这一局部不难，就是两个圆角矩形，扭转了角度，然后层级低于身体的层级就行，然后再通过：after伪元素实现胳膊关节处就搞定了。

.hands{
    position: relative;
}
.hands .leftHand,
.hands .rightHand{
    width: 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);
}
.hands .leftHand{
    left:182px;
    top:220px;
    -webkit-transform:rotate(-40deg);
}
.hands .leftHand:after,
.hands .rightHand:after{
    content: '';
    width: 6px;
    border:3px solid #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;
    position: absolute;
    top: 406px;
    left:88px;
    -webkit-transform-origin: right top;
}
.feet .left_foot{
    border-bottom-right-radius: 9px;
    border-bottom-left-radius: 6px;
    left:130px;
    -webkit-transform-origin: left top;
}
.feet .left_foot:after,
.feet .right_foot:after{
    content: '';
    width: 60px;
    height: 35px;
    border-radius: 20px 10px 21px 15px;
    background: #000;
    position: absolute;
    left:-36px;
    top:14.4px;
    -webkit-transform:rotate(5deg);
}
.feet .left_foot:after{
    border-radius: 10px 20px 15px 21px;
    left:13px;
    -webkit-transform:rotate(-5deg);
}

结果图如下：

原来是不想画头发的，感觉怪难的，最后尝试了一下，还是能出个模样，那就增加上去吧。道理跟裤子摆布两边的实现道理是同样的，只是参数值不同而已，大家参照 代码揣摩一下：

.hair{
    position: relative;
}
.left_hair_one{
    width: 130px;
    height: 100px;
    border-radius: 50%;
    border-top:8px solid #000;
    position: absolute;
    left:17px;
    top:-17px;
    -webkit-transform:rotate(27deg);
}
.left_hair_two{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border-top:6px solid #000;
    position: absolute;
    left:45px;
    top:-10px;
    -webkit-transform:rotate(15deg);
}

增补足底暗影局部：

.groundShadow{
    width: 200px;
    height: 2px;
    border-radius: 50%;
    background: rgba(0,0,0,0.3);
    box-shadow: 0 0 2px 4px rgba(0,0,0,0.3);
    position: relative;
    top: 455px;
    left:25px;
}

最后就是最初的结果了：

这时大家可能会问：然后呢？不是还会动的吗？

是的，这里我就大约讲一下实现的思绪吧：

1.头发：头发我想实现的是被小风轻轻地吹起来，然后很快就塌下去，所以吹起和下塌分配的工夫很关键；

2.眼睛：眼睛我设想的场景是小黄人在悠闲地走路，然后时时摆布看一下两边的光景，所以眼睛转动很悠哉，所以分配的工夫可以略微长一点点；

3.嘴巴：让嘴巴动起来的确比拼难，由于要动的话，遮罩也得实时跟着转变，并且不克不及露馅，所以最后实现的是当它往左边看了一下之后卖了一下萌；

4.双手和双足：这局部的确很难传神，原来足就不是正常的走路状态，所以只能按卓别林老爷爷的走路方式模拟一下，并且摆布足行动是紧接实现而不是同步实现。双手的话，我是简略模拟人在走路时有摆手的天然惯性，并且是左足配右手，右足配左手。考虑到它的双手是放在背后的，所以我的摆动幅度设定为非常小，有结果但不显明。

OK，我就直接把动画代码放上来吧：

.left_hair_one{
    -webkit-animation: lefthair 2s ease-in-out infinite;
}
@-webkit-keyframes lefthair{
    0%,25%,31%,100%{
    }
    30%{
        -webkit-transform: rotate(31deg) translate3d(-3px,-1px,0);
    }
}
.eyes .leftEye .left_blackEye,
.eyes .rightEye .right_blackEye{
    -webkit-animation: blackeye 5s ease-in infinite;
}
@-webkit-keyframes blackeye{
    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: whiteeye 5s ease-in-out infinite;
}
@-webkit-keyframes whiteeye{
    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: mouse 5s ease-in-out infinite;
}
@-webkit-keyframes mouse{
    40%,43%{
        width: 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_mask 5s ease-in-out infinite;
}
@-webkit-keyframes mouse_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 .8s ease-in-out infinite;
}
@-webkit-keyframes rightHand{
    0%,50%,100%{
        -webkit-transform: rotate(40deg);
    }
    30%{
        -webkit-transform: rotate(37deg) translateX(1px);
    }
}
.hands .leftHand{
    -webkit-animation:leftHand .8s ease-in-out infinite;
}
@-webkit-keyframes leftHand{
    0%,50%,100%{
        -webkit-transform: rotate(-40deg);
    }
    80%{
        -webkit-transform: rotate(-37deg) translateX(-1px);
    }
}
.feet .right_foot{
    -webkit-animation: rightfoot .8s ease-in-out infinite;
}
@-webkit-keyframes rightfoot{
    0%,50%,100%{
        -webkit-transform: rotate(0deg);
    }
    80%{
        -webkit-transform: rotate(10deg);
    }
}
.feet .left_foot{
    -webkit-animation: leftfoot .8s ease-in-out infinite;
}
@-webkit-keyframes leftfoot{
    0%,50%,100%{
        -webkit-transform: rotate(0deg);
    }

    30%{
        -webkit-transform: rotate(-10deg);
    }
}

更多炫酷CSS3、html5、javascript特效代码，尽在：js特效大全

更多相干教程请拜访：CSS3最新版参照 手册

以上就是css3怎样画出小黄人并实现动画结果？（代码示例）的细致内容，更多请关注 百分百源码网 其它相干文章！

打赏

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

百分百源码网 建议打赏1～10元，土豪随意，感谢您的阅读！

相关文章

共有150人阅读，期待你的评论！发表评论
昵称： 网址： 验证码： 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧！

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板

关于我们-免责声明-业务报价-广告服务-意见反馈-常见问题-网站地图

百分百源码网声明：本站所有模板文章除标明原创外，均来自网络转载，版权归作者所有，如果有侵犯权益，请联系本站删除！

Copyright © 2021 完整无错带数据网站源码模板下载平台! WWW.BAIDOW.COM.