纯css布局实现一拳超人琦玉效果-html代码-BFW代码库

代码语言：html

代码描述：纯css布局实现一拳超人琦玉效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
*,
*::after,
*::before {
  box-sizing: border-box;
  position: absolute;
}

:root {
  --size: 80;
  --unit: calc((var(--size) / 827) * 1vmin);
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #ced6e0;
}

.container {
  height: calc(var(--unit) * 827);
  width: calc(var(--unit) * 555);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(4px 3px 9px #a4b0be);
}

.saitama {
  width: 100%;
  height: 100%;
}

.head {
  width: 100%;
  height: 45%;
  top: 5%;
  left: 0%;
}

.body {
  width: 58%;
  height: 46%;
  top: 50%;
  left: 20.5%;
}

.face {
  background: linear-gradient(
      199deg,
      #fdddc2 0% 12%,
      #e2ae87 40% 95%,
      rgba(255, 255, 255, 0.1) 98% 100%
    ),
    linear-gradient(
      to right,
      #f0cbb2 0%,
      #eac0a5 2%,
      #dfaf8b 6%,
      #e2ae87 15%,
      #e0ae89 35%,
      #e6b28b 50%,
      #e0ae89 65%,
      #e2ae87 90%,
      #f8cca9 98%
    );

  width: 81%;
  height: 100%;
  left: 10%;
  border-radius: 25% / 40% 40% 25% 25%;
  z-index: 3;
}

.ear {
  background-color: #e6b28b;
  height: calc(var(--unit) * 95);
  width: calc(var(--unit) * 80);
  top: 48%;
  border-radius: 41%;
}

.ear-left {
  left: 4%;
}

.ear-right {
  right: 5%;
}

.eye {
  background: radial-gradient(
    circle at left,
    #3d302b 0%,
    #27221e 5%,
    #242122 15%,
    #322e2e 50%,
    #4b4746 69%,
    #4e4d4b 90%
  );
  height: calc(var(--unit) * 82);
  width: calc(var(--unit) * 80);
  top: 48%;
  border-radius: 50%;
}

.eye-left {
  left: 14%;
}

.eye-right {
  right: 9%;
}

.eyebrow {
  height: calc(var(--unit) * 82);
  width: calc(var(--unit) * 80);
  top: 41%;
  border-radius: 25% 5% 0 0 / 16% 5% 0 0;
  border-top: calc(var(--unit) * 5) solid #2c2928;
}

.eyebrow-left {
  left: 14%;
  transform: rotate(-1deg);
}

.eyebrow-right {
  right: 9%;
  transform: rotateY(180deg);
}

.nose {
  height: calc(var(--unit) * 55);
  width: calc(var(--unit) * 45);
  top: 60%;
  left: 48%;
  background: green;
  clip-path: polygon(50% 0, 100% 100%, 0% 100%, 50% 0);
  -webkit-clip-path: polygon(50% 0, 100% 100%, 0% 100%, 50% 0);
  background: linear-gradient(
      265deg,
      #f5c89f 0% 30%,
      #f2bd97 40% 45%,
      rgba(255, 255, 255, 0.1) 50% 100%
    ),
    linear-gradient(
      -14deg,
      #f2bd97 0% 15%,
      #f5c89f 18% 20%,
      rgba(255, 255, 255, 0.1) 30%
    ),
    linear-gradient(to right, #dea37b 0% 40%, #e8b285 45% 60%, #f2c69c 65% 78%);
}

.neck {
  height: calc(var(--unit) * 27);
  width: calc(var(--unit) * 74);
  top: -0.5%;
  left: 40%;
  background: linear-gradient(
    to right,
    #b8754b 0% 2%,
    #d09364 4% 6%,
    #d79a6d 8% 15%,
    #d39566 20% 30%,
    #dba16c 50% 75%,
    #d79a6d 80% 92%,
    #d39566 94% 98%,
    #b8754b 98% 100%
  );
  border-radius: 0 0 50% 50% / 0 0 90% 90%;
  z-index: 5;
}

.chest {
  height: calc(var(--unit) * 162);
  width: calc(var(--unit) * 145);
  top: 1.5%;
  left: 29.5%;
  border-radius: 10% 10% 0% 0% / 10% 10% 0% 0%;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 45%,
    98% 65%,
    96% 100%,
    0 100%,
    4% 100%,
    2% 35%,
    0% 45%,
    0 0
  );
  -webkit-clip-path: polygon(
    0 0,
    100% 0,
    100% 45%,
    98% 65%,
    96% 100%,
    0 100%,
    4% 100%,
    2% 35%,
    0% 45%,
    0 0
  );
  z-index: 3;
  background: radial-gradient(
      circle at top left,
      #dea517 0% 40%,
      #e7be41 60% 65%,
      rgba(255, 255, 255, 0.1) 95% 100%
    ),
    linear-gradient(
      to right,
      #dba02b 0% 2%,
      #e3af2e 5% 8%,
      #e6bf33 13% 25%,
      #edc434 30% 50%,
      #f5cc3d 65% 70%,
      #f9d646 75% 85%,
      #f7d348 90% 96%,
      #e4b941 98% 100%
    );
  filter: drop-shadow(1px 1px 3px #d79008);
  border-bottom: calc(var(--unit) * 2) solid #d79008;
}

.upper-arm {
  height: calc(var(--unit) * 130);
  width: calc(var(--unit) * 42);
  top: 1.5%;
  background: linear-gradient(
    to right,
    #f0cd72 0% 5%,
    #f5cb42 10% 15%,
    #eeb921 35% 42%,
    #dd9c08 65% 78%,
    #d79008 90% 100%
  );
  border-radius: 30% 10% 0 0;
  filter: drop-shadow(2px 4px 7px #d79008);
}

.upper-arm-left {
  left: 17.5%;
  transform: rotate(12deg);
}

.upper-arm-right {
  right: 14.5%;
  transform: rotateY(180deg) rotate(17deg);
}

.upper-leg {
  height: calc(var(--unit) * 130);
  width: calc(var(--unit) * 84);
  top: 40.5%;
  clip-path: polygon(
    10% 0,
    10% 10%,
    0 100%,
    80% 100%,
    80% 75%,
    85% 60%,
    100% 0%,
    0 0
  );
  -webkit-clip-path: polygon(
    10% 0,
    10% 10%,
    0 100%,
    80% 100%,
    80% 75%,
    85% 60%,
    100% 0,
    0 0
  );
  background: linear-gradient(
    to right,
    #f0cd72 0% 5%,
    #f5cb42 10% 15%,
    #eeb921 35% 42%,
    #dd9c08 65% 78%,
    #d79008 90% 100%
  );
}

.upper-leg-left {
  left: 28.5%;
  z-index: 4;
}

.upper-leg-right {
  position: relative;
  left: 50.5%;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  z-index: 4;
}

.boots {
  height: calc(var(--unit) * 100);
  width: calc(var(--unit) * 230);
  top: 74%;
  left: 18%;
  z-index: 3;
}

.boot {
  height: calc(var(--unit) * 50);
  width: calc(var(--unit) * 78);
  top: 0%;
  background: linear-gradient(
    to right,
    #9b4644 0% 2%,
    #9d444e 10% 18%,
    #973a43 25% 45%,
    #a04f58 65% 75%,
    #892b33 88% 90%,
    #5f2020 99% 100%
  );
  clip-path: polygon(
    0 0,
    100% 0,
    95% 58%,
    95% 85%,
    100% 100%,
    0% 100%,
    5% 42%,
    5% 20%,
    0 0
  );
  -webkit-clip-path: polygon(
    0 0,
    100% 0,
    95% 58%,
    95% 85%,
    100% 100%,
    0% 100%,
    5% 42%,
    5% 20%,
    0 0
  );
}

.boot-left {
  left: 12%;
}

.boot-right {
  transform: rotateY(180deg);
  right: 16%;
}

.boot-left::after,
.boot-right::after {
  content: "";
  width: calc(var(--unit) * 50);
  height: calc(var(--unit) * 30);
  height: 50%;
  background: rgba(140, 50, 59, 1);
  border-radius: 15%;
  top: 82%;
  left: 16%;
}

.boots::after,
.boots::before {
  content: "";
  height: calc(var(--unit) * 55);
  width: calc(var(--unit) * 105);
  top: 45%;
  background: linear-gradient(
    to right,
    #9b4644 0% 1%,
    #9d444e 5% 10%,
    #973a43 15% 35%,
    #a04f58 45% 55%,
    #892b33 88% 90%,
    #5f2020 99% 100%
  );
  border-radius: 37% 5% 67% 10% / 60% 5% 48% 15%;
  border-bottom: calc(var(--u.........完整代码请登录后点击上方下载按钮下载查看