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