时间戳

首页 > 技术文章 > 小黄人

小黄人

zxh930508 2016-08-07 10:52 原文

宝宝今天不开心，用CSS画了个小黄人，源码如下

html部分

<!DOCTYPE html>
<html lang="en">
<head>
		<meta charset="UTF-8" />
		<title>小黄人</title>
		<link rel="stylesheet" href="main.css" />
	</head>
	<body>
		<div class="minions" style="">
			<div class="hairs">
				<div class="hair1"></div>
				<div class="hair2"></div>
				<div class="hair3"></div>
			</div>
			<div class="body">
				<div class="cloth"></div>
				<div class="straps left-straps">
					<div class="fastener"></div>
				</div>
				<div class="straps right-straps">
					<div class="fastener"></div>
				</div>
			</div>
			<div class="glasses-type"></div>
			<div class="glasses left-glasses">
				<div class="eye">
					<div class="ball">
						<strong></strong></div>
				</div>
			</div>
			<div class="glasses right-glasses">
				<div class="eye">
					<div class="ball">
						<strong></strong></div>
				</div>
			</div>
			<div class="mouth">
				<div class="tooths">
					<div class="line"></div>
					<div class="tooth1"></div>
					<div class="tooth2"></div>
					<div class="tooth3"></div>
				</div>
			</div>
			<div class="arm left-arm">
				<div class="hand"></div>
			</div>
			<div class="arm right-arm">
				<div class="hand"></div>
			</div>
			<div class="pocket">
				<div>
					<div></div>
				</div>
			</div>
			<div class="trousers"></div>
			<div class="leg left-leg">
				<div class="footer"></div>
			</div>
			<div class="leg right-leg">
				<div class="footer"></div>
			</div>
		</div>
	</body>
</html>

　　CSS部分

@-webkit-keyframes eye {
  /* line 3, main.less */
  0% {
    -webkit-transform: rotate(0, 0);
            transform: rotate(0, 0);
  }
  /* line 6, main.less */
  50% {
    -webkit-transform: translate(70px, 0px);
            transform: translate(70px, 0px);
  }
  /* line 9, main.less */
  100% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }
}
@keyframes eye {
  /* line 3, main.less */
  0% {
    -webkit-transform: rotate(0, 0);
            transform: rotate(0, 0);
  }
  /* line 6, main.less */
  50% {
    -webkit-transform: translate(70px, 0px);
            transform: translate(70px, 0px);
  }
  /* line 9, main.less */
  100% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }
}
@-webkit-keyframes up-down {
  /* line 15, main.less */
  0% {
    -webkit-transform: rotate(0, 0);
            transform: rotate(0, 0);
  }
  /* line 18, main.less */
  50% {
    -webkit-transform: translate(0, 2px);
            transform: translate(0, 2px);
  }
  /* line 21, main.less */
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes up-down {
  /* line 15, main.less */
  0% {
    -webkit-transform: rotate(0, 0);
            transform: rotate(0, 0);
  }
  /* line 18, main.less */
  50% {
    -webkit-transform: translate(0, 2px);
            transform: translate(0, 2px);
  }
  /* line 21, main.less */
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
/* line 26, main.less */
body {
  background: #96004a;
  margin: 0;
  padding: 0;
}
/* line 31, main.less */
div {
  margin: 0;
  padding: 0;
}
/* line 35, main.less */
.minions {
  width: 380px;
  height: 700px;
  margin: 0px auto;
  position: relative;
  -webkit-transform: scale(0.6, 0.6);
      -ms-transform: scale(0.6, 0.6);
          transform: scale(0.6, 0.6);
}
/* line 41, main.less */
.minions .hairs {
  position: absolute;
  top: -40px;
  z-index: 3;
}
/* line 45, main.less */
.minions .hairs .hair {
  background: #000;
  width: 2px;
  height: 70px;
  position: absolute;
}
/* line 51, main.less */
.minions .hairs .hair1 {
  background: #000;
  width: 2px;
  height: 70px;
  position: absolute;
  left: 155px;
  -webkit-transform: rotate(-20deg);
      -ms-transform: rotate(-20deg);
          transform: rotate(-20deg);
}
/* line 56, main.less */
.minions .hairs .hair2 {
  background: #000;
  width: 2px;
  height: 70px;
  position: absolute;
  left: 185px;
}
/* line 60, main.less */
.minions .hairs .hair3 {
  background: #000;
  width: 2px;
  height: 70px;
  position: absolute;
  left: 215px;
  -webkit-transform: rotate(20deg);
      -ms-transform: rotate(20deg);
          transform: rotate(20deg);
}
/* line 66, main.less */
.minions .body {
  overflow: hidden;
  background: #fff500;
  width: 380px;
  position: absolute;
  z-index: 1;
  height: 700px;
  border-radius: 180px;
}
/* line 76, main.less */
.minions .glasses-type {
  height: 52px;
  background: #1f1a17;
  width: 100%;
  position: absolute;
  top: 200px;
  z-index: 1;
}
/* line 84, main.less */
.minions .glasses {
  z-index: 2;
  position: absolute;
  background: #dededd;
  border: 2px solid #1f1a17;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  top: 140px;
}
/* line 93, main.less */
.minions .glasses.left-glasses {
  left: 8%;
}
/* line 95, main.less */
.minions .glasses.left-glasses .ball {
  -webkit-animation: eye 1.5s infinite ease;
          animation: eye 1.5s infinite ease;
}
/* line 100, main.less */
.minions .glasses.right-glasses {
  right: 8%;
}
/* line 102, main.less */
.minions .glasses.right-glasses .ball {
  -webkit-animation: eye 1.5s infinite ease;
          animation: eye 1.5s infinite ease;
}
/* line 107, main.less */
.minions .glasses .eye {
  background: #fff;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 2px solid #1f1a17;
  margin: 15px auto;
  position: relative;
}
/* line 115, main.less */
.minions .glasses .eye .ball {
  background: #8f5444;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #1f1a17;
  position: absolute;
  top: 40%;
  -webkit-transition: all .15s linear;
          transition: all .15s linear;
}
/* line 124, main.less */
.minions .glasses .eye .ball strong {
  display: block;
  width: 20px;
  height: 20px;
  background: #1f1a17;
  border-radius: 50%;
  position: absolute;
  top: 10px;
  left: 10px;
}
/* line 137, main.less */
.minions .mouth {
  width: 40%;
  height: 80px;
  background: #fff;
  position: absolute;
  top: 320px;
  left: 30%;
  z-index: 1;
  border-radius: 120px 120px 40px 40px;
  border: 2px solid #1f1a17;
  overflow: hidden;
  -webkit-animation: up-down 0.5s infinite ease;
          animation: up-down 0.5s infinite ease;
}
/* line 150, main.less */
.minions .mouth .tooths .tooth {
  border-right: 2px solid #1f1a17;
  height: 100%;
  width: 0;
  position: absolute;
}
/* line 156, main.less */
.minions .mouth .tooths .tooth1 {
  border-right: 2px solid #1f1a17;
  height: 100%;
  width: 0;
  position: absolute;
  left: 25%;
}
/* line 160, main.less */
.minions .mouth .tooths .tooth2 {
  border-right: 2px solid #1f1a17;
  height: 100%;
  width: 0;
  position: absolute;
  left: 50%;
}
/* line 164, main.less */
.minions .mouth .tooths .tooth3 {
  border-right: 2px solid #1f1a17;
  height: 100%;
  width: 0;
  position: absolute;
  left: 75%;
}
/* line 168, main.less */
.minions .mouth .tooths .line {
  width: 100%;
  top: 48%;
  border-top: 3px solid #1f1a17;
  position: absolute;
}
/* line 177, main.less */
.minions .arm {
  position: absolute;
  width: 50px;
  height: 400px;
  background: #fff500;
  border-radius: 50px;
  top: 190px;
  z-index: 0;
}
/* line 185, main.less */
.minions .arm.left-arm {
  left: -20px;
  -webkit-transform: rotate(20deg);
      -ms-transform: rotate(20deg);
          transform: rotate(20deg);
}
/* line 189, main.less */
.minions .arm.right-arm {
  right: -20px;
  -webkit-transform: rotate(-20deg);
      -ms-transform: rotate(-20deg);
          transform: rotate(-20deg);
}
/* line 193, main.less */
.minions .arm .hand {
  position: absolute;
  bottom: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #1f1a17;
  left: -5px;
}
/* line 203, main.less */
.minions .cloth {
  background: #667ab3;
  border-radius: 20px;
  bottom: 20px;
  width: 280px;
  height: 250px;
  position: absolute;
  z-index: 1;
  left: 50px;
}
/* line 213, main.less */
.minions .pocket {
  border: 2px solid #1f1a17;
  border-radius: 5px 5px 30px 30px;
  width: 100px;
  left: 140px;
  height: 100px;
  position: absolute;
  z-index: 2;
  bottom: 80px;
}
/* line 222, main.less */
.minions .pocket > div {
  background: #1f1a17;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  top: 20px;
  left: 25px;
  position: absolute;
}
/* line 230, main.less */
.minions .pocket > div > div {
  width: 20px;
  height: 20px;
  border: 5px solid #667ab3;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  position: absolute;
  top: 10px;
  left: 10px;
}
/* line 241, main.less */
.minions .trousers {
  background: #667ab3;
  border-radius: 10px 10px 130px 130px;
  bottom: 0;
  width: 380px;
  height: 160px;
  position: absolute;
  z-index: 1;
}
/* line 250, main.less */
.minions .straps {
  width: 40px;
  height: 150px;
  position: absolute;
  z-index: 1;
  background: #667ab3;
  bottom: 230px;
}
/* line 257, main.less */
.minions .straps.left-straps {
  left: 10px;
  -webkit-transform: rotate(-40deg);
      -ms-transform: rotate(-40deg);
          transform: rotate(-40deg);
}
/* line 261, main.less */
.minions .straps.right-straps {
  right: 10px;
  -webkit-transform: rotate(40deg);
      -ms-transform: rotate(40deg);
          transform: rotate(40deg);
}
/* line 265, main.less */
.minions .straps .fastener {
  background: #1f1a17;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  bottom: 10px;
  position: absolute;
  left: 10px;
}
/* line 276, main.less */
.minions .leg {
  background: #667ab3;
  width: 70px;
  height: 120px;
  position: absolute;
  bottom: -80px;
}
/* line 282, main.less */
.minions .leg.left-leg {
  left: 20%;
}
/* line 284, main.less */
.minions .leg.left-leg .footer {
  right: -2px;
  border-radius: 100px 0 0 20px;
}
/* line 289, main.less */
.minions .leg.right-leg {
  right: 20%;
}
/* line 291, main.less */
.minions .leg.right-leg .footer {
  left: -2px;
  border-radius: 0 100px 20px 0;
}
/* line 296, main.less */
.minions .leg .footer {
  background: #1f1a17;
  width: 100px;
  height: 50px;
  position: absolute;
  bottom: 0;
}

　　还有一些封装好的LESS部分

@keyframes eye {
	0% {  
		transform:rotate(0,0);
	}
	50% {  
		transform:translate(70px,0px)
	}
	100% {  
		transform:translate(0px,0px)
	}
}

@keyframes up-down {
	0% {  
		transform:rotate(0,0);
	}
	50% {  
		transform:translate(0,2px)
	}
	100% {  
		transform:translate(0,0)
	}
}

body{
	background:#96004a;
	margin: 0;
	padding: 0;
}
div{
	margin: 0;
	padding: 0;
}
.minions{
	width: 380px;
	height:700px;
	margin: 0px auto;
	position:relative;
	transform : scale(0.6,0.6);
	.hairs{
		position:absolute;
		top: -40px;
		z-index: 3;
		.hair{
			background:#000;
			width:2px;
			height:70px;
			position:absolute
		}
		.hair1{
			.hair;
			left:155px;
			transform:rotate(-20deg);
		}
		.hair2{
			.hair;
			left:185px;
		}
		.hair3{
			.hair;
			left:215px;
			transform:rotate(20deg);
		}
	}
	.body{
		overflow: hidden;
		background: #fff500;

		width: 380px;
		position:absolute;
		z-index: 1;
		height:700px;
		border-radius: 180px;
	}
	.glasses-type{ //眼镜
		height:52px;
		background:#1f1a17;
		width:100%;
		position: absolute;
		top: 200px;
		z-index: 1;
	}
	.glasses{
		z-index: 2;
		position:absolute;
		background:#dededd;
		border:2px solid #1f1a17;
		width:150px;
		height:150px;
		border-radius: 50%;
		top: 140px;
		&.left-glasses{
			left:8%;
			.ball{
				//left : 45%;
				animation: eye 1.5s infinite ease;
			}
		}
		&.right-glasses{
			right:8%;
			.ball{
				//right:45%;
				animation: eye 1.5s infinite ease;
			}
		}
		.eye{
			background:#fff;
			width:120px;
			height:120px;
			border-radius: 50%;
			border:2px solid #1f1a17;
			margin:15px auto;
			position:relative;
			.ball{
				background:#8f5444;
				width:40px;
				height:40px;
				border-radius: 50%;
				border:2px solid #1f1a17;
				position:absolute;
				top: 40%;
				transition: all .15s linear;
				strong{
					display: block;
					width:20px;
					height:20px;
					background:#1f1a17;
					border-radius: 50%;
					position:absolute;
					top: 10px;
					left:10px;
				}
			}
		}
	}
	.mouth{
		width:40%;
		height:80px;
		background:#fff;
		position:absolute;
		top: 320px;
		left:30%;
		z-index: 1;
		border-radius: 120px 120px 40px 40px;
		border:2px solid #1f1a17;
		overflow:hidden;
		animation: up-down 0.5s infinite ease;
		.tooths{
			.tooth{
				border-right:2px solid #1f1a17;
				height:100%;
				width:0;
				position:absolute;
			}
			.tooth1{
				.tooth;
				left:25%;
			}
			.tooth2{
				.tooth;
				left:50%;
			}
			.tooth3{
				.tooth;
				left:75%;
			}
			.line{
				width:100%;
				top: 48%;
				border-top:3px solid #1f1a17;
				position:absolute;
			}
		}

	}
	.arm{
		position:absolute;
		width:50px;
		height:400px;
		background:#fff500;
		border-radius: 50px;
		top: 190px;
		z-index: 0;
		&.left-arm{
			left:-20px;
			transform:rotate(20deg);
		}
		&.right-arm{
			right:-20px;
			transform:rotate(-20deg);
		}
		.hand{
			position:absolute;
			bottom:0;
			width:60px;
			height:60px;
			border-radius: 50%;
			background:#1f1a17;
			left:-5px;
		}
	}
	.cloth{
		background:#667ab3;
		border-radius: 20px;
		bottom:20px;
		width:280px;
		height:250px;
		position:absolute;
		z-index: 1;
		left:50px;
	}
	.pocket{
		border:2px solid #1f1a17;
		border-radius: 5px 5px 30px 30px;
		width:100px;
		left:140px;
		height:100px;
		position:absolute;
		z-index: 2;
		bottom: 80px;
		>div{
			background:#1f1a17;
			width:50px;
			height:50px;
			border-radius: 50%;
			top: 20px;
			left:25px;
			position:absolute;
			>div{
				width:20px;
				height:20px;
				border:5px solid #667ab3;
				transform:rotate(45deg);
				position:absolute;
				top: 10px;
				left:10px
			}
		}
	}
	.trousers{
		background:#667ab3;
		border-radius: 10px 10px 130px 130px;
		bottom:0;
		width:380px;
		height:160px;
		position:absolute;
		z-index: 1;
	}
	.straps{
		width:40px;
		height:150px;
		position:absolute;
		z-index: 1;
		background:#667ab3;
		bottom:230px;
		&.left-straps{
			left:10px;
			transform:rotate(-40deg);
		}
		&.right-straps{
			right:10px;
			transform:rotate(40deg);
		}
		.fastener{
			background:#1f1a17;
			width:20px;
			height:20px;
			border-radius: 50%;
			bottom:10px;
			position:absolute;
			left:10px;
		}
	}

	.leg{
		background:#667ab3;
		width:70px;
		height:120px;
		position:absolute;
		bottom:-80px;
		&.left-leg{
			left:20%;
			.footer{
				right:-2px;
				border-radius: 100px 0 0 20px;
			}
		}
		&.right-leg{
			right:20%;
			.footer{
				left:-2px;
				border-radius: 0 100px 20px 0;
			}
		}
		.footer{
			background:#1f1a17;
			width:100px;
			height:50px;
			position:absolute;
			bottom:0;
		}
	}
}

　　

推荐阅读