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