css绘制一个小黄人效果代码-html代码-BFW代码库

css绘制一个小黄人效果代码

代码语言：html

代码描述：css绘制一个小黄人效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
:before, :after {
  content: "";
  position: absolute;
}

.container {
  max-width: 550px;
  padding: 0;
  margin: 0 auto;
  min-height: 450px;
  display: inline;
  -webkit-perspective: 800px;
          perspective: 800px;
  -webkit-perspective-origin: 50% 50%;
          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) {
  -webkit-transform: rotate(-70deg);
          transform: rotate(-70deg);
  margin-top: 36px;
}
.minion .hair.back li:nth-of-type(2) {
  -webkit-transform: rotate(-50deg);
          transform: rotate(-50deg);
  margin-top: 19px;
}
.minion .hair.back li:nth-of-type(3) {
  -webkit-transform: rotate(-30deg);
          transform: rotate(-30deg);
  margin-top: 12px;
}
.minion .hair.back li:nth-of-type(4) {
  -webkit-transform: rotate(-10deg);
          transform: rotate(-10deg);
  margin-top: 3px;
}
.minion .hair.back li:nth-of-type(5) {
  -webkit-transform: rotate(2deg);
          transform: rotate(2deg);
  border-left: 1px solid #333333;
  border-radius: 80% 0 0 0;
}
.minion .hair.back li:nth-of-type(6) {
  -webkit-transform: rotate(10deg);
          transform: rotate(10deg);
  margin-top: 3px;
}
.minion .hair.back li:nth-of-type(7) {
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
  margin-top: 12px;
}
.minion .hair.back li:nth-of-type(8) {
  -webkit-transform: rotate(50deg);
          transform: rotate(50deg);
  margin-top: 19px;
}
.minion .hair.back li:nth-of-type(9) {
  -webkit-transform: rotate(70deg);
          transform: rotate(70deg);
  margin-top: 36px;
}
.minion .hair.front {
  margin-top: 3px;
  z-index: 4;
}
.minion .hair.front li:nth-of-type(1) {
  -webkit-transform: rotate(-60deg);
          transform: rotate(-60deg);
  margin-top: 21px;
}
.minion .hair.front li:nth-of-type(2) {
  -webkit-transform: rotate(-46deg);
          transform: rotate(-46deg);
  margin-top: 12px;
}
.minion .hair.front li:nth-of-type(3) {
  -webkit-transform: rotate(-28deg);
          transform: rotate(-28deg);
  margin-top: 7px;
}
.minion .hair.front li:nth-of-type(4) {
  -webkit-transform: rotate(-12deg);
          transform: rotate(-12deg);
  margin-top: 5px;
}
.minion .hair.front li:nth-of-type(5) {
  -webkit-transform: rotate(-2deg);
          transform: rotate(-2deg);
  border-right: 1px solid #333333;
  border-radius: 0 80% 0 0;
  margin-top: 3px;
}
.minion .hair.front li:nth-of-type(6) {
  -webkit-transform: rotate(12deg);
          transform: rotate(12deg);
  margin-top: 6px;
}
.minion .hair.front li:nth-of-type(7) {
  -webkit-transform: rotate(28deg);
          transform: rotate(28deg);
  margin-top: 7px;
}
.minion .hair.front li:nth-of-type(8) {
  -webkit-transform: rotate(46deg);
          transform: rotate(46deg);
  margin-top: 12px;
}
.minion .hair.front li:nth-of-type(9) {
  -webkit-transform: rotate(60deg);
          transform: rotate(60deg);
  margin-top: 21px;
}
.minion .hair li {
  list-style: none;
  height: 30px;
  width: 10px;
  float: left;
}
.m.........完整代码请登录后点击上方下载按钮下载查看