Html
    Css
    Js

    
                        
body,* {
	margin:0;
	padding:0;
}
.wrapper {
	width:300px;
	margin:100px auto;
}
.littleH {
	position:relative;
}
.bodyH {
	position:absolute;
	background:#FAFD51;
	height:300px;
	width:180px;
	border-radius:114px;
	border:4px solid #000;
	overflow:hidden;
	z-index:2;
}
.trousers {
	position:absolute;
	bottom:0;
	width:100%;
	height:60px;
	border-top:3px solid #000;
	background:#1B779D;
}
.trousers_top {
	position:absolute;
	bottom:60px;
	width:75%;
	margin:auto;
	left:0;
	right:0;
	height:60px;
	border:4px solid #000;
	border-bottom:none;
	background:#1B779D;
}
.belt {
	position:absolute;
}
.belt .left,.belt .right {
	position:absolute;
	width:70px;
	height:13px;
	background:#1B779D;
	border:4px #000 solid;
	border-radius:6px;
	z-index:2;
}
.belt .left {
	top:-80px;
	left:-35px;
	-webkit-transform:rotate(38deg);
	transform:rotate(38deg);
}
.belt .right {
	left:140px;
	top:-80px;
	-webkit-transform:rotate(-38deg);
	transform:rotate(-38deg);
}
.belt .left::after {
	content:"";
	width:8px;
	height:8px;
	position:absolute;
	background:#000;
	top:3px;
	border-radius:100%;
	left:58px;
}
.belt .right::after {
	content:"";
	width:8px;
	height:8px;
	position:absolute;
	background:#000;
	top:3px;
	border-radius:100%;
	left:5px;
}
.pocket {
	position:absolute;
	border:4px solid #000;
	width:30%;
	margin:auto;
	top:-40px;
	left:0;
	right:0;
	height:42px;
	border-radius:0 0 30px 30px;
}
.line_left {
	position:absolute;
	left:-10px;
	bottom:25px;
	height:35px;
	width:35px;
	border-right:4px #000 solid;
	border-radius:0 0 105px 10px;
	-webkit-transform:rotate(10deg);
	transform:rotate(10deg);
}
.line_middle {
	width:0px;
	height:30px;
	border-right:4px #000 solid;
	position:absolute;
	margin:auto;
	left:0;
	right:0;
	bottom:0;
}
.line_right {
	position:absolute;
	left:150px;
	bottom:25px;
	height:35px;
	width:35px;
	border-left:4px #000 solid;
	border-radius:0 0 0 100px;
	-webkit-transform:rotate(10deg);
	transform:rotate(-5deg);
}
.eyes {
	position:relative;
	z-index:3;
}
.hair {
	position:relative;
}
.hair span {
	position:absolute;
	top:-8px;
	left:15px;
	width:70px;
	height:35px;
	border-radius:35px 35px 0 0;
	border-top:5px #000 solid;
	transform:rotate(7deg);
	animation:hair 6s infinite linear;
	-webkit-animation:hair 6s infinite linear;
}
.hair span:nth-child(2) {
	position:absolute;
	top:-12px;
	left:22px;
	width:80px;
	height:35px;
	border-radius:35px 35px 0 0;
	border-top:5px #000 solid;
	transform:rotate(35deg);
}
.hair span:nth-child(3) {
	position:absolute;
	top:-15px;
	left:90px;
	width:80px;
	height:35px;
	transform:rotate(-35deg);
}
.hair span:nth-child(4) {
	position:absolute;
	top:-12px;
	left:108px;
	width:70px;
	height:35px;
	transform:rotate(0deg);
}
.eye_left,.eye_right {
	position:absolute;
	top:50px;
	left:25px;
	width:55px;
	height:55px;
	border-radius:100%;
	border:8px #000 solid;
	background:#fff;
}
.eye_left:before {
	content:"";
	width:32px;
	height:15px;
	background:#000;
	position:absolute;
	border-radius:5px;
	left:-32px;
	top:20px;
	-webkit-transform:rotate(5deg);
	transform:rotate(5deg)
}
.eye_right:before {
	content:"";
	width:33px;
	height:15px;
	background:#000;
	position:absolute;
	border-radius:5px;
	left:52px;
	top:20px;
	transform:rotate(-5deg);
	-webkit-transform:rotate(-5deg);
}
.eye_right {
	left:92px;
	width:50px;
	height:53px;
}
.eye_left .left_black {
	position:absolute;
	top:15px;
	left:15px;
	width:25px;
	height:25px;
	background:#000;
	border-radius:100%;
	animation:blackeye 6s infinite linear;
	-webkit-animation:blackeye 6s infinite linear;
}
.eye_right .right_black {
	position:absolute;
	top:15px;
	left:15px;
	width:25px;
	height:25px;
	background:#000;
	border-radius:100%;
	animation:blackeye 6s infinite linear;
	-webkit-animation:blackeye 6s infinite linear;
}
.eye_left .left_black .left_white {
	position:absolute;
	left:12px;
	top:5px;
	width:12px;
	height:12px;
	background:#fff;
	border-radius:100%;
	animation:whiteeye 5s infinite linear;
	-webkit-animation:whiteeye 6s infinite linear;
}
.eye_right .right_black .right_white {
	position:absolute;
	left:12px;
	top:4px;
	width:12px;
	height:12px;
	background:#fff;
	border-radius:100%;
	animation:whiteeye 5s infinite linear;
	-webkit-animation:whiteeye 6s infinite linear;
}
.mouse {
	position:relative;
}
.mouse2 {
	position:absolute;
	width:40px;
	height:20px;
	border:3px #000 solid;
	background:#fff;
	border-radius:0px 0 10px 35px;
	top:140px;
	left:76px;
	transform:rotate(-35deg);
	z-index:3;
}
.mouse::before {
	position:absolute;
	top:130px;
	left:72px;
	content:"";
	width:51px;
	height:20px;
	background:#FAFD51;
	border-bottom:3px #000 solid;
	z-index:4;
	transform:rotate(-5deg);
}
.arm {
	position:relative;
	z-index:1;
}
.arm .arm_left {
	position:absolute;
	top:175px;
	left:-15px;
	width:60px;
	height:65px;
	border-radius:35px;
	border:3px #000 solid;
	background:#FAFD51;
	animation:armleft 1s infinite linear;
	-webkit-animation:armright 1s infinite linear;
}
.arm .arm_left::after {
	content:"";
	width:3px;
	background:#000;
	height:10px;
	border-radius:0 115px 115px 0;
	position:absolute;
	top:30px;
	left:9px;
	transform:rotate(15deg);
}
.arm .arm_right {
	position:absolute;
	top:175px;
	left:135px;
	width:60px;
	height:65px;
	border-radius:35px;
	border:3px #000 solid;
	background:#FAFD51;
	animation:armright 1s infinite linear;
	-webkit-animation:armright 1s infinite linear;
}
.arm .arm_right::after {
	content:"";
	width:3px;
	background:#000;
	height:10px;
	border-radius:0 115px 115px 0;
	position:absolute;
	top:30px;
	left:50px;
	transform:rotate(-15deg);
}
.foot {
	position:relative;
}
.foot_left {
	-webkit-animation:footleft 1s infinite;
	animation:footleft 1s infinite;
	position:absolute;
	width:40px;
	height:55px;
	background:#000;
	top:290px;
	left:52px;
	border-radius:0 0 10px 0;
}
.foot_left::before {
	content:"";
	width:40px;
	height:25px;
	background:#000;
	position:absolute;
	top:30px;
	left:-25px;
	border-radius:15px 10px 0px 10px;
}
.foot_right::before {
	content:"";
	width:40px;
	height:25px;
	background:#000;
	position:absolute;
	top:30px;
	left:25px;
	border-radius:10px 15px 10px 0px;
}
.foot_right {
	animation:footright 1s infinite;
	-webkit-animation:footright 1s infinite;
	position:absolute;
	width:40px;
	height:55px;
	background:#000;
	top:290px;
	left:96px;
	border-radius:0 0 0 10px;
}
.shadow {
	position:absolute;
	top:345px;
	left:-30px;
	width:260px;
	height:5px;
	background:#999;
	border-radius:50%;
}
/*动画*/
/*footani*/
@keyframes footleft {
	0%,50%,100% {
	transform:rotate(0deg);
}
80% {
	transform:rotate(10deg);
}
}@-webkit-keyframes footleft {
	0%,50%,100% {
	-webkit-transform:rotate(0deg);
}
80% {
	-webkit-transform:rotate(10deg);
}
}@keyframes footright {
	0%,50%,100% {
	transform:rotate(0deg);
}
30% {
	transform:rotate(-10deg);
}
}@-webkit-keyframes footright {
	0%,50%,100% {
	-webkit-transform:rotate(0deg);
}
30% {
	-webkit-transform:rotate(-10deg);
}
}/*armani*/
@keyframes armleft {
	0%,80%,100% {
	transform:rotate(0deg);
}
30%,50% {
	transform:rotate(3deg);
	transform:translateY(2px);
}
}@-webkit-keyframes armleft {
	0%,50%,100% {
	-webkit-transform:rotate(0deg);
}
30% {
	-webkit-transform:rotate(3deg);
	-webkit-transform:translateY(2px);
}
}@keyframes armright {
	0%,30%,100% {
	transform:rotate(0deg);
}
50%,80% {
	transform:rotate(-2deg);
	transform:translateY(1px);
}
}@-webkit-keyframes armright {
	0%,50%,100% {
	-webkit-transform:rotate(0deg);
}
80% {
	-webkit-transform:rotate(-2deg);
	-webkit-transform:translateY(1px);
}
}/*mouse*/

/*eyes*/
@keyframes blackeye {
	0%,10%,50%,60%,100% {
	transform:translateX(0)
}
20%,30% {
	transform:translateX(5px)
}
70% {
	transform:translateX(-5px)
}
80% {
	transform:translateX(-5px)
}
}@-webkit-keyframes blackeye {
	0%,10%,50%,60%,100% {
	-webkit-transform:translateX(0)
}
20%,30% {
	-webkit-transform:translateX(5px)
}
70% {
	-webkit-transform:translateX(-5px)
}
80% {
	-webkit-transform:translateX(-5px)
}
}@keyframes whiteeye {
	0%,10%,50%,60%,100% {
	transform:translate3d(0);
}
20%,30% {
	transform:translate3d(3px 2px 0);
}
70%,80% {
	transform:translate3d(-10px 4px 0);
}
}@-webkit-keyframes whiteeye {
	0%,10%,50%,60%,100% {
	-webkit-transform:translate3d(0 0 0);
}
20%,30% {
	-webkit-transform:translate3d(3px 2px 0);
}
70%,80% {
	-webkit-transform:translate3d(-10px 4px 0);
}
/*hair*/}@keyframes hair {
	0%,10%,50%,60%,100% {
	transform:translateY(1px);
	transform:rotate(2deg)
}
20%,30% {
	transform:translateY(0);
	transform:rotate(0deg)
}
70%,80% {
	transform:translateY(-1px);
	transform:rotate(-2deg)
}
}@-webkit-keyframes hair {
	0%,10%,50%,60%,100% {
	-webkit-transform:translateY(1px);
	-webkit-transform:rotate(2deg)
}
20%,30% {
	-webkit-transform:translateY(0);
	-webkit-transform:rotate(0deg)
}
70%,80% {
	-webkit-transform:translateY(-1px);
	-webkit-transform:rotate(-2deg)
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.4
 立即下载

css小黄人

手写小黄人代码,看到有大神写,手痒写了个~

5
      犯困?少年丶0
      2017/10/25 15:11:53
      这个厉害了,大神 回复
      总督sir0
      2017/9/1 14:58:39
      。。。。。0
      2017/8/7 14:42:59

      厉害了  我的哥  

      回复
      阿薄,0
      2017/7/21 15:53:38
      90后大叔0
      2017/7/20 15:07:20

      厉害了,我的大佬

      回复