纯css布局实现汉尼拔·莱克特·芬科流行音乐人物效果代码-html代码-BFW代码库

代码语言：html
代码描述：纯css布局实现汉尼拔·莱克特·芬科流行音乐人物效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">

  
<style>
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  position: absolute;
}

:root {
  --size: 80;
  --unit: calc((var(--size) / 712) * 1vmin);
  width: 100%;
  height: 100%;
  background-color: #231f20;
}

body {
  width: 100%;
  height: 100%;
}

.container {
  width: calc(var(--unit) * 404);
  height: calc(var(--unit) * 712);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(
    calc(var(--unit) * 5) calc(var(--unit) * 1) calc(var(--unit) * 125) #ed1b24
  );
}

.head {
  z-index: 10;
  width: calc(var(--unit) * 340);
  height: calc(var(--unit) * 292);
  border-radius: 40% 40% 50% 50% / 34% 37% 20% 20%;
  top: 9.5%;
  left: 11%;
  overflow: hidden;
}

.hair {
  width: calc(var(--unit) * 340);
  height: calc(var(--unit) * 115);
  background: #969aa6;
}

.hair::before {
  z-index: 10;
  content: "";
  width: calc(var(--unit) * 141);
  height: calc(var(--unit) * 40);
  border-radius: 50%;
  background: #969aa6;
  top: -4%;
  left: 31%;
  box-shadow: 0px calc(var(--unit) * -3) calc(var(--unit) * 2) #b1b4a9 inset;
  -webkit-clip-path: polygon(
    0 70%,
    5% 0,
    95% 0,
    98% 87%,
    100% 100%,
    0 100%,
    0 50%
  );
  clip-path: polygon(0 70%, 5% 0, 95% 0, 98% 87%, 100% 100%, 0 100%, 0 50%);
}

.mask {
  width: calc(var(--unit) * 340);
  height: calc(var(--unit) * 180);
  top: 39%;
  background: radial-gradient(
        #3a382ca4 33%,
        rgb(184, 179, 163) 51%,
        rgba(184, 179, 163, 0) 65%
      )
      calc(var(--unit) * 320) calc(var(--unit) * 130) / calc(var(--unit) * 8)
      calc(var(--unit) * 8),
    radial-gradient(#3a382ca4 33%, #b8b3a3 51%, rgba(184, 179, 163, 0) 65%)
      calc(var(--unit) * 285) calc(var(--unit) * 150) / calc(var(--unit) * 8)
      calc(var(--unit) * 8),
    radial-gradient(#3a382ca4 33%, #b8b3a3 51%, rgba(184, 179, 163, 0) 65%)
      calc(var(--unit) * 232) calc(var(--unit) * 164) / calc(var(--unit) * 8)
      calc(var(--unit) * 8),
    radial-gradient(#3a382ca4 33%, #b8b3a3 51%, rgba(184, 179, 163, 0) 65%)
      calc(var(--unit) * 170) calc(var(--unit) * 169) / calc(var(--unit) * 8)
      calc(var(--unit) * 8),
    radial-gradient(#3a382ca4 33%, #b8b3a3 51%, rgba(184, 179, 163, 0) 65%)
      calc(var(--unit) * 100) calc(var(--unit) * 162) / calc(var(--unit) * 8)
      calc(var(--unit) * 8),
    radial-gradient(#3a382ca4 33%, #b8b3a3 51%, rgba(184, 179, 163, 0) 65%)
      calc(var(--unit) * 49) calc(var(--unit) * 153) / calc(var(--unit) * 8)
      calc(var(--unit) * 8),
    radial-gradient(#3a382ca4 33%, #b8b3a3 51%, rgba(184, 179, 163, 0) 65%)
      calc(var(--unit) * 16) calc(var(--unit) * 125) / calc(var(--unit) * 8)
      calc(var(--unit) * 8),
    radial-gradient(#3a382ca4 33%, #b8b3a3 51%, rgba(184, 179, 163, 0) 65%)
      calc(var(--unit) * 3) calc(var(--unit) * 90) / calc(var(--unit) * 8)
      calc(var(--unit) * 8),
    radial-gradient(#3a382ca4 33%, #b8b3a3 51%, rgba(184, 179, 163, 0) 65%)
      calc(var(--unit) * 2) calc(var(--unit) * 45) / calc(var(--unit) * 8)
      calc(var(--unit) * 8),
    linear-gradient(to left, rgb(121, 122, 114) 2%, rgba(121, 122, 114, 0) 20%),
    linear-gradient(to right, rgb(121, 122, 114) 2%, rgba(121, 122, 114, 0) 20%),
    linear-gradient(rgb(177, 180, 169) 65%, rgb(121, 122, 114) 90%);
  background-repeat: no-repeat;
}

.mask::after {
  z-index: 10;
  content: "";
  width: calc(var(--unit) * 160);
  height: calc(var(--unit) * 80);
  border-radius: 50% / 100% 100% 0% 0%;
  background: linear-gradient(#b1b4a9 40%, #797a72);
  top: 46%;
  left: 29%;
}

.face-left {
  width: calc(var(--unit) * 190);
  height: calc(var(--unit) * 204);
  background-color: #edaf98;
  top: 8%;
  left: 5%;
  border-radius: 40% 0% 0% 33% / 50% 0% 0% 39%;
  box-shadow: calc(var(--unit) * -5) calc(var(--unit) * 5) calc(var(--unit) * 5)
      #d6dbe95d,
    0 calc(var(--unit) * -5) calc(var(--unit) * 2) #d6dbe95d,
    calc(var(--unit) * 0) calc(var(--unit) * 20) calc(var(--unit) * 10)
      #e0a488d5 inset,
    calc(var(--unit) * 45) calc(var(--unit) * -20) calc(var(--unit) * 10)
      #e0a488d5 inset,
    calc(var(--unit) * 60) calc(var(--unit) * -20) calc(var(--unit) * 10)
      #f2c2ae71 inset;
}

.face-right {
  width: calc(var(--unit) * 160);
  height: calc(var(--unit) * 204);
  background-color: #edaf98;
  top: 8%;
  right: 3%;
  border-radius: 80% 60% 43% 97% / 35% 76% 44% 46%;
  box-shadow: calc(var(--unit) * 5) calc(var(--unit) * -2) calc(var(--unit) * 5)
      #d6dbe95d,
    calc(var(--unit) * 2) calc(var(--unit) * -2) calc(var(--unit) * 5) #d6dbe95d,
    calc(var(--unit) * -15) calc(var(--unit) * 0) calc(var(--unit) * 8)
      #e0a488d5 inset;
}

.eye {
  width: calc(var(--unit) * 63);
  height: calc(var(--unit) * 63);
  background: #0a0809;
  box-shadow: calc(var(--uniit) * -10) calc(var(--uniit) * -1)
    calc(var(--uniit) * 1) #060503 inset;
  top: 48.5%;
  border-radius: 50%;
  box-shadow: 0px calc(var(--unit) * 10) calc(var(--unit) * 2)
    hsla(21, 44%, 62%, 0.9);
}

.eye-left {
  left: 13%;
}

.eye-right {
  right: 10%;
}

.eye::after {
  content: "";
  width: 20%;
  height: 20%;
  background: radial-gradient(hsl(150, 1%, 34%) 30%, hsla(150, 1%, 34%, 0) 92%);
  top: 31%;
  left: 25%;
  border-radius: 50%;
}

.nose {
  z-index: 10;
  width: calc(var(--unit) * 40);
  height: calc(var(--unit) * 40);
  background-image: linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 25%,
      rgba(255, 255, 255, 0.2) 35%,
      rgba(255, 255, 255, 0) 50%,
      rgba(255, 255, 255, 0.2) 60%,
      rgba(255, 255, 255, 0) 75%
    ),
    linear-gradient(
      57deg,
      rgba(255, 255, 255, 0) 72%,
      rgba(255, 255, 255, 0.2) 77%,
      rgba(255, 255, 255, 0) 82%
    ),
    linear-gradient(
      -57deg,
      rgba(255, 255, 255, 0) 72%,
      rgba(255, 255, 255, 0.2) 77%,
      rgba(255, 255, 255, 0) 82%
    );
  top: 69%;
  left: 46%;
  overflow: hidden;
}

.nose::after {
  content: "";
  width: 100%;
  height: 100%;
  background: #9c9b93;
  top: 76%;
  transform: rotate(45deg);
  border-radius: 25%;
  box-shadow: calc(var(--unit) * -2) calc(var(--unit) * -2)
    calc(var(--unit) * 5) rgba(255, 255, 255, 0.2);
}

.mouth {
  z-index: 10;
  width: calc(var(--unit) * 40);
  height: calc(var(--unit) * 18);
  top: 88%;
  left: 45%;
  border-radius: 40%;
  overflow: hidden;
}

.gap {
  width: calc(var(--unit) * 5);
  height: 120%;
  background: #121013bd;
  border-radius: 50%;
}

.gap1 {
  left: 0;
}

.gap2 {
  left: 28%;
}

.gap3 {
  left: 56%;
}

.gap4 {
  left: 85%;
}

.body {
  width: calc(var(--unit) * 195);
  height: calc(var(--unit) * 320);
  top: 48%;
  left: 30%;
}

.chest {
  z-index: 5;
  width: calc(var(--unit) * 148);
  height: calc(var(--unit) * 150);
  background-color: #d5dabc;
  left: 11%;
  border-radius: 20% / 10%;
  background-repeat: no-repeat;
  background-size: 250% 100%, 250% 85%, 250% 72%;
  background-position: center center;
  background-image: radial-gradient(
      rgba(174, 177, 157, 0) 62%,
      rgba(174, 177, 157, 0.7) 65%,
      rgba(174, 177, 157, 0) 67%
    ),
    radial-gradient(
      rgba(174, 177, 157, 0) 62%,
      rgba(174, 177, 157, 0.7) 65%,
      rgba(174, 177, 157, 0) 67%
    ),
    radial-gradient(
      rgba(174, 177, 157, 0) 62%,
      rgba(174, 177, 157, 0.7) 65%,
      rgba(174, 177, 157, 0) 67%
    );
}

.chest::before,
.chest::after {
  content: "";
  width: calc(var(--unit) * 25);
  height: calc(var(--unit) * 73);
  background-color: #d5dabc;
  top: 65%;
  border-radius: 0.3rem;
  border: calc(var(--unit) * 1) solid rgb(174, 177, 157);
}

.chest::before {
  left: 35%;
  border-right: 0;
  transform: skewX(13deg);
  box-shadow: calc(var(--unit) * 5) 0 calc(var(--unit) * 10)
    rgba(32, 31, 31, 0.2) inset;
}

.chest::after {
  left: 47%;
  border-left: 0;
  transform: skewX(-13deg);
  box-shadow: calc(var(--unit) * -5) 0 calc(var(--unit) * 10)
    rgba(32, 31, 31, 0.2) inset;
  -webkit-clip-path: polygon(30% 0, 100% 0, 100% 100%, 50% 100%, 30% 50%, 0 0);
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 50% 100%, 30% 50%, 0 0);
}

.arm-left {
  z-index: 5;
  width: calc(var(--unit) * 148);
  height: calc(var(--unit) * 120);
  background-color: #d5dabc;
  border-radius: 38% 50% 80% 20% / 50% 0% 95% 50%;
  box-shadow: calc(var(--unit) * 2) calc(var(--unit) * -3) calc(var(--unit) * 7)
    rgba(142, 137, 107, 0.6) inset;
  background-image: linear-gradient(
    -12deg,
    rgba(142, 137, 107, 0) 48%,
    rgba(142, 137, 107, 0.4) 50%,
    rgba(142, 137, 107, 0) 52%
  );
  background-size: 65% 50%;
  background-position: top calc(var(--unit) * 30) left calc(var(--unit) * 25);
  background-repeat: no-repeat;
}

.arm-left::before {
  z-index: 5;
  content: "";
  width: 100%;
  height: 33%;
  top: 14%;
  left: 11%;
  background: #d5dabc;
}

.body::after {
  z-index: 20;
  content: "";
  width: calc(var(--unit) * 80);
  height: calc(var(--unit) * 35);
  top: 17%;
  left: 29%;
  background: #d5dabc;
  border-radius: 50% / 76% 22% 0 0;
  -webkit-clip-path: polygon(0% 0, 100% 0, 100% 50%, 17% 50%, 23% 0);
  clip-path: polygon(0% 0, 100% 0, 100% 50%, 17% 50%, 23% 0);
  border-top: calc(var(--unit) * 3) solid rgba(142, 137, 107, 0.4);
}

.arm-right {
  z-index: 5;
  width: calc(var(--unit) * 148);
  height: calc(var(--unit) * 115);
  background: blue;
  right: 5%;
  border-radius: 0% 32% 52% 20% / 0 40% 27% 30%;
  background-color: #d5dabc;
  box-shadow: calc(var(--unit) * 2) calc(var(--unit) * -3) calc(var(--unit) * 7)
    #8e896b9c inset;
}

.ear {
  width: calc(var(--unit) * 50);
  height: calc(var(--unit) * 70);
  background-color: #cf9a8d;
  top: 25.5%;
}

.ear-left {
  left: 7%;
  border-radius: 100% 0 0 100%;
}

.ear-right {
  right: 2%;
  border-radius: 0 100% 100.........完整代码请登录后点击上方下载按钮下载查看