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)
}
}手写小黄人代码,看到有大神写,手痒写了个~