纯css布局画一个女人的画像效果-html代码-BFW代码库

代码语言：html

代码描述：纯css布局画一个女人的画像效果

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
html, body {
  background: #889eff;
}

#desc {
  height: 0;
  width: 0;
  overflow: hidden;
  left: -1000in;
}

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

.cartoon div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.face-1 {
  background: #dc9178;
  clip-path: polygon(46.80% 76.10%,39.20% 27.00%,44.50% 14.30%,61.00% 10.90%,72.60% 19.00%,74.50% 27.10%,74.00% 38.30%,73.80% 42.30%,73.40% 46.30%,71.60% 52.90%,69.80% 56.40%,66.90% 61.10%,64.50% 63.50%,64.00% 68.70%,65.80% 70.20%,70.30% 80.40%);
}

.shirt-clear {
  background: #00237a;
  clip-path: polygon(-0.40% 103.60%,1.00% 93.00%,2.80% 91.40%,5.80% 87.20%,9.40% 84.80%,8.20% 89.20%,8.60% 92.60%,10.20% 89.2%,12.40% 96.8%,12.4% 108.8%,24.8% 102.8%,22.2% 96.20%,29.8% 100.6%,29.4% 113.6%,4.00% 112.8%);
}

.shirt-dark {
  background: #2e2334;
  clip-path: polygon(103.60% 98.00%,98.80% 92.00%,97.20% 87.00%,95.40% 83.20%,93.00% 81.80%,94.40% 85.00%,94.40% 90.20%,94.20% 97.00%,94.00% 101.0%,90.60% 101.8%,90.60% 97.20%,89.40% 90.80%,87.20% 85.60%,87.00% 92.40%,87.00% 114.0%);
}

.shirt-dark-2 {
  background: #2e2334;
  clip-path: polygon(65.10% 69.55%,64.55% 70.95%,63.95% 72.45%,64.90% 73.95%,61.50% 76.30%,62.30% 77.90%,65.40% 77.40%,67.85% 75.80%,69.90% 76.55%,70.55% 73.15%,69.55% 72.55%,67.50% 71.75%,67.05% 71.30%,66.00% 69.45%);
}

.lip-bottom-light {
  background: rgba(255,255,255,0.33);
  clip-path: polygon(61.60% 56.05%,63.55% 56.20%,62.40% 57.45%,61.30% 57.25%,61.25% 56.80%);
}

.shadow-ear {
  background: rgba(0,0,0,0.2);
  clip-path: polygon(34.00% 35.00%,32.20% 35.20%,32.20% 29.80%,32.60% 21.80%,39.00% 11.40%,44.00% 9.80%,38.00% 16.60%,42.60% 16.20%,38.80% 22.80%,43.20% 19.00%,44.60% 14.80%,49.80% 14.80%,43.60% 20.80%,38.60% 26.20%,36.80% 28.60%,39.40% 28.60%,38.40% 35.00%,38.80% 47.80%,37.00% 44.60%,37.00% 40.60%,34.20% 43.80%,33.00% 42.60%,34.60% 40.60%,35.20% 37.60%);
}

.shadow-nose {
  background: rgba(0,0,0,0.1);
  clip-path: polygon(54.10% 47.20%,56.10% 45.40%,59.40% 45.10%,61.60% 45.90%,59.00% 44.70%,54.70% 45.00%,48.40% 47.60%,48.70% 50.10%,53.20% 48.20%);
}

.hair-line {
  background: #945164;
  opacity: 0.5;
  clip-path: polygon(50.60% 14.40%,46.80% 23.20%,44.60% 32.70%,44.00% 44.20%,45.40% 49.60%,48.20% 56.80%,50.00% 59.40%,46.30% 54.20%,43.80% 47.10%,43.20% 38.40%,44.00% 29.60%,45.70% 20.40%,48.90% 15.90%);
}

.cheek-light {
  background: rgba(255,255,255,0.2);
  clip-path: polygon(66.10% 43.30%,68.35% 46.05%,67.90% 48.45%,63.30% 50.40%,64.55% 51.60%,67.25% 52.55%,69.65% 46.90%,71.90% 42.65%,70.65% 42.05%,67.80% 43.25%);
}

.cheek-dark {
  background: rgba(0,0,0,0.1);
  clip-path: polygon(60.20% 64.20%,64.25% 60.15%,67.50% 53.85%,69.90% 49.40%,65.10% 46.05%,64.70% 47.55%,65.80% 50.40%,67.10% 51.90%,64.00% 55.20%,61.45% 58.40%,55.85% 59.65%,58.85% 60.55%,62.70% 60.35%);
}

.lip-bottom-dark {
  background: #2856e3;
  clip-path: polygon(52.90% 55.10%,57.70% 54.70%,56.00% 56.30%,56.80% 57.90%,54.50% 57.30%);
}

.lip-bottom {
  background: #b557b0;
  clip-path: polygon(52.80% 55.90%,57.70% 54.60%,63.50% 55.80%,62.80% 57.30%,61.10% 58.00%,58.50% 58.40%,55.20% 57.60%);
}

.chin-line {
  background: rgba(0,0,0,0.75);
  clip-path: polygon(45.10% 60.50%,54.20% 65.40%,58.80% 65.80%,64.20% 64.20%,58.50% 66.30%,56.20% 66.50%,53.60% 66.40%,47.30% 62.90%);
}

.eye-1-back {
  background: #ad8495;
  clip-path: polygon(64.20% 37.48%,67.53% 37.52%,70.60% 36.95%,68.98% 36.10%,64.95% 36.70%);
}

.eye-1-top {
  background: #945164;
  clip-path: polygon(64.00% 37.50%,65.58% 38.50%,68.23% 38.58%,70.73% 37.33%,71.95% 36.98%,72.15% 35.75%,70.98% 34.20%,70.20% 35.00%,65.10% 36.38%);
}

.eye-1-eyelid {
  background: #2d2136;
  clip-path: polygon(63.30% 37.00%,65.10% 35.70%,68.50% 35.00%,70.20% 35.20%,71.20% 36.50%,71.00% 37.40%,69.40% 36.70%,68.40% 36.70%,68.20% 37.50%,67.30% 37.60%,66.60% 37.60%,65.20% 37.00%,64.10% 37.80%);
}

.lip-top-light {
  background: #b0533f;
  clip-path: polygon(61.90% 55.30%,63.80% 54.60%,64.30% 56.00%,63.10% 56.00%);
}

.lip-top-dark {
  background: #ba6174;
  clip-path: polygon(58.90% 53.20%,59.20% 55.60%,61.70% 55.80%,64.30% 55.30%,62.80% 53.30%,60.70% 53.10%);
}

.lip-top {
  background: #8258a8;
  clip-path: polygon(52.70% 55.20%,55.60% 53.10%,57.70% 52.90%,59.10% 53.30%,61.70% 53.20%,63.10% 53.70%,64.50% 55.90%,63.20% 56.20%,59.80% 55.60%,58.60% 55.90%,55.70% 55.20%);
}

.eye-2-top {
  background: #ae8597;
  clip-path: polygon(45.90% 36.70%,49.90% 37.20%,53.20% 36.10%,50.10% 35.10%,47.40% 35.80%);
}

.cheek-2 {
  background: #97678d;
  clip-path: polygon(49.40% 50.40%,50.40% 50.80%,52.80% 48.10%,50.90% 46.90%);
}

.eye-cheek {
  background: #97678d;
  clip-path: polygon(56.00% 32.20%,49.40% 31.80%,49.40% 35.60%,50.20% 37.90%,46.30% 41.20%,50.10% 45.90%,54.30% 37.70%,51.90% 37.30%,53.70% 35.30%,55.40% 35.20%);
}

.eye-1-eyebrow {
  background: #6a3d4a;
  clip-path: polygon(62.70% 33.10%,66.40% 32.40%,70.20% 32.20%,72.30% 32.80%,70.90% 30.40%,65.50% 30.70%,63.30% 31.30%);
}

.eye-2-.........完整代码请登录后点击上方下载按钮下载查看