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