css布局实现卡通女孩吹笛子效果代码-html代码-BFW代码库

代码语言：html
代码描述：css布局实现卡通女孩吹笛子效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
.nezuko {
  --s: #b7afa4;
  --b: #121013;

  height: min(450px,98vh,75vw);
  aspect-ratio: 1.3;
  margin: auto auto 0;
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.nezuko:before {
  content: "";
  position: absolute;
  inset: 56% 26% 0% 26%;
  background: #0a0b0f;
  z-index: -1;
}
.nezuko:after {
  content: "";
  position: absolute;
  width: 15%;
  height: 1.5%;
  background: linear-gradient(#807681 70%,#0000);
  top: 83%;
  left: 43%;
  mix-blend-mode: darken;
  clip-path: polygon(1% 0,100% 0,100% 100%,0 100%);
}
.face {
  position: absolute;
  inset: 22% 30% 12% 30.5%;
  background: 
    radial-gradient(97% 100% at 100% 100%,#0000 99%,#7f757e) 0 0/58% 47%,
    radial-gradient(100% 100% at 100% 100%,#0000 99%,#7f757e) 0 0/76% 42%,
    radial-gradient(100% 100% at 0 100%,#0000 98%,#7f757e) 100% 0%/48% 44%,
    linear-gradient(var(--s) 0 0) top/100% 46%;
  background-repeat: no-repeat;
  filter: 
    drop-shadow(0 0 1px #20101b) 
    drop-shadow(0 0 0px #20101b)
    drop-shadow(0 0 0px #20101b);
}
@supports (-moz-appearance:none) {
  .face { 
    filter: 
      drop-shadow(0 0 1px #20101b) 
      drop-shadow(0 0 1px #20101b)
      drop-shadow(0 0 0px #20101b);  
  } 
}
.face:before {
  content: "";
  position: absolute;
  inset: 26% 0 0 50%;
  background: 
    conic-gradient(from -33deg at 50% 100%,#0000,var(--b) 2deg 22deg,#0000 27deg) 63% 51%/12% 13%,
    conic-gradient(from -40deg at 50% 100%,#0000,var(--b) 2deg 22deg,#0000 27deg) 71% 51.5%/12% 13%,
    conic-gradient(from -40deg at 50% 100%,#0000,var(--b) 2deg 22deg,#0000 27deg) 77% 51%/12% 13%,
    var(--s);
  background-repeat: no-repeat;
  border-bottom-right-radius: 100% 64%;
  transform-origin: bottom left;
  transform: skewY(-9deg);
  clip-path: polygon(0 0,100% 18%,100% 100%,0 100%);
}
.face:after {
  content: "";
  position: absolute;
  inset: 26% 49.5% 0 -6%;
  background: 
    conic-gradient(from 6deg at 50% 100%,#0000,var(--b) 2deg 22deg,#0000 27deg) 48% 54%/12% 13%,
    conic-gradient(from 10deg at 50% 100%,#0000,var(--b) 2deg 22deg,#0000 27deg) 42% 54.5%/12% 13%,
    conic-gradient(from 10deg at 50% 100%,#0000,var(--b) 2deg 22deg,#0000 27deg) 36% 54.5%/12% 13%,
    linear-gradient(98deg,#7f757e 65%,#0000 72%) 10% 42%/5% 19%,    
    var(--s);
  background-repeat: no-repeat;
  border-bottom-left-radius: 100% 90%;
  transform-origin: bottom right;
  transform: skewY(13deg);
  clip-path: polygon(0% 39%,100% 25%,100% 100%,0 100%);
}
.eye-r {
  position: absolute;
  z-index: 2;
  right: 8.5%;
  top: 43%;
  height: 21%;
  width: 25%;
  background: 
    radial-gradient(97% 95% at 45% 0%, #0000 99%, var(--b) 101%),
    radial-gradient(68% 81% at 50% 100%, #0000 98%, #6d747c) #b7bbba;
  border-radius: 50%;
  clip-path: polygon(-100% -100%, 200% -100%, 100% 100%, -6% 94%);
}
.eye-r:before {
  content: "";
  position: absolute;
  inset: 13% 15% 13% 13%;
  background: 
    radial-gradient(50% 50%, #e0ebe7 65%, #0000) 30% 28%/26% 26% no-repeat,
    radial-gradient(50% 50%, #632e64 84%, #0000) 49% 49%/38% 36% no-repeat,
    radial-gradient(50% 50%, #a0728e 72%, #e0ccd9);
  filter: 
    drop-shadow(0 0 1px #80757d) 
    drop-shadow(0 0 0px #80757d)
    drop-shadow(0 0 0px #80757d);
  border-radius: 50%;
}
.eye-r:after {
  content: "";
  position: absolute;
  inset: -3% -14% 0 -8%;
  background: radial-gradient(65% 89% at 50% 100%, #0000 98%, var(--b));
  border-radius: 50%;
}
.eye-l {
  position: absolute;
  left: 11%;
  top: 43%;
  z-index: 2;
  height: 21%;
  width: 25%;
  background: 
    radial-gradient(97% 95% at 55% 0%, #0000 99%, var(--b) 101%),    
    radial-gradient(68% 81% at 50% 100%, #0000 98%, #6d747c), 
    #b7bbba;
  border-radius: 50%;
  clip-path: polygon(-100% -100%, 200% -100%, 106% 94%, 0 100%);
}
.eye-l:before {
  content: "";
  position: absolute;
  inset: 13% 12% 13% 18%;
  background: 
    radial-gradient(50% 50%, #e0ebe7 65%, #0000) 34% 31%/26% 26% no-repeat,
    radial-gradient(50% 50%, #632e64 84%, #0000) 54% 48%/38% 36% no-repeat,
    radial-gradient(50% 50%, #a0728e 72%, #e0ccd9);
  filter: 
    drop-shadow(0 0 1px #80757d) 
    drop-shadow(0 0 0px #80757d)
    drop-shadow(0 0 0px #80757d);
  border-radius: 50%;
}
.eye-l:after {
  content: "";
  position: absolute;
  inset: -2% -11% 0 -14%;
  background: radial-gradient(65% 89% at 50% 100%, #0000 98%, var(--b));
  border-radius: 50%;
}
.u-eye:before {
  content: "";
  position: absolute;
  right: 2%;
  top: 33.5%;
  width: 35%;
  height: 7%;
  background: radial-gradient(79% 91% at 73% 100%, #0000 96%, var(--b));
  border-radius: 78% 40% 0 0/83% 28% 0 0;
  z-index: 9;
}
.u-eye:after {
  content: "";
  position: absolute;
  left: 5%;
  top: 34%;
  width: 37%;
  height: 7%;
  background: radial-gradient(79% 91% at 28% 100%, #0000 96%, var(--b));
  border-radius: 45% 70% 0 0/20% 83% 0 0;
  z-index: 9;
}
.nose {
  position: absolute;
  width: 6%;
  height: 7.5%;
  background: 
    linear-gradient(#5c5157 0 0) 31% 51%/1px 21% no-repeat,
    linear-gradient(#5c5157 0 0) 14% 47%/1px 33% no-repeat, 
    #898086;
  top: 62%;
  left: 54%;
  border-radius: 30% 70% 74% 26% / 30% 61% 39% 70%;
  clip-path: polygon(-200% 0, 52% 0, 100% 50%, 100% 200%, -200% 200%);
  z-index: 9;
}
.nose:before {
  content: "";
  position: absolute;
  width: 69%;
  height: 24%;
  top: 117%;
  right: 15%;
  border-top: 1px solid #6d655a;
  border-radius: 50%;
  filter: drop-shadow(0 0 0px #6d655a);
  transform: rotate(-32deg);
  clip-path: inset(-105% 4%);
}
.nose:after {
  content: "";
  position: absolute;
  width: 69%;
  height: 24%;
  top: 119%;
  left: -128%;
  border-top: 1px solid #6d655a;
  border-radius: 50%;
  filter: drop-shadow(0 0 0px #6d655a);
  transform: rotate(32deg);
  clip-path: inset(-105% 4%);
}
.mouth {
  position: absolute;
  inset: 77% 4% 7.5% 6%;
  background: 
    linear-gradient(90deg,#0c1e20,#0000 5% 89%,#0c1e20)50% 84%/90% 4%,
    linear-gradient(90deg,#1b3220,#0000 6% )50% 48%/90% 4%,
    linear-gradient(90deg,#1b3220,#0000 8% 95%,#1b3220)50% 41%/90% 4%,
    linear-gradient(90deg,#1b3220,#0000 20% 60%,#1b3220)50% 51%/48% 4%,
    linear-gradient(90deg,#1b3220,#0000 40% 80%,#1b3220)50% 44%/48% 4%,
    linear-gradient(#889b88 0 0) 0 12%/100% 14%,  
    linear-gradient(#374939, #506c56 30% 56%, #203d3b 62%);
  background-repeat: no-repeat;
  border-radius: 2%/42%;
  clip-path: circle(69%);
  z-index: 10;
  filter: drop-shadow(0 0 0px #0a0b0f);
}
.mouth:before {
  content: "";
  position: absolute;
  top: -7%;
  bottom: -7%;
  width: 4%;
  left: 25%;
  background: 
    radial-gradient(50% 50% at 37% 50%, #889b88 93%, #0000) 0% 10%/100% 13% no-repeat,
    linear-gradient(#506c56 56%, #203d3b 62%);
  border-radius: 999px;
  filter: drop-shadow(0 0 1px #20101b) drop-shadow(0 0 0px #20101b);
}
.mouth:after {
  content: "";
  position: absolute;
  top: -7%;
  bottom: -7%;
  width: 4%;
  right: 25%;
  background: 
    radial-gradient(88% 50% at 32% 50%, #889b88 83%, #0000) 0% 10%/84% 13% no-repeat,
    linear-gradient(#506c56 56%, #203d3b 62%);
  border-radius: 999px;
  filter: drop-shadow(0 0 1px #20101b) drop-shadow(0 0 0px #20101b);
}
.mouth > div:before {
  content: "";
  position: absolute;
  top: -7%;
  bottom: -7%;
  width: 5%;
  left: 0;
  background: 
    linear-gradient(22deg, #00.........完整代码请登录后点击上方下载按钮下载查看