纯css绘制一个人物头像-html代码-BFW代码库

代码语言：html
代码描述：纯css绘制一个人物头像
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap");
html,
body {
  width: 100%;
  height: 100%;
  background: #eaeaea;
  overflow: hidden;
}
html *,
body * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  box-sizing: border-box;
}
html *:before, html *:after,
body *:before,
body *:after {
  content: "";
  position: absolute;
}

.poster {
  height: 92.3vmin;
  width: 70vmin;
  background: #ce2529;
  border: 2vmin solid #040707;
}
.poster .hair {
  z-index: 4;
  width: 25vmin;
  height: 20vmin;
  background: #040707;
  top: -28.7vmin;
}
.poster .hair:before {
  width: 2.5vmin;
  height: 5vmin;
  background: #040707;
  top: -9vmin;
  left: 11.9vmin;
  transform: rotate(14deg);
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
}
.poster .hair:after {
  width: 2.9vmin;
  height: 5vmin;
  background: #040707;
  top: -8.6vmin;
  left: 14.3vmin;
  transform: rotate(2deg);
  border-top-left-radius: 40%;
  border-top-right-radius: 50%;
}
.poster .hair i:nth-of-type(1) {
  width: 2.2vmin;
  height: 5vmin;
  background: #040707;
  top: -30.7vmin;
  left: 10vmin;
  transform: rotate(4deg);
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
}
.poster .hair i:nth-of-type(1):before {
  width: 2.7vmin;
  height: 5vmin;
  background: #040707;
  transform: rotate(15deg);
  top: 0.6vmin;
  left: 1.2vmin;
  border-top-left-radius: 30%;
  border-top-right-radius: 45%;
}
.poster .hair i:nth-of-type(1):after {
  width: 1.5vmin;
  height: 5vmin;
  background: #040707;
  transform: rotate(60deg);
  left: 3.45vmin;
  top: 0.55vmin;
  border-top-left-radius: 50%;
  border-top-right-radius: 20%;
}
.poster .hair i:nth-of-type(2) {
  width: 1.6vmin;
  height: 5vmin;
  background: #040707;
  top: -27vmin;
  left: 19.1vmin;
  transform: rotate(55deg);
  border-top-left-radius: 1vmin;
  border-top-right-radius: 0.2vmin;
}
.poster .hair i:nth-of-type(2):before {
  width: 3.1vmin;
  height: 5vmin;
  background: #040707;
  left: 1.5vmin;
  top: -0.2vmin;
  border-top-left-radius: 1vmin;
  border-top-right-radius: 2vmin;
}
.poster .hair i:nth-of-type(2):after {
  width: 3.7vmin;
  height: 5vmin;
  background: #040707;
  top: -0.4vmin;
  left: 4.5vmin;
  border-top-left-radius: 2vmin;
  border-top-right-radius: 2vmin;
}
.poster .hair i:nth-of-type(3) {
  width: 4.7vmin;
  height: 6vmin;
  background: #040707;
  top: -12vmin;
  left: 25.4vmin;
  transform: rotate(50deg);
  border-top-left-radius: 2.4vmin;
  border-top-right-radius: 3vmin;
}
.poster .hair i:nth-of-type(3):before {
  width: 3.6vmin;
  height: 6vmin;
  background: #040707;
  top: 2.8vmin;
  left: 4.5vmin;
  border-top-left-radius: 1vmin;
  border-top-right-radius: 2vmin;
}
.poster .hair i:nth-of-type(3):after {
  width: 2.7vmin;
  height: 6vmin;
  background: #040707;
  top: 4vmin;
  left: 7.5vmin;
  border-top-left-radius: 1.5vmin;
  border-top-right-radius: 2vmin;
  transform: rotate(10deg);
}
.poster .hair i:nth-of-type(4) {
  width: 3.8vmin;
  height: 2.2vmin;
  background: #040707;
  top: 9.1vmin;
  left: 27.5vmin;
  transform: rotate(56deg);
  border-radius: 2vmin;
}
.poster .hair i:nth-of-type(4):before {
  width: 3.8vmin;
  height: 2.3vmin;
  background: #040707;
  top: 2vmin;
  border-top-right-radius: 1vmin;
  border-bottom-right-radius: 1vmin;
}
.poster .hair i:nth-of-type(4):after {
  width: 3.8vmin;
  height: 3.3vmin;
  background: #040707;
  top: 4.1vmin;
  left: 0.7vmin;
  border-top-right-radius: 1.8vmin;
  border-bottom-right-radius: 1vmin;
  transform: rotate(-5deg);
}
.poster .hair i:nth-of-type(5) {
  width: 1vmin;
  height: 1.8vmin;
  background: #040707;
  top: 19vmin;
  left: 24.5vmin;
  border-bottom-right-radius: 1vmin;
  border-bottom-left-radius: 0.5vmin;
}
.poster .hair i:nth-of-type(5):before {
  width: 1vmin;
  height: 1.5vmin;
  background: #040707;
  left: -0.8vmin;
  top: 0.3vmin;
  transform: rotate(25deg);
}
.poster .hair i:nth-of-type(5):after {
  width: 2.5vmin;
  height: 4vmin;
  background: #040707;
  top: -6.2vmin;
  left: 2vmin;
  transform: rotate(-30deg);
}
.poster .hair i:nth-of-type(6) {
  width: 3vmin;
  height: 13vmin;
  background: #040707;
  top: 2vmin;
  left: 24.1vmin;
}
.poster .hair i:nth-of-type(6):before {
  width: 14vmin;
  height: 6vmin;
  background: #040707;
  top: -9vmin;
  left: -15vmin;
}
.poster .hair i:nth-of-type(6):after {
  width: 7vmin;
  height: 6vmin;
  background: #040707;
  top: -11vmin;
  left: -13vmin;
}
.poster .hair-left {
  transform: scaleX(-1);
}
.poster .ear-inner-left {
  width: 4vmin;
  height: 12vmin;
  background: #ce2529;
  left: -26.6vmin;
  top: -3vmin;
  z-index: 3;
  border-top-right-radius: 80%;
}
.poster .ear-left {
  width: 1.7vmin;
  height: 2.3vmin;
  background: #e5ab7d;
  left: -26.6vmin;
  top: -8.7vmin;
  z-index: 3;
  transform: rotate(-110deg);
  border-radius: 50% / 10%;
}
.poster .ear-left:before {
  width: 3.3vmin;
  height: 2.2vmin;
  background: #e5ab7d;
  border-radius: 50% / 15%;
  left: -3.2vmin;
  top: -0.3vmin;
  transform: rotate(5deg);
}
.poster .ear-left:after {
  width: 2.8vmin;
  height: 1.8vmin;
  background: #e5ab7d;
  left: -5.7vmin;
  top: -0.6vmin;
  transform: rotate(7deg) skewY(10deg);
  border-top-left-radius: 1.4vmin;
}
.poster .ear-left i:nth-of-type(1) {
  width: 4vmin;
  height: 1vmin;
  background: #040707;
  top: 2.4vmin;
  left: -1.6vmin;
  transform: rotate(-5deg);
}
.poster .ear-inner-right {
  width: 4vmin;
  height: 12vmin;
  background: #ce2529;
  left: 26.2vmin;
  top: -3vmin;
  z-index: 3;
  border-top-left-radius: 80%;
}
.poster .ear-right {
  width: 1.7vmin;
  height: 2.3vmin;
  background: #e5ab7d;
  left: 26vmin;
  top: -8.7vmin;
  z-index: 3;
  transform: rotate(105deg);
  border-radius: 50% / 10%;
}
.poster .ear-right:before {
  width: 3.3vmin;
  height: 2.3vmin;
  background: #e5ab7d;
  border-radius: 50% / 15%;
  left: 1.6vmin;
  top: -0.1vmin;
  transform: rotate(-4deg);
}
.poster .ear-right:after {
  width: 2.8vmin;
  height: 2.05vmin;
  background: #e5ab7d;
  left: 4.8vmin;
  top: -0.42vmin;
  transform: rotate(-4deg) skewY(-9deg);
  border-top-right-radius: 1.4vmin;
}
.poster .forehead {
  z-index: 5;
  top: -31.7vmin;
  left: -11.2vmin;
  width: 9vmin;
  height: 7vmin;
  background: #f1c69a;
  border-radius: 50% / 25%;
  transform: rotate(-14deg);
}
.poster .forehead:before {
  width: 6vmin;
  height: 7vmin;
  background: #f1c69a;
  border-top-left-radius: 7vmin;
  border-bottom-left-radius: 6vmin;
  left: -0.9vmin;
}
.poster .forehead:after {
  width: 6vmin;
  height: 7vmin;
  background: #f1c69a;
  border-top-left-radius: 7vmin;
  border-bottom-left-radius: 6vmin;
  left: -1vmin;
  top: 1vmin;
}
.poster .forehead i:nth-of-type(1) {
  z-index: 5;
  width: 4vmin;
  height: 3vmin;
  background: #f1c69a;
  border-radius: 50% / 25%;
  transform: rotate(60deg);
  top: -0.8vmin;
  left: 7vmin;
}
.poster .forehead i:nth-of-type(1):before {
  width: 4vmin;
  height: 3vmin;
  background: #f1c69a;
  border-radius: 50% / 25%;
  transform: rotate(90deg);
  left: 1.8vmin;
  top: -2vmin;
}
.poster .forehead i:nth-of-type(2) {
  z-index: 5;
  width: 9vmin;
  height: 7vmin;
  background: #f1c69a;
  border-radius: 50% / 25%;
  transform: rotate(30deg);
  left: 10.8vmin;
  top: 5.4vmin;
}
.poster .forehead i:nth-of-type(2):before {
  width: 6vmin;
  height: 7vmin;
  background: #f1c69a;
  border-top-right-radius: 7vmin;
  border-bottom-right-radius: 6vmin;
  left: 3.7vmin;
  top: 0.1vmin;
}
.poster .forehead i:nth-of-type(2):after {
  width: 6vmin;
  height: 7vmin;
  background: #f1c69a;
  border-top-right-radius: 8vmin;
  border-bottom-right-radius: 6vmin;
  left: 4vmin;
  top: 0.8vmin;
}
.poster .forehead i:nth-of-type(3) {
  z-index: 5;
  width: 12vmin;
  height: 6vmin;
  background: #f1c69a;
  transform: rotate(15deg);
  left: 5vmin;
  top: 8.5vmin;
}
.poster .forehead i:nth-of-type(3):before {
  width: 6.5vmin;
  height: 3vmin;
  background: #f1c69a;
  border-radius: 50% / 25%;
  left: 10.5vmin;
  top: 5.8vmin;
  transform: rotate(83deg);
}
.poster .forehead i:nth-of-type(3):after {
  width: 6.5vmin;
  height: 3vmin;
  background: #f1c69a;
  border-radius: 50% / 25%;
  left: -8.2vmin;
  top: 5.5vmin;
  transform: rotate(-83deg);
}
.poster .face-shadow {
  width: 10vmin;
  height: 5vmin;
  background: red;
  left: -13vmin;
  z-index: 3;
  top: -15vmin;
}
.poster .face {
  width: 22vmin;
  height: 23vmin;
  background: #f1c69a;
  border-radius: 50% 50% 50% 50% / 20% 20% 80% 80%;
  z-index: 5;
  top: -1vmin;
}
.poster .face:before {
  width: 21.7vmin;
  height: 15vmin;
  background: #f1c69a;
  border-radius: 50% 50% 50% 50% / 20% 20% 80% 80%;
  top: 6.4vmin;
}
.poster .face:after {
  width: 19vmin;
  height: 1.5vmin;
  background: #f1c69a;
  top: 0.2vmin;
  left: 1.5vmin;
}
.poster .face .eyebrow {
  width: 8.8vmin;
  height: 3.4vmin;
  background: #040707;
  top: -14vmin;
  left: 10.9vmin;
  transform: rotate(-5deg);
  border-top-right-radius: 2.5vmin;
  border-top-left-radius: 4vmin;
  z-index: 5;
}
.poster .face .eyebrow:before {
  width: 8vmin;
  height: 3.8vmin;
  background: #040707;
  border-top-right-radius: 2.5vmin;
  border-top-left-radius: 2vmin;
  left: -0.1vmin;
  top: -0.4vmin;
  transform: skewX(5deg);
}
.poster .face .eyebrow:after {
  width: 6.4vmin;
  height: 2vmin;
  background: #040707;
  border-top-left-radius: 50%;
  border-top-right-radius: 60%;
  top: -0.55vmin;
  left: 0.4vmin;
}
.poster .face .eyebrow i:nth-of-type(1) {
  z-index: 5;
  width: 9vmin;
  height: 2.6vmin;
  background: #f1c69a;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  top: 1.6vmin;
  left: -0.1vmin;
}
.poster .face .eyebrow-left {
  transform: scaleX(-1) rotate(-6deg);
  left: -11.2vmin;
  top: -14vmin;
}
.poster .face .eyebrow-small {
  z-index: 3;
  width: 2.7vmin;
  height: 1vmin;
  background: #040707;
  top: -17.8vmin;
  left: 14.8vmin;
  border-top-left-radius: 100%;
  transform: rotate(35deg);
}
.poster .face .eyebrow-small:before {
  width: 2.3vmin;
  height: 1vmin;
  background: #f1c69a;
  border-top-left-radius: 100%;
  left: -0.3vmin;
  top: 0.35vmin;
  transform: rotate(10deg);
}
.poster .face .eyebrow-small-left {
  transform: scaleX(-1) rotate(25deg);
  left: -15.4vmin;
  border-top-right-radius: 100%;
  top: -17.8vmin;
}
.poster .face .eyebrow-small-left:before {
  transform: rotate(15deg);
  border-top-right-radius: 100%;
}
.poster .face .eye {
  width: 3.8vmin;
  height: 3.8vmin;
  background: #040707;
  border-top-right-radius: 100%;
  border-b.........完整代码请登录后点击上方下载按钮下载查看