纯css+div布局实现一个卡通男生的图像效果-html代码-BFW代码库

纯css+div布局实现一个卡通男生的图像效果

代码语言：html

代码描述：纯css+div布局实现一个卡通男生的图像效果

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


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

<style>
.cartoon {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80vmin;
  height: 80vmin;
}


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

.b {
  border: 1vmin solid black;
}

.r {
  border-radius: 100%;
}

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

/****/
.cartoon {
  --skin: #fca; 
  --iris: #68a;
  --hair: #fe8; #321;
  --shirt: #eef4ff;
  --line: rgba(80,0,0,0.15);
}

.face {
  width: 36%;
  height: 45%;
  background: var(--skin);
  border-radius: 100% 100% / 20% 20% 120% 120%;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.forehead {
  width: 36%;
  height: 8%;
  border-radius: 50%;
  background: var(--skin);
  top: 12%;
  left: 50%;
  transform:translate(-50%, -50%);
}

.neck {
  width: 15%;
  height: 25%;
  background: var(--skin);
  top: 46%;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 8vmin;
  box-shadow: inset 0 25.5vmin 0 -15vmin var(--line), inset 0 -3vmin 0 -1vmin rgba(0,0,0,0.2), inset 0 -3vmin 0 -1vmin var(--shirt);
}

.mouth {
  width: 40%;
  height: 3%;
  border: 0.25vmin solid rgba(0,0,0,0.2);
  border-top-color: transparent;
  border-radius: 100% / 100% 100% 40% 50%;
  bottom: 20%;
  left: 50%;
  transform: translate(-50%, 0) rotate(2deg);
}

.nose {
  width: 16%;
  height: 30%;
  background: var(--line);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  clip-path: polygon(50% 0%, 60% 88%, 0% 85%, 55% 100%, 100% 88%);
}

.ear {
  width: 8%;
  height: 18%;
  border-radius: 90% 100% 70% 100% / 70% 100%;
  background: var(--skin);
  box-shadow: inset -9vmin 0 0 -7vmin var(--line);
  transform: rotate(-10deg);
  top: 28%;
  left: 27%;
}

.ear::before {
  width: 60%;
  height: 80%;
  border-radius: 100% 50% 0 0;
  border: 0.25vmin solid var(--line);
  border-left-color: transparent;
  border-bottom-color: transparent;
  top: 15%;
  left: 4%;
  clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
}

.ear::after {
  width: 2vmin;
  height: 2vmin;
  border: 0.25vmin solid var(--line);
  border-radius: 50%;
  top: 50%;
  right: 8%;
}

.ear + .ear {
  transform: scaleX(-1) rotate(-10deg);
  left: auto;
  right: 27.125%;
}

.eye {
  width: 35%;
  height: 13%;
  background: white;
  border-radius:  80% 90% 30% 40% / 70% 100% 90% 100%;
  top: 28%;
  right: 7%;
  box-shadow: 0 -0.5vmin var(--line);
  overflow: hidden;
}

.eye + .eye {
  transform: scaleX(-1);
  right: auto;
  left: 7%;
}

.pupil {
  width: 25%;
  height: 50%;
  background: #222;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  box-shadow: 0 0 0 1.6vmin var(--iris);
}

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

.eye + .eye .eye-bright {
  left: 50%;
  box-shadow: 0.5vmin 0.75vmin 0 -0.125vmin white;
}

.cheek {
  width: 80%;
  height: 10%;
  background: #f002;
  border-radius: 20% 20% 100% 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(1vmin)
}

.eyebrow {
  width: 40%;
  height: 20%;
  top: 15%;
  right: 4%;
  border-radius:  100% 90% 100% 40% / 70% 100% 90% 100%;
  box-shadow: -0.25vmin -1.5vmin 0 -0.25vmin rgba(0,0,0,0.1), -0.25vmin -1.5vmi.........完整代码请登录后点击上方下载按钮下载查看