纯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), in.........完整代码请登录后点击上方下载按钮下载查看