div+css布局实现动漫人物头像效果代码-html代码-BFW代码库

代码语言：html
代码描述：div+css布局实现动漫人物头像效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
.kamado {
  --s:#f8d7b6;
  width: min(100vmin,445px);
  aspect-ratio:1;
  margin:auto auto 0;
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.kamado:after {
    content: "";
    position: absolute;
    width: 2.4%;
    height: 4%;
    background: #d29785;
    left: 47.6%;
    top: 69%;
    border-radius: 75% 25% 34% 66% / 60% 19% 81% 40%;
    clip-path: polygon(0% 50%,65% 0,100% 0,100% 100%,0 100%);
}
.kamado:before {
    content: "";
    position: absolute;
    right: 22%;
    top: 37%;
    width: 28%;
    height: 12%;
    background: 
      linear-gradient(#6e293c 0 0) 100% 42%/16% 9%,
      radial-gradient(102% 102% at 0 100%,#0000 97%,#6e293c) 100% 59%/27% 23%,
      radial-gradient(farthest-side,var(--s) 96%,#0000) 39% 74%/13% 19%,
      linear-gradient(to bottom right,#0000 30%,var(--s) 34% 65%,#0000 70%)71% 79%/57% 35%,
      radial-gradient(farthest-side,var(--s) 96%,#0000) 44% 74%/14% 64%,
      radial-gradient(farthest-side,var(--s) 96%,#0000) 59% 67%/11% 29%,
      radial-gradient(farthest-side,var(--s) 96%,#0000) 78% 54%/18% 26%,
      radial-gradient(farthest-side,var(--s) 96%,#0000) 27% 100%/10% 33%,
      radial-gradient(farthest-side,var(--s) 96%,#0000) 40% 40%/16% 42%;
    background-repeat: no-repeat;
    z-index: 1;
    transform: skewX(-42deg);
}
.face {
    position: absolute;
    inset: 28% 22% 47% 23.5%;
    background: 
      linear-gradient(var(--s) 0 0) 63% 80%/10% 10%,
      radial-gradient(farthest-side,var(--s) 96%,#0000) 50% 77%/8% 34%,
      radial-gradient(farthest-side,var(--s) 96%,#0000) 84% 20%/10% 12%,
      radial-gradient(farthest-side,var(--s) 96%,#0000) 78% 11%/8% 10%,
      linear-gradient(to bottom right,var(--s) 48%,#0000 52%) 58% 43%/8% 9%,
      radial-gradient(farthest-side,var(--s) 96%,#0000) 62% 3%/7% 8%,
      linear-gradient(to bottom right,var(--s) 48%,#0000 52%) 57% 39%/7% 32%,
      linear-gradient(to bottom right,var(--s) 49%,#0000 51%) 61% 0%/10% 32%,
      radial-gradient(farthest-side,var(--s) 96%,#0000) 60% 26%/7% 20%,
      conic-gradient(from 9deg at 51% 82%,#6e293c 66deg,#0000 0),var(--s);
    background-repeat:no-repeat;
    border-radius: 40% 40% 0 0/89% 84% 0 0;
    filter: drop-shadow(0 0 1px #20101b) drop-shadow(0 0 0px #20101b) drop-shadow(0 0 0px #20101b)
}
.face div {
    position: absolute;
    inset: 98% 0 -157%;
    background: 
      linear-gradient(#422102 0 0) 49% 46%/1px 5%,
      linear-gradient(#422102 0 0) 52% 46%/1px 6%,
      linear-gradient(#422102 0 0) 51% 47%/1px 6%,
      var(--s);
    background-repeat: no-repeat;
    clip-path: polygon(0 0,100% 0,50% 100%);
}
.face div:before {
    content: "";
    position: absolute;
    width: 5%;
    height: 3%;
    left: 45%;
    bottom: 43%;
    border-top: 1px solid #422102;
    border-radius: 100% 100% 0 0;
    transform: rotate(29deg);
    clip-path: inset(0 0 0 15%);
}
.face div:after {
    content: "";
    position: absolute;
    width: 3%;
    height: 2%;
    right: 45%;
    bottom: 44%;
    border-top: 1px solid #422102;
    border-radius: 100% 100% 0 0;
    transform: rotate(-13deg);
}
.face:before {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--s);
    height: 135%;
    width: 37%;
    border-bottom-right-radius: 72% 59%;
    border-bottom-left-radius: 1%;
    transform-origin: top right;
    transform: skewX(-10deg) skewY(-20deg);
}
.face:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--s);
    height: 135%;
    width: 38%;
    border-bottom-left-radius: 72% 59%;
    border-bottom-right-radius: 5%;
    transform-origin: top left;
    transform: skewX(10deg) skewY(20deg);
}
.eye-r {
    position: absolute;
    right: 27.5%;
    top: 54%;
    width: 15.5%;
    height: 16%;
    background: 
      linear-gradient(to bottom left,#0000 42%,#20101b 46%) 66% 102%/86% 13%,
      linear-gradient(to bottom right,#0000 42%,#20101b 46%) 88% 104%/39% 20%,
      radial-gradient(69% 92% at 51% 100%,#0000 98%,#20131d),
      radial-gradient(64% 81% at 47% 100%,#0000 98%,#cec5ca),
      #ffffff;
    background-repeat: no-repeat;
    border-radius: 50%;
    z-index:3;
    clip-path: polygon(0 0,100% 0,100% 104%,0 86%);
}
@supports (-moz-appearance:none) {
  .eye-r { 
    clip-path: polygon(0 0,100% 0,100% 104%,0 87%); 
  } 
}
.eye-r:before {
    content: "";
    position: absolute;
    background: radial-gradient(83% 96% at 50% 0,#0000 66%,#710c44 91%),#2f0e21;
    border-radius: 50%;
    inset: 20% 22% 15% 14%;
}
.eye-r::after {
    content: "";
    position: absolute;
    aspect-ratio: 1;
    width: 13%;
    background: #fff;
    top: 45%;
    left: 39%;
    transform: rotate(45deg);
    border-radius: 37%;
}
.eye-l {
    position: absolute;
    left: 29%;
    top: 54.5%;
    width: 15.5%;
    height: 16%;
    background: 
      linear-gradient(to bottom left,#0000 42%,#20101b 46%) 18% 100%/35% 15%,
      linear-gradient(to bottom right,#0000 42%,#20101b 46%) 75% 101%/65% 13%,
      radial-gradient(70% 92% at 51% 100%,#0000 98%,#20131d),
      radial-gradient(64% 82% at 54% 100%,#0000 98%,#cec5ca),#ffffff;
    background-repeat: no-repeat;
    border-radius: 50%;
    z-index:3;
    clip-path: polygon(0 0,100% 0,100% 85%,0 109%);
}
.eye-l:before {
    content: "";
    position: absolute;
    background: radial-gradient(83% 96% at 50% 0,#0000 66%,#710c44 91%),#2f0e21;
    border-radius: 50%;
    inset: 22% 15% 17% 24%;
}
.eye-l:after {
    content: "";
    position: absolute;
    aspect-ratio: 1;
    width: 13%;
    background: #fff;
    top: 45%;
    right: 39%;
    transform: rotate(45deg);
    border-radius: 37%;
}
.mouth {
    position: absolute;
    bottom: 13%;
    left: 43%;
    width: 14%;
    height: 6%;
    border-radius: 56% 50% 0 0;
    border: 4px solid #422102;
    border-top-width: 1px;
    clip-path: inset(0 12% 18%);
}
.mouth:before {
    content: "";
    position: absolute;
    background: conic-gradient(from -57deg at 50% 111%,#d49d89 110deg,#0000 0);
    inset: 42% 34% 13% 38%;
    border-radius: 50%;
    filter: drop-shadow(0 0 0px #422102) drop-shadow(0 0 0px #422102) drop-shadow(0 0 0px #422102) drop-shadow(0 0 0px #422102);
}
.u-eye-l:before {
    content: "";
    position: absolute;
    top: 49%;
    right: 35%;
    height: 10%;
    width: 10%;
    background: #d5a193;
    border-radius: 91% 0 0 0;
    clip-path: polygon(0% 45%,113% -8%,86% 31%,59% 40%,0 100%);
}
.u-eye-l:after {
    content: "";
    position: absolute;
    background: 
      radial-gradient(65% 78% at 50% 100%,#0000 92%,#20101b) 98% -12%/34% 45%,
      linear-gradient(to top left,#0000 49%,#20101b 50%)0% 0%/76% 120%;
    background-repeat: no-repeat;
    border-top-right-radius: 20% 25%;
    right: 23%;
    top: 46%;
    height: 7.5%;
    width: 22%;
    clip-path: polygon(71% 0,100% 0,100% 100%,0% 100%,8% 89%);
}
.u-eye-r:before {
    content: "";
    position: absolute;
    background: #d39b8c;
    left: 37%;
    top: 51%;
    width: 11%;
    height: 11%;
    border-top-right-radius: 100%;
    clip-path: polygon(0 0,100% 0,100% 100%,37% 41%,23% 28%);
}
.u-eye-r:after {
    content: "";
    position: absolute;
    background: 
      radial-gradient(65% 78% at 50% 100%,#0000 92%,#20101b) 0% 0%/34% 45%,
      linear-gradient(to top right,#0000 49%,#20101b 50%) 0% 90%/94% 121%;
    background-repeat: no-repeat;
    left: 26.5%;
    top: 47%;
    width: 20%;
    height: 8%;
    border-top-left-radius: 30% 25%;
    clip-path: polygon(0 0,23% 0,89% 78%,100% 100%,0 100%);
}

.ear-r {
    position: absolute;
    width: 9%;
    height: 16%;
    background: #f8d7b6;
    right: 17%;
    bottom: 23%;
    border-radius: 0 43% 47% 50%/0 23% 45% 95%;
    transform-origin: top;
    transform: skewX(-18deg);
    border: 1px solid #20101b;
    overflow: hidden;
}
.ear-r:before {
    content: "";
    position: absolute;
    inset: 14% 19% 19% 37%;
    background: radial-gradient(86% 59% at 101% 100%,var(--s) 89%,#20101b 91% 94%,#0000),#d19d92;
    box-shadow: -2px 2px 0 0 inset #20101b;
    border-radius: 0 32% 0 0;
    transform-origin: left;
    transform: skewY(40deg);
    clip-path: polygon(0 0,100% 0,100% 42%,0 100%);
}
.earing-r:before,
.earing-l:before{
    content: "";
    position: absolute;
    right: 22%;
    bottom: 6%;
    width: 6%;
    height: 15.5%;
    background: 
      radial-gradient(farthest-side,#66263e 98%,#0000) 50% 6%/27% 17%,
      linear-gradient(#332e35 0 0) top/100% 6%,
      linear-gradient(#332e35 0 0) bottom/100% 6%,
      radial-gradient(75% 39% at bottom,#d0d5d8 95%,#20101b 97% 99%,#0000) , 
      linear-gradient(to top left,#0000 46%,#20101b 48% 50%,#0000 54%) 0 0/54% 80%,
      linear-gradient(to top right,#0000 46%,#20101b 48% 50%,#0000 54%) 100% 0/54% 80%,
      linear-gradient(to top right,#0000 46%,#20101b 48% 50%,#0000 54%) 100% 0/74% 33%,
      linear-gradient(to top left,#0000 46%,#20101b 48% 50%,#0000 54%) 0 0/74% 33%,
      linear-gradient(#20101b 0 0) 50%/4% 100%, 
      linear-gradient(#20101b 0 0) 0% 14%/100% 2% #fff;
    background-repeat: no-repeat;
    transform: rotateY(48deg) skewY(-21deg);
    box-sizing: border-box;
    border: 1px solid #20101b;
    border-radius: 2px;
    z-index:-1;
}
.earing-l:before {
    left: 24%;
    right:auto;
    transform: rotateY(-53deg) skewY(21deg);
}
.earing-r:after,
.earing-l:after{
    content: "";
    position: absolute;
    right: 24%;
    bottom: 21%;
    width: 2.5%;
    height: 5.5%;
    background: 
      radial-gradient(farthest-side,#40303a 95%,#0000) top/73% 34%,
      linear-gradient(#20101b 0 0) 50%/15% 100%;
    background-repeat: no-repeat;
}

.earing-l:after {
    left: 25.5%;
    right:auto;
}

.ear-l {
    position: absolute;
    width: 10%;
    height: 16%;
    background: radial-gradient(55% 41% at bottom,var(--s) 95%,#d19d88 );
    left: 18%;
    bottom: 23%;
    border-radius: 31% 0 0 63%/51% 0 0 70%;
    transform-origin: top;
    transform: skewX(16deg);
    border: 1px solid #20101b;
}
.ear-l:before {
    content: "";
    position: absolute;
    inset: 35% 0% 8% 30%;
    background: radial-gradient(34% 45% at 19% 105%,var(--s) 87%,#20101b 91% 98%,#0000),      #d19d92;
    box-shadow: 2px 0px 0 inset #20101b;
    border-radius: 34% 0 0 66%/51% 0 0 71%;
    clip-path: polygon(0 0,100% 0,100% 101%, 0% 64%);
}

.neck {
    content: "";
    position: absolute;
    inset: 86% 26.5% 0% 30%;
    background: 
      linear-gradient(to bottom left,#0000 48%,#20101b 53%) -3% 0/9% 132%,
      linear-gradient(to bottom right,#0000 48%,#20101b 53%) 102% 100%/6% 86%,
      linear-gradient(to bottom left,#0000 49%,#eef8ed 50%) 0% 100%/18% 66%,
      linear-gradient(to bottom right,#0000 49%,#eef8ed 50%) 100% 100%/18% 66%,#bcd3c1;
    background-repeat: no-repeat;
    border-radius: 27% 38% 0 0/27% 31% 0 0;
    clip-path: polygon(-3% 0,103% 0,96% 100%,4% 100%);
    border: 2px solid #20101b;
    border-bottom: 0;
}
.neck:before {
    content: "";
    position: absolute;
    inset: 0 18% -9% 14%;
    background: 
      linear-gradient(#1d0f1c 0 0)50%/10% 100%,
      linear-gradient(to bottom left,#1d0f1c 49%,#0000 51%) -3% 0%/50% 75%,
      linear-gradient(to bottom right,#1d0f1c 49%,#0000 51%) 101% 0%/50% 79% #d69c84;
    background-repeat: no-repeat;
    border-right: 1px solid #20101b;
    border-left: 1px solid #20101b;
    transform: perspective(100px) rotateX(-5deg);
}
.neck:after {
    content: "";
    position: absolute;
    inset: 28% 4% 0 4%;
    background: 
      linear-gradient(#20101b 0 0) 60% 100%/1px 43%,
      linear-gradient(#20101b 0 0) 36% 100%/1px 45%,
      linear-gradient(to bottom left,#0000 49%,#eef8ed 50%) 0% 100%/17% 70%,
      linear-gradient(to bottom right,#0000 49%,#eef8ed 50%) 100% 100%/20% 70%,
      radial-gradient(50% 57% at top,#0000 98%,#bcd3bf);
    background-repeat: no-repeat;
    filter: drop-shadow(0px -1px 0px #20101b);
}
.b-neck {
    position: absolute;
    inset: 94% 20% -17% 23%;
    border-radius: 37% 37% 0 0;
    background: #eef8ed;
    border: 2px solid #20101b;
}
.b-hair {
    position: absolute;
    inset: 29% 22% 52% 23.5%;
    border-radius: 51% 49% 0 0/100% 100% 0 0;
    box-shadow: 0 0 0 30vmin #221823;
    clip-path: inset(-7% -3% 0 -3%);
    z-index: 3
}
.hair {
    --h: #87375a;
    --t: #221823;
    position: absolute;
    inset: 0 3% 26% 5%;
    background: 
      radial-gradient(50% 76% at 50% 0,var(--h) 96%,#0000) 9% 91.5%/8% 2%,
      radial-gradient(100% 100% at 0 0,var(--h) 98%,#0000) 15.5% 89%/8% 11%,
      radial-gradient(104% 104% at 0 0,#0000 98%,var(--h))8% 89%/7% 9%,
      linear-gradient(var(--h) 0 0)8% 80%/3% 7%,
      radial-gradient(100%.........完整代码请登录后点击上方下载按钮下载查看