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