css布局实现一个卡通人物效果代码-html代码-BFW代码库

代码语言：html

代码描述：css布局实现一个卡通人物效果代码

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


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

<head>

  <meta charset="UTF-8">

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

.cartoon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80vmin;
  height: 80vmin;
  border-radius: 50%;
  overflow: hidden;
  border: 2vmin solid #630a;
  background: #fffa;
}

.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;
  --border-skin: #da8;
  --glasses: #333;
  --iris: #630;
  --hair: #630;
  --border-hair: #410;
  --flush: #ff000018;
  --shirt: #fff;
  --border-shirt: #ddd;
}

.chin {
  width: 40%;
  height: 25%;
  border: 0.5vmin solid var(--border-skin);
  background: var(--skin);
  border-radius: 10vmin 0 25vmin 20vmin;
  border-top-color: var(--skin);
  top: 40%;
  left: 50%;
  transform: translate(-50%, 0);
}

.chin::before {
  width: 98%;
  width: calc(99% - 0.5vmin);
  height: 70%;
  background: var(--skin);
  border-radius: 15vmin 12vmin 0 0;
  border: 0.5vmin solid var(--border-skin);
  border-bottom: 0;
  top: -60%;
  left: 4%;
}

.ear {
  width: 10%;
  height: 12%;
  border: 0.5vmin solid var(--border-skin);
  border-radius: 80% 100% 100% 90%;
  border-left-color: var(--skin);
  background: var(--skin);
  transform: rotate(10deg);
  left: 65%;
  top: 40%;
}

.ear::after {
  width: 3vmin;
  height: 3vmin;
  border-radius: 50%;
  border: 0.5vmin solid var(--border-skin);
  border-left-color: var(--skin);
  background: var(--skin);
  top: 45%;
  left: 15%;
}

.ear::before {
  width: 60%;
  height: 60%;
  border: 0.5vmin solid var(--border-skin);
  border-radius: 50%;
  border-right-color: var(--skin);
  border-bottom-color: var(--skin);
  transform: rotate(10deg);
  top: 15%;
  left: 22%;
}

.nose {
  width: 6%;
  height: 6%;
  border: 0.25vmin solid var(--skin);
  border-top: 0.5vmin solid var(--border-skin);
  border-left: 0.5vmin solid var(--border-skin);
  top: 45%;
  left: 40%;
  transform: rotate(50deg);
  background: var(--skin)
}

.nose::after {
  width: 50%;
  height: 90%;
  border-radius: 50%;
  border: 0.25vmin solid transparent;
  border-right: 0.5vmin solid var(--border-skin);
  border-bottom: 1vmin solid transparent;
  transform: rotate(-30deg);
  top: -57%;
  left: -30%;
}

.glasses {
  color: var(--glasses);
  width: 18%;
  height: 18%;
  top: 33%;
  left: 46%;
  background: #fff2;
}

.glasses::before {
  width: 50%;
  border-top: 0.5vmin solid var(--glasses);
  left: 99%;
  top: 35%;
  transform: rotate(10deg);
}

.glasses::after {
  width: 3vmin;
  height: 3vmin;
  border-radius: 50%;
  border: 0.5vmin solid var(--glasses);
  top: 25%;
  left: -21%;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform:  rotate(53deg);
}

.glass-lens {
  color: var(--glasses);
  width: 17%;
  height: 17%;
  top: 32%;
  left: 26.5%;
  background: #fff2;
}

.mouth {
  width:20%;
  height: 10%;
  border-color: transparent;
  border-left: 0.25vmin solid transparent;
  border-bottom-color: var(--border-skin);
  top: 47%;
  left: 37%;
  transform: rotate(-5deg);
}

.mouth::after {
  width: 2vmin;
  height: 2vmin;
  border: 0.25vmin solid transparent;
  border-top: 0.5vmin solid var(--border-skin);
  border-right: 0.5vmin solid var(--border-skin);
  border-radius: 50%;
  top: 73%;
  right: 5%;
}

.mouth::before {
  width: 15%;
  height: 35%;
  border-radius: 50%;
  border: 0.5vmin solid transparent;
  border-bottom-width: 0.25vmin;
  border-right: 0.5vmin solid var(--border-skin);
  bottom: -32%;
  left: 30%;
  transform: translate(-50%, 0);
}

.ear-back {
  left: 30%;
  top: 37%;
  transform: scaleX(-1);
}

.eye {
  width: 9%;
  height: 10%;
  border-radius: 100% / 120% 120% 30% 40%;
  border: 0.5vmin solid var(--border-skin);
  background: white;
  top: 36%;
  left: 50%;
  transform: rotate(3deg);
}

.eye + .eye {
  left: 33.5%;
  top: 35%;
  transform: scale(0.95) rotate(3deg);
}

.eye::before {
  width: 2.5vmin;
  height: 2.5vmin;
  border-radius: 50%;
  background: black;
  top: 40%;
  left: 30%;
  box-shadow: 0 0 0 0.5vmin var(--iris);
}

.eye::after {
  width: 1vmin;
  height: 1vmin;
  border-radius: 50%;
  background: white;
  top: 43%;
  left: 33%;
  box-shadow: 0.75vmin -0.5vmin 0 -0.25vmin white;
}

.neck {
  width: 15%;
  height: 20%;
  border: 0.5vmin solid var(--border-skin);
  background: var(--skin);
  top: 60%;
  left: 45%;
}

.side-hair {
  border-color: var(--border-hair);
  background: var(--hair);
  width: 10%;
  height: 20%;
  top: 25%;
  left: 66%;
  transform: rotate(-10deg);
}

.side-hair::after {
  width: 5vmin;
  height: 5vmin;
  border-radius: 100% 0%;
  border: 0.5vmin solid var(--border-hair);
  background: var(--hair);
  transform: rotate(30deg);
  left: 50%;
  top: -15%;
}

.hair-top {
  width: 40%;
  height: 15%;
  border-color: var(--border-hair);
  background: var(--h.........完整代码请登录后点击上方下载按钮下载查看