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

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

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看