Html
    Css
    Js

    
                        
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 .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;
}
/*吊带*/
.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;
}
/*裤子修饰*/
.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;
}
/*眼睛*/
.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);
}
/*嘴巴*/
.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);
}
.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;
}
/*手*/
.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;
}
/*小黄人各个部位动态*/
.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);
}
}

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

CSS小黄人

一款纯CSS实现的小黄人动态图

1
      - ˇ转 し0
      2017/5/11 16:59:20