css布局实现一个络腮胡帽子人物头像效果代码-html代码-BFW代码库

css布局实现一个络腮胡帽子人物头像效果代码

代码语言：html

代码描述：css布局实现一个络腮胡帽子人物头像效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
<style>
@keyframes cigar {
  0%, 35%, 100% {
    background-color: #80313a;
    border-color: #302e2e;
  }
  60%, 75% {
    background-color: #f83f11;
    border-color: #a31010;
  }
  90% {
    background-color: #8a1a03;
    border-color: #3a2a2a;
  }
}
@keyframes cherry {
  0%, 55% {
    top: var(--cherry-initial-position);
    opacity: 0;
  }
  65% {
    top: var(--cherry-initial-position);
    opacity: 0.8;
  }
  70%, 100% {
    top: var(--cherry-final-position);
    opacity: 0;
  }
}
:root {
  background-color: #ffe9bf;
}
:root body {
  position: relative;
}
:root * {
  position: absolute;
  box-sizing: border-box;
  margin: 0;
}
:root *:before, :root *:after {
  position: absolute;
  box-sizing: border-box;
  content: "";
}
:root #clint {
  left: 50%;
  width: 120vmin;
  height: 100vmin;
  transform: translate(-50%, 0);
}
:root #clint .hat {
  top: 10%;
  left: 50%;
  width: 72%;
  height: 34%;
  transform: translate(-50%, 0);
}
:root #clint .hat .crown {
  left: 26%;
  width: 24%;
  height: 80%;
  background-color: #5f2740;
  border-top-left-radius: 80% 22%;
}
:root #clint .hat .crown + .crown {
  transform: scaleX(-1);
  background-color: #82434b;
  right: 26%;
  left: unset;
}
:root #clint .hat .crown + .crown:before {
  background-color: #9f8e94;
}
:root #clint .hat .crown:before {
  bottom: 0;
  width: 100%;
  height: 25%;
  background-color: #7f5f6a;
}
:root #clint .hat .brim {
  bottom: 4%;
  left: 0;
  width: 50%;
  height: 25%;
  background-color: #5f2740;
  border-radius: 50% 0 0 50%;
  transform: skewY(7deg);
}
:root #clint .hat .brim + .brim {
  bottom: 2%;
  left: 50%;
  background-color: #82434b;
  border-radius: 0 120% 100% 0;
  transform: skewY(-5deg);
}
:root #clint .hat .brim + .brim .inside {
  top: 31%;
  left: 0;
  width: 58%;
  height: 46%;
  border-radius: 0 120% 100% 0;
}
:root #clint .hat .brim .inside {
  top: 40%;
  right: 0;
  width: 65%;
  height: 50%;
  background-color: #481e32;
  border-radius: 50% 0 0 50%;
}
:root #clint .head {
  top: 38%;
  left: 50%;
  width: 40vmin;
  height: 42vmin;
  transform: translate(-50%, 0);
}
:root #clint .head:before, :root #clint .head:after {
  top: 0;
  width: 20vmin;
  height: 0;
  border-left: 19vmin solid transparent;
  border-top: 3vmin solid #5f2740;
  z-index: 100;
}
:root #clint .head:after {
  right: 0;
  border-top-color: #82434b;
  transform: scaleX(-1);
}
:root #clint .head .beard {
  width: 20vmin;
  height: 0;
  border-top: 42vmin solid #9e4d32;
  border-left: 2vmin solid transparent;
  border-bottom-left-radius: 100% 50%;
}
:root #clint .head .beard + .beard {
  right: 0;
  border-top-color: #b16653;
  transform: scaleX(-1);
}
:root #clint .head .skin {
  left: 3vmin;
  width: 17vmin;
  height: 18vmin;
  background-color: #e9a87e;
}
:root #clint .head .skin:before {
  bottom: -16vmin;
  width: 17vmin;
  height: 0;
  border-top: 16vmin solid #e9a87e;
  border-left: 10vmin solid transparent;
}
:root #clint .head .skin + .skin {
  right: 3vmin;
  left: unset;
  background-.........完整代码请登录后点击上方下载按钮下载查看