css3实现小黄人
效果就像这样：
在线演示地址：css3实现小黄人
不废话，直接上代码！
hrml代码：
<!DOCTYPE html>
<html>
<head lang="zh">
<meta charset="UTF-8">
<title>纯CSS3画出小黄人并实现动画效果</title>
<Link href="index.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--容器-->
<div class="wrapper">
<!--小黄人-->
<div class="container">
<!--头发-->
<div class="hairs">
<div class="hairs_one"></div>
<div class="hairs_two"></div>
</div>
<!--头发-->
<!--眼睛-->
<div class="eyes">
<div class="eye_left">
<div class="black">
<div class="white"></div>
</div>
</div>
<div class="eye_right">
<div class="black">
<div class="white"></div>
</div>
</div>
</div>
<!--眼睛-->
<!--嘴巴-->
<div class="mouth">
<div class="mouth_box"></div>
</div>
<!--嘴巴-->
<!--手-->
<div class="hands">
<div class="left_hand"></div>
<div class="right_hand"></div>
</div>
<!--手-->
<!--身体-->
<div class="mybody">
<!--裤子-->
<div class="trousers">
<!--裤子突出部分-->
<div class="trousers_top"></div>
<!--裤子口袋-->
<div class="pocket"></div>
<!--三角线-->
<div class="line-left"></div>
<div class="line-right"></div>
<div class="line-bottom"></div>
<!--吊带-->
<div class="condoleBelt">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
<!--裤子-->
</div>
<!--身体-->
<!--脚-->
<div class="foot">
<div class="left_foot"></div>
<div class="right_foot"></div>
</div>
<!--脚-->
<!--阴影-->
<div class="foot_shadow"></div>
<!--阴影-->
</div>
</div>
</body>
</html>
css代码：
body {
margin:;
padding:;
}
.wrapper {
width: 300px;
margin: 100px auto;
}
.container {
position: relative;
}
.container .mybody {
position: absolute;
width: 240px;
height: 400px;
border: 5px solid #000;
border-radius: 115px;
background: #f9d946;
overflow: hidden;
z-index:;
}
.container .mybody .trousers {
position: absolute;
bottom:;
width: 100%;
height: 100px;
border-top: 6px solid #000;
background: #2074a0;
}
.container .mybody .trousers .trousers_top {
width: 160px;
height: 60px;
background: #2074a0;
position: absolute;
bottom: 100px;
left:;
right:;
margin: 0 auto;
border: 6px solid #000;
border-bottom: none;
}
.container .mybody .trousers .pocket {
width: 60px;
height: 45px;
border: 6px solid #000;
border-radius: 0 0 25px 25px;
left:;
right:;
margin: 0 auto;
position: absolute;
bottom: 65px;
}
.container .mybody .trousers .line-left,
.container .mybody .trousers .line-right {
width: 30px;
height: 30px;
border-bottom-right-radius: 100px;
border-right: 6px solid;
border-bottom: 6px solid;
position: absolute;
top: 10px;
}
.container .mybody .trousers .line-right {
right:;
-webkit-transform: rotate(75deg);
-moz-transform: rotate(75deg);
-o-transform: rotate(75deg);
transform: rotate(75deg);
-ms-transform: rotate(75deg);
}
.container .mybody .trousers .line-bottom {
height: 40px;
border: 3px solid #000;
left: 118px;
position: absolute;
bottom:;
border-radius: 3px;
}
.container .mybody .trousers .condoleBelt {
position: absolute;
}
.container .mybody .trousers .condoleBelt .left,
.container .mybody .trousers .condoleBelt .right {
width: 100px;
height: 16px;
border: 5px solid #000;
background: #2074a0;
top: -90px;
position: absolute;
}
.container .mybody .trousers .condoleBelt .left:after,
.container .mybody .trousers .condoleBelt .right:after {
content: '';
background: #000;
width: 8px;
height: 8px;
border-radius: 50%;
position: absolute;
top: 3px;
}
.container .mybody .trousers .condoleBelt .left {
left: -35px;
transform: rotate(45deg);
}
.container .mybody .trousers .condoleBelt .left:after {
right: 3px;
}
.container .mybody .trousers .condoleBelt .right {
transform: rotate(-45deg);
left: 165px;
}
.container .mybody .trousers .condoleBelt .right:after {
left: 3px;
}
.container .hairs {
position: relative;
}
.container .hairs .hairs_one {
width: 130px;
height: 100px;
border-top: 8px solid #000;
position: absolute;
transform: rotate(35deg);
left: 24px;
top: -17px;
border-radius: 50%;
animation: hairs 2s ease-in-out infinite;
}
.container .hairs .hairs_two {
width: 80px;
height: 80px;
border-top: 6px solid #000;
position: absolute;
transform: rotate(15deg);
left: 50px;
top: -10px;
border-radius: 50%;
}
.container .eyes {
position: relative;
z-index:;
}
.container .eyes .eye_left,
.container .eyes .eye_right {
width: 85px;
height: 85px;
border: 6px solid #000;
border-radius: 50%;
background: #fff;
position: absolute;
top: 60px;
}
.container .eyes .eye_left:after,
.container .eyes .eye_right:after {
content: '';
width: 28px;
height: 18px;
background: #000;
position: absolute;
top: 40%;
}
.container .eyes .eye_left {
left: 27px;
}
.container .eyes .eye_left:after {
left: -30px;
transform: rotate(7deg) skewX(20deg);
}
.container .eyes .eye_right {
left: 124px;
}
.container .eyes .eye_right:after {
right: -32px;
transform: rotate(-7deg) skewX(-20deg);
}
.container .eyes .black {
width: 40px;
height: 40px;
background: #000;
border-radius: 50%;
position: absolute;
top: 24px;
left: 22px;
animation: eys_black 5s ease-in-out infinite;
}
.container .eyes .white {
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
position: absolute;
top: 10px;
left: 10px;
animation: eys_white 5s ease-in-out infinite;
}
.container .mouth {
position: relative;
z-index:;
}
.container .mouth .mouth_box {
position: absolute;
width: 55px;
height: 35px;
border: 5px solid #000;
background: #fff;
top: 170px;
left: 90px;
border-bottom-left-radius: 30px;
transform: rotate(-35deg);
animation: mouth_box 5s ease-in-out infinite;
}
.container .mouth .mouth_box:after {
background: #f9d946;
width: 70px;
height: 32px;
content: '';
position: absolute;
border-bottom: 5px solid #000;
transform: rotate(35deg);
top: -14px;
left: 6px;
animation: mouth_after 5s ease-in-out infinite;
}
.container .hands {
position: relative;
z-index:;
}
.container .hands .left_hand,
.container .hands .right_hand {
width: 80px;
height: 80px;
border: 6px solid #000;
transform: rotate(40deg);
position: absolute;
background: #f9d946;
border-radius: 30px;
top: 220px;
animation: left_hand 1s ease-in-out infinite;
}
.container .hands .left_hand {
left: -24px;
}
.container .hands .left_hand:after {
width: 6px;
border: 3px solid #000;
position: absolute;
content: '';
transform: rotate(90deg);
bottom: 26px;
left: 12px;
}
.container .hands .right_hand {
right: 26px;
}
.container .hands .right_hand:after {
width: 6px;
border: 3px solid #000;
position: absolute;
content: '';
top: 20px;
right: 18px;
}
.container .foot {
position: relative;
}
.container .foot .left_foot,
.container .foot .right_foot {
width: 36px;
height: 50px;
background: #000;
position: absolute;
top: 400px;
}
.container .foot .left_foot:after,
.container .foot .right_foot:after {
width: 60px;
height: 35px;
position: absolute;
bottom:;
content: '';
background: #000;
}
.container .foot .left_foot {
left: 86px;
animation: left_foot 1s ease-in-out infinite;
}
.container .foot .left_foot:after {
right:;
top: 20px;
border-radius: 30px 0 10px 20px;
}
.container .foot .right_foot {
left: 128px;
animation: right_foot 1s ease-in-out infinite;
}
.container .foot .right_foot:after {
left:;
top: 20px;
border-radius: 0 30px 20px 10px;
}
.container .foot_shadow {
position: absolute;
top: 456px;
width: 240px;
height: 2px;
background: rgba(0, 0, 0, 0.3);
box-shadow: 0 0 2px 4px rgba(0, 0, 0, 0.3);
border-radius: 50%;
}
@keyframes hairs {
30% {
transform: rotate(32deg) translate3d(-4px, -2px, 0);
}
}
@keyframes eys_black {
0% {
transform: translateX(0px);
}
20%,
40% {
transform: translateX(15px);
}
60%,
100% {
transform: translateX(0px);
}
80%,
90% {
transform: translateX(-15px);
}
}
@keyframes eys_white {
0% {
transform: translateX(0px);
}
20%,
40% {
transform: translate3d(3px, 4px, 0px);
}
60% {
transform: translate(5px, 5px);
}
80% {
transform: translateX(0px);
}
100% {
transform: translateX(0px);
}
}
@keyframes mouth_box {
40%,
43% {
width: 45px;
height: 25px;
top: 175px;
}
0%,
35%,
48%,
100% {
width: 55px;
height: 35px;
top: 170px;
transform: rotate(-35deg);
}
}
@keyframes mouth_after {
40%,
43% {
width: 60.5px;
top: -19.3px;
left: 1.5px;
}
0%,
35%,
48%,
100% {
width: 70px;
top: -16px;
left: 3px;
transform: rotate(33deg);
}
}
@keyframes left_hand {
0%,
50%,
100% {
transform: rotate(40deg);
}
30% {
transform: rotate(37deg) translateX(1px);
}
}
@keyframes right_foot {
0%,
50%,
100% {
transform: rotate(0deg);
}
30% {
transform: rotate(-8deg);
}
}
@keyframes left_foot {
0%,
50%,
100% {
transform: rotate(0deg);
}
80% {
transform: rotate(8deg);
}
}
搞定了，没有做浏览器兼容，建议在chrome下浏览，
不是本人原创，但是代码都是我一个字一个字敲出来的^_^
css3实现小黄人的更多相关文章
- CSS3实现小黄人动画
转载请注明出处,谢谢! 每次看到CSS3动画就心痒痒想试一下,记得一个多月前看了白树哥哥的一篇博客,突然开窍,于是拿他提供的demo试了一下,感觉很棒!下图为demo提供的动画帧设计稿. 自己也想说搞 ...
- 纯CSS3画出小黄人并实现动画效果
前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...
- CSS3小黄人
CSS3实现小黄人 效果图: 代码如下,复制即可使用: <!DOCTYPE HTML> <HTML> <head> <title>CSS3实现小黄人&l ...
- CSS3 小黄人案例
使用 CSS3 和 HTML5 制作一个小黄人. 结构代码: <div class="wrap"> <!-- 头发 --> <div class=&q ...
- [置顶]
几行代码实现ofo首页小黄人眼睛加速感应转动
最新版的ofo 小黄车的首页小黄人眼睛随重力而转动,感觉有点炫酷,学习一下吧,以下代码是在xamarin android下实现 ofo首页效果图: xamarin android实现效果: 实现思路: ...
- Python turtle模块小黄人程序
讲解Python初级课程的turtle模块,简单粗暴的编写了小黄人的程序.程序还需要进一步优化.难点就是要搞清楚turtle在绘制图形过程中的方向变化. import turtle t = turtl ...
- 小黄人IP营销的四种玩法思维导图
小黄人IP营销的四种玩法思维导图 ------------------------------ 本人微信公众帐号: 心禅道(xinchandao) 本人微信公众帐号:双色球预测合买(ssqyuce)
- 静态分析第三发 so文件分析（小黄人快跑)
本文作者:i春秋作家——HAI_ 0×00 工具 1.IDA pro 2.Android Killer 0×01 环境 小黄人快跑 下载地址http://download.csdn.net/downl ...
- 音频算法之小黄人变声 附完整C代码
前面提及到<大话音频变声原理 附简单示例代码>与<声音变调算法PitchShift(模拟汤姆猫) 附完整C++算法实现代码> 都稍微讲过变声的原理和具体实现. 大家都知道,算法 ...
随机推荐
- [转]史上最全最强SpringMVC详细示例实战教程
原文:http://www.cnblogs.com/sunniest/p/4555801.html?utm_source=tuicool&utm_medium=referral SpringM ...
- python基础-PyCharm设置作者信息模板_修改解释器_设置软件UTF-8编码
一.PyCharm 设置作者信息模板 1.File---Settings---在搜索框中搜索:File and Code Templates---Python scripts #!/usr/bin/e ...
- canvas三角函数直线运动
var canvas = document.getElementById("canvas"); var cxt = canvas.getContext("2d" ...
- [转]Mybatis极其(最)简(好)单(用)的一个分页插件
原文地址:http://blog.csdn.net/isea533/article/details/23831273 分页插件示例:http://blog.csdn.net/isea533/artic ...
- tomcat报错
错误日志如下: 十月 10, 2016 10:44:57 上午 org.apache.catalina.core.StandardWrapperValve invoke严重: Servlet.serv ...
- C#-WinForm-对话框控件
对话框控件 设置点击按钮弹出对话框控件 1.colorDialog - 颜色对话框 接收确定返回的信息 ============================================ ...
- dede使用方法---如何添加视频
根据客户的需求,需要上传客户自己的视频,但是发现一个视频就有一百多M,想到数据库总共可容纳的才一百多M,于是想到利用其他专业的视频网站,再嵌入到自己的网站里面. 我在这里选的是爱奇艺,下面总结一下主要 ...
- MVC3中使用RadioButtonFor()
创建页面 进行初始化 默认 男 被选中 <div class="label"> <div class="editor-label"> ...
- iOS9 支持http
在Info.plist中添加NSAppTransportSecurity类型Dictionary. 在NSAppTransportSecurity下添加NSAllowsArbitraryLoads类型 ...
- Anroid Studio入门
转载:http://www.apkbus.com/forum.php?mod=viewthread&tid=255186&extra=page%3D1%26filter%3Dautho ...