码迷，mamicode.com
首页 > 其他好文 > 详细

小黄人

时间：2016-08-07 12:27:11      阅读：149      评论：0      收藏：0      [点我收藏+]

标签：

宝宝今天不开心，用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;
		}
	}
}

　　

小黄人

标签：

原文地址：http://www.cnblogs.com/zxh930508/p/5745701.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！