div布局实现一个人物形象效果代码-html代码-BFW代码库

div布局实现一个人物形象效果代码

代码语言：html

代码描述：div布局实现一个人物形象效果代码

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

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

<head>

  <meta charset="UTF-8">

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

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

.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;
  --dark: #da9;
  --semidark: #eba;
  --semilight: #fdb;
  --iris: #89b;
  --hair: #963;
  --shirt: #fff;
  --shirt-back: #ddd;
}

.face {
  background: var(--skin);
  width: 35%;
  height: 52%;
  border-radius: 100% / 30% 30% 120% 120%;
  clip-path: polygon(-100% -100%, 200% -100%, 200% 99%, 60% 98.25%, 50% 98.5%, 40% 98.25%, -100% 99%);
  top: 3%;
  left: 50%;
  transform: translate(-50%, 0);
  overflow: hidden;
  box-shadow: 
    inset -0.5vmin 0 1vmin var(--semidark),
    inset 0.5vmin 0 1vmin var(--semilight),
    -5vmin -6vmin 0 -4vmin var(--hair),
    5vmin -5.5vmin 0 -4vmin var(--hair),
    0 7vmin 4vmin -8vmin var(--dark);
}

.eye {
  width: 8.5vmin;
  height: 4.5vmin;
  background: #fffcf8;
  color: var(--dark);
  top: 29%;
  left: 10%;
  border-radius: 100% / 190% 140% 70% 60%;
  overflow: hidden;
  box-shadow: 
    0 0.5vmin 0 -0.25vmin,
    0 -0.75vmin 0 -0.25vmin,
    0 -2vmin 2vmin 1vmin #da9a,
    0 0 3vmin 1vmin #da9a,
    2vmin 0.5vmin 0 -1.5vmin,
    -2vmin 0.75vmin 0 -1.5vmin;
}

.eye::before {
  width: 1.5vmin;
  height: 1.5vmin;
  border-radius: 50%;
  background: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -25%);
  box-shadow: 
    inset 0.5vmin -0.5vmin 0 0.5vmin #222,
    0.9vmin -0.5vmin 0 -0.6vmin white,
    0 0 1.5vmin #fffa,
    0 0 0 1.5vmin var(--iris);
}

.eye::after {
  width: 200%;
  height: 15%;
  top: 0;
  left: -50%;
  background: var(--skin);
  box-shadow: inset 0 0 0 3vmin #00000008;
  transform: rotate(-3deg);
}

.eye + .eye {
  left: 64%;
  border-radius: 100% / 130% 190% 60% 70%;
  box-shadow: 
    0 0.5vmin 0 -0.25vmin,
    0 -0.75vmin 0 -0.25vmin,
    0 -2vmin 2vmin 1vmin #da9a,
    0 0 3vmin 1vmin #da9a,
    -2vmin 0.5vmin 0 -1.5vmin,
    2vmin 0.75vmin 0 -1.5vmin
    
}

.eye + .eye::after {
  transform: rotate(2deg);
}

.mouth {
  width: 38%;
  height: 5%;
  background: var(--dark);
  border-radius: 100% / 0 0 180% 200%;
  top: 75%;
  left: 50%;
  transform: translate(-50%, 0);
  opacity: 0.5;
  background-image: repeating-linear-gradient(to right, transparent 0 1%, #00000008 0 2%);
}

.mouth-top {
  width: 21%;
  height: 2.5%;
  top: 73%;
  left: 31%;
  background: var(--dark);
  border-radius: 100% 40% 0 0;
}

.mouth-top::after {
  width: 100%;
  height: 100%;
  background: var(--dark);
  border-radius: 40% 100% 0 0;
  right: -85%;
}

.chin {
  width: 50%;
  height: 45%;
  top: 62%;
  box-shadow: 
    inset 0 1vmin 3vmin var(--dark),
    12.5vmin -4vmin 2vmin -3vmin var(--semidark),
    -12.5vmin -4vmin 2vmin -3vmin var(--semidark);
  left: 50%;
  transform: translate(-50%, 0);
  opacity: 0.25;
}

.chin::after {
  width: 70%;
  height: 10vmin;
  border-radius: 50%;
  top: 53%;
  left: 50%;
  transform: translate(-50%, 0);
  box-shadow: 0 -2vmin 1vmin -1vmin var(--dark);
}

.nose {
  width: 18%;
  height: 43.5%;
  border-radius: 100% / 120% 120% 50% 50%;
  top: 22%;
  left: 50%;
  transform: translate(-50%, 0);
  box-shadow: 
    inset -0.25vmin -1.75vmin.........完整代码请登录后点击上方下载按钮下载查看