css布局实现一个可爱小黄人效果代码-html代码-BFW代码库

代码语言：html
代码描述：css布局实现一个小黄人效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
 
    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
	margin:100px;
}
:before,:after {
	content:"";
	position:absolute
}
.container {
	max-width:550px;
	padding:0;
	margin:0 auto;
	min-height:450px;
	display:inline;
	perspective:800px;
	perspective-origin:50% 50%
}
.minion {
	position:absolute;
	top:calc(48% -(250px / 2));
	left:calc(50% -(140px / 2));
	height:250px;
	width:140px
}
.minion * {
	position:absolute
}
.minion .hair {
	top:-15px;
	margin:0;
	padding:0
}
.minion .hair.back li:nth-of-type(1) {
	transform:rotate(-70deg);
	margin-top:36px
}
.minion .hair.back li:nth-of-type(2) {
	transform:rotate(-50deg);
	margin-top:19px
}
.minion .hair.back li:nth-of-type(3) {
	transform:rotate(-30deg);
	margin-top:12px
}
.minion .hair.back li:nth-of-type(4) {
	transform:rotate(-10deg);
	margin-top:3px
}
.minion .hair.back li:nth-of-type(5) {
	transform:rotate(2deg);
	border-left:1px solid #333;
	border-radius:80% 0 0 0
}
.minion .hair.back li:nth-of-type(6) {
	transform:rotate(10deg);
	margin-top:3px
}
.minion .hair.back li:nth-of-type(7) {
	transform:rotate(30deg);
	margin-top:12px
}
.minion .hair.back li:nth-of-type(8) {
	transform:rotate(50deg);
	margin-top:19px
}
.minion .hair.back li:nth-of-type(9) {
	transform:rotate(70deg);
	margin-top:36px
}
.minion .hair.front {
	margin-top:3px;
	z-index:4
}
.minion .hair.front li:nth-of-type(1) {
	transform:rotate(-60deg);
	margin-top:21px
}
.minion .hair.front li:nth-of-type(2) {
	transform:rotate(-46deg);
	margin-top:12px
}
.minion .hair.front li:nth-of-type(3) {
	transform:rotate(-28deg);
	margin-top:7px
}
.minion .hair.front li:nth-of-type(4) {
	transform:rotate(-12deg);
	margin-top:5px
}
.minion .hair.front li:nth-of-type(5) {
	transform:rotate(-2deg);
	border-right:1px solid #333;
	border-radius:0 80% 0 0;
	margin-top:3px
}
.minion .hair.front li:nth-of-type(6) {
	transform:rotate(12deg);
	margin-top:6px
}
.minion .hair.front li:nth-of-type(7) {
	transform:rotate(28deg);
	margin-top:7px
}
.minion .hair.front li:nth-of-type(8) {
	transform:rotate(46deg);
	margin-top:12px
}
.minion .hair.front li:nth-of-type(9) {
	transform:rotate(60deg);
	margin-top:21px
}
.minion .hair li {
	list-style:none;
	height:30px;
	width:10px;
	float:left
}
.minion .hair li:nth-of-type(1) {
	transform:rotate(-70deg);
	position:absolute;
	left:8px;
	height:30px
}
.minion .hair li:nth-of-type(2) {
	transform:rotate(-50deg);
	left:18px
}
.minion .hair li:nth-of-type(3) {
	transform:rotate(-30deg);
	left:30px
}
.minion .hair li:nth-of-type(4) {
	transform:rotate(-10deg);
	left:45px
}
.minion .hair li:nth-of-type(5) {
	left:60px
}
.minion .hair li:nth-of-type(6) {
	transform:rotate(10deg);
	left:76px
}
.minion .hair li:nth-of-type(7) {
	transform:rotate(30deg);
	left:93px
}
.minion .hair li:nth-of-type(8) {
	transform:rotate(50deg);
	left:107px
}
.minion .hair li:nth-of-type(9) {
	transform:rotate(70deg);
	left:119px;
	height:30px
}
.minion .hair li:nth-of-type(n+6) {
	border-left:1px solid #333;
	border-radius:80% 0 0 0
}
.minion .hair li:nth-of-type(-n+4) {
	border-right:1px solid #333;
	border-radius:0 80% 0 0
}
.minion .minion-body {
	position:relative;
	height:250px;
	width:140px;
	border-radius:80px 80px 50px 50px;
	background:#FFCB4F;
	overflow:hidden
}
.minion .minion-body:after,.minion .minion-body:before {
	top:0;
	left:0
}
.minion .minion-body:before {
	width:80%;
	height:100%;
	border-radius:20px;
	background-image:radial-gradient(rgba(250,250,250,0.6) 0,rgba(250,250,250,0) 60%);
	filter:blur(5px);
	z-index:1;
	left:-10px
}
.minion .minion-body:after {
	height:250px;
	width:140px;
	border-radius:80px 80px 50px 50px;
	background-image:linear-gradient(left,rgba(0,0,0,0) 70%,rgba(0,0,0,0.2) 100%);
	filter:blur(5px);
	z-index:1
}
.minion .minion-body .dungarees-front {
	bottom:0;
	height:90px;
	width:140px;
	overflow:hidden;
	border-top:1px solid #4883b8
}
.minion .minion-body .dungarees-front:before {
	left:-30px;
	border-radius:0 0 35% 0;
	box-shadow:40px -40px 30px 40px #6D9CC6
}
.minion .minion-body .dungarees-front:after {
	right:-30px;
	box-shadow:-40px -40px 30px 40px #6D9CC6;
	border-radius:0 0 0 35%
}
.minion .minion-body .dungarees-front:before,.minion .minion-body .dungarees-front:after {
	width:56px;
	height:75%;
	top:0;
	border:1px solid #4883b8
}
.minion .minion-body .dungarees-pocket {
	bottom:35px;
	left:50%;
	margin-left:-17.5px;
	height:35px;
	width:35px;
	border-radius:0 0 15px 15px;
	border-left:1px solid #4883b8;
	border-right:1px solid #4883b8;
	border-bottom:1px solid #4883b8
}
.minion .minion-body .dungarees-pocket:before {
	top:-13px;
	left:-2px;
	height:15px;
	width:37px;
	border-bottom:1px solid #4883b8;
	border-left:1px solid transparent;
	border-right:1px solid transparent;
	border-radius:20px
}
.minion .minion-body .dungarees-pocket .logo {
	top:50%;
	left:50%;
	margin-left:-12.5px;
	margin-top:-10.5px;
	height:25px;
	width:25px;
	background:#333;
	border-radius:50%
}
.minion .minion-body .dungarees-pocket .logo:before {
	top:50%;
	left:50%;
	margin-left:-7.5px;
	margin-top:-7.5px;
	height:15px;
	width:15px;
	background:#6D9CC6;
	transform:rotate(45deg)
}
.minion .minion-body .dungarees-pocket .logo:after {
	top:50%;
	left:50%;
	margin-left:-3.5px;
	margin-top:-3.5px;
	height:7px;
	width:7px;
	background:#333;
	border-radius:50%;
	z-index:5
}
.minion .minion-body .dungarees-pocket .logo span {
	height:2px;
	background:#333;
	border-bottom:1px solid #6D9CC6;
	width:12.5px;
	right:0;
	top:48%;
	margin-top:-1px;
	z-index:6
}
.minion .minion-body .dungarees-bottom {
	bottom:0;
	height:40px;
	width:140px;
	background-color:#6d9cc6;
	background-image:linear-gradient(top,#6d9cc6 45%,#4b6587 100%);
	border-top:1px solid #4883b8
}
.minion .minion-body .dungarees-strap {
	top:127px;
	height:60px;
	width:12px;
	background:#6D9CC6;
	border:1px solid #4883b8
}
.minion .minion-body .dungarees-strap.left {
	left:5px;
	transform:rotate(-65deg)
}
.minion .minion-body .dungarees-strap.right {
	right:5px;
	transform:rotate(65deg)
}
.minion .minion-body .dungarees-strap .button {
	bottom:0;
	left:2px;
	height:8px;
	width:8px;
	border-radius:50%;
	background:#333
}
.minion .goggle-strap {
	top:68px;
	height:3px;
	background:black;
	width:16px;
	z-index:6
}
.minion .goggle-strap.left {
	left:-2px
}
.minion .goggle-strap.left:before,.minion .goggle-strap.left:after {
	border-right:16px solid #444
}
.minion .goggle-strap.right {
	right:-2px
}
.minion .goggle-strap.right:before,.minion .goggle-strap.right:after {
	border-left:16px solid #444
}
.minion .goggle-strap:before,.minion .goggle-strap:after {
	height:6px
}
.minion .goggle-strap:before {
	top:-7px;
	border-top:2px solid transparent
}
.minion .goggle-strap:after {
	top:3px;
	border-bottom:2px solid transparent
}
.minion .goggle-strap-link {
	top:58px;
	height:25px;
	width:5px;
	background:#999;
	z-index:7
}
.minion .goggle-strap-link.left {
	left:12px
}
.minion .goggle-strap-link.right {
	right:12px
}
.minion .goggle-frame {
	top:40px;
	height:50px;
	width:50px;
	border:5px solid #CCC;
	border-radius:50%;
	overflow:hidden;
	z-index:8
}
.minion .goggle-frame.left {
	left:30%;
	margin-left:-30px
}
.minion .goggle-frame.left .goggle {
	left:-1px
}
.minion .goggle-frame.left .goggle .pupil {
	right:40%
}
.minion .goggle-frame.right {
	right:30%;
	margin-right:-30px
}
.minion .goggle-frame.right .goggle {
	right:-1px
}
.minion .goggle-frame.right .goggle .pupil {
	left:40%
}
.minion .goggle-frame .goggle {
	height:50px;
	width:50px;
	border:3px solid #666;
	border-radius:50%
}
.minion .goggle-frame .goggle .eye {
	background:whitesmoke;
	height:46px;
	width:50px;
	border-radius:50%;
	margin:1px 0;
	box-shadow:inset 0 2px 10px 0 rgba(51,51,51,0.5),inset 0 -1px 5px 0 rgba(51,51,51,0.3)
}
.minion .goggle-frame .goggle .eye .pupil {
	top:50%;
	margin:-7.5px;
	height:15px;
	width:15px;
	background-color:#e7a452;
	background-image:radial-gradient(#e7a452 0,#91695c 49%,#91695c 74%,#000 99%);
	border-radius:50%
}
.minion .goggle-frame .goggle .eye .pupil .dot {
	top:50%;
	left:50%;
	margin-top:-2.5px;
	margin-left:-2.5px;
	height:5px;
	width:5px;
	background:#333;
	border-radius:50%
}
.minion .goggle-shadow {
	height:75px;
	top:45px;
	border-radius:50%;
	background-image:radial-gradient(rgba(0,0,0,0.8) 0,rgba(0,0,0,0) 50%);
	z-index:5
}
.minion .goggle-shadow.left {
	left:5px;
	width:130px
}
.minion .goggle-shadow.right {
	left:55px;
	width:100px
}
.minion .mouth {
	top:110p.........完整代码请登录后点击上方下载按钮下载查看