div+css布局画一个男性人脸效果代码-html代码-BFW代码库

div+css布局画一个男性人脸效果代码

代码语言：html

代码描述：div+css布局画一个男性人脸效果代码

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


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

<head>

  <meta charset="UTF-8">

  
<style>
html, body {
  overflow: hidden;
  background: #8c73;
}

.cartoon {
  position: absolute;
  bottom: 00%;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 80vmin;
  height: 80vmin;
}

.cartoon div {
  position: absolute;
  box-sizing: border-box;
}

.b {
  border: 0.5vmin solid;
}

.r {
  border-radius: 100%;
}

.hb::before,
.ha::after {
  content: "";
  display: block;
  position: absolute;
  box-sizing: border-box;
}

/****/
.cartoon {
  --skin: #fca;
  --hair: #630;
  --iris: #7c6;
  --line-face: #da8;
  --shirt: #fff;
}

.head {
  width: 50%;
  height: 70%;
  background: var(--skin);
  border-radius: 100% / 30% 30% 120% 120%;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  box-shadow: 1.25vmin 3.5vmin 0 -0vmin var(--hair), -1.25vmin 3.5vmin 0 -0vmin var(--hair), -2vmin -7vmin var(--hair), 2vmin -7vmin var(--hair);
}

.hair-top {
  width: 59%;
  height: 10%;
  background: var(--hair);
  left: 50%;
  top: -4%;
  transform: translate(-50%, 0)
}

.eye {
  width: 30%;
  height: 13%;
  background: #fff;
  border-radius: 100% / 90%;
  top: 33%;
  left: 9%;
  box-shadow: inset 0 4vmin 0 -3vmin rgba(0,0,0,0.1), inset 0 4vmin 0 -3vmin var(--skin), 0 -3vmin 3vmin -1vmin rgba(0,0,0,0.05); /* inset 0 -1vmin 0 -0.5vmin var(--skin) */
}

.eye::before {
  width: 3vmin;
  height: 3vmin;
  background: #222;
  border-radius: 50%;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1.25vmin var(--iris);
}

.eye::after {
  width: 1vmin;
  height: 1vmin;
  background: #fff;
  border-radius: 50%;
  top: 35%;
  left: 55%;
  box-shadow: 0.5vmin 0.5vmin 0 -0.25vmin #fff;
}

.eye + .eye {
  left: 61%;
}

.nose {
  width: 16%;
  height: 40%;
  border-radius: 0 2vmin 5vmin 5vmin;
  border: 1vmin solid var(--line-face);
  border-right: 0.75vmin solid var(--line-face);
  border-left-color: transparent;
  border-top: 0;
  left: 50%;
  top: 27%;
  transform: translate(-50%, 0);
  background: var(--skin);
}

.eyebrow {
  width: 40%;
  height: 20%;
  border-radius: 0 30% 0 0;
  box-shadow: -0.75vmin -3vmin 0 -1vmin var(--hair);
  top: 30%;
  left: 57%;
}

.eyebrow + .eyebrow {
  border-radius: 30% 0 0 0;
  box-shadow: 0.75vmin -3vmin 0 -1vmin var(--hair);
  left: 2%;
}

.nose::before {
  width: 4vmin;
  height: 4vmin;
  border: 0.75vmin solid var(--line-face);
  border-radius: 50%;
  border-left-color: transparent;
  border-top-color: transparent;
  bottom: -1%;
  right: -3.45vmin;
  box-shadow: inset -1.1vmin -0.65vmin var(--skin);
}

.nose::after {
  width: 4vmin;
  height: 4vmin;
  border: 0.75vmin solid var(--line-face);
  border-bottom: 1vmin solid var(--line-face);
  border-radius: 50%;
  border-right-color: transparent;
  border-top-color: transparent;
  bottom: -1.1%;
  left: -2.9vmin;
  background: var(--skin);
}

.mustache {
  width: 40%;
  height: 11%;
  background: var(--hair);
  border-radius: 100% 20% 50%;
  left: 52%;
  top: 67%;
  transform-origin: left center;
  transform: translate(-100%, 0) rotate(-10deg);
  box-shadow: inset 0 0 0 4vmin rgba(0,0,0,0.2);
}

.mustache + .mustache {
  left: 48%;
  border-radius: 20% 100% 20% 50%;
  transform-origin: right center;
  transform: rotate(10deg);
}

.lip {
  width: 35%;
  height: 9%;
  background: #f007;
  top: 68%;
  left: 50%;
  transform: translate(-50%, 0);
  background: var(--skin);
  box-sh.........完整代码请登录后点击上方下载按钮下载查看