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

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

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