div+css绘制一个进击的巨人Colossal Titan效果代码-html代码-BFW代码库

div+css绘制一个进击的巨人Colossal Titan效果代码

代码语言：html

代码描述：div+css绘制一个进击的巨人Colossal Titan效果代码

代码标签： css 巨人

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        body {
          margin: 0;
          height: 100vh;
          display:grid;
          background-color: #fffbf2; /*#fff7e4;*/
          overflow:hidden;
        }
        
        .head {
           --sk:#f5dac7; /*#f7ceb2 #e6c6b7*/ 
           --sb:#ca7a64; /*#cf5341*/
           height: min(430px,100vmin);
           aspect-ratio: 295/430;
           position:relative;
           filter:drop-shadow(0 0px 1px black);
           margin: auto auto 0;
        }
        .top {
            position: absolute;
            overflow: hidden;
            width: 78%;
            height: 42%;
            left: 50%;
            top: 3%;
            transform: translate(-50%);
            --c1: #5f5149;
            background: 
              linear-gradient(var(--c1) 0 0) 50% 70%/1px 15%,
              linear-gradient(to bottom left,#0000 40%,var(--c1),#0000 50%) 47% 74%/4% 16%,
              linear-gradient(to bottom right,#0000 40%,var(--c1),#0000 50%) 54% 74%/4% 20%,
              linear-gradient(to bottom right,#0000 40%,var(--c1),#0000 50%) 59% 74%/8% 11%,
              linear-gradient(to bottom left,#0000 40%,var(--c1),#0000 50%) 41% 74%/8% 11%,
              linear-gradient(to bottom left,#0000 40%,var(--c1),#0000 50%) 43% 74%/5% 11%,
              linear-gradient(to bottom right,#0000 40%,var(--c1),#0000 50%) 57% 74%/5% 11%,
              linear-gradient(to bottom left,#0000 40%,var(--c1),#0000 50%) 57% -15%/3% 22%,      
              linear-gradient(to bottom left,#0000 40%,var(--c1),#0000 50%) 71% -5%/4% 19%,      
              linear-gradient(to bottom right,#0000 45%,var(--c1),#0000 55%) 82% 65%/3% 7%,      
              linear-gradient(to bottom right,#0000 45%,var(--c1),#0000 54%) 75% 61%/4% 8%,      
              linear-gradient(to bottom left,#0000 45%,var(--c1),#0000 54%) 21% 45%/3% 11%,      
              linear-gradient(to bottom left,#0000 48%,var(--c1),#0000 52%) 26% 69%/8% 22%,      
              linear-gradient(to bottom right,#0000 41%,var(--c1),#0000 58%) 57% 23%/3% 19%,      
              linear-gradient(to bottom right,#0000 41%,var(--c1),#0000 58%) 86.5% 23%/2% 15%,      
              linear-gradient(to bottom right,#0000 46%,var(--c1),#0000 53%) 84% 37%/6% 10%,      
              linear-gradient(to bottom right,#0000 42%,var(--c1),#0000 58%) 68% 38%/4% 4%,      
              linear-gradient(to bottom right,#0000 45%,var(--c1),#0000 55%) 71% 27%/4% 22%,
              linear-gradient(to bottom right,#0000 40%,var(--c1),#0000 60%) 34% 40%/2% 12%,      
              linear-gradient(to bottom left,#0000 40%,var(--c1),#0000 60%) 35% 27%/2% 29%,      
              linear-gradient(to bottom left,#0000 40%,var(--c1),#0000 60%) 18% 18%/2% 16%,      
              linear-gradient(to bottom left,#0000 45%,var(--c1),#0000 55%) 43% 2%/3% 24%,      
              linear-gradient(var(--sk) 0 0) top/100% 77%,      
              linear-gradient(var(--sk) 0 0) bottom/88% 28%;
            background-repeat: no-repeat;
            border-radius: 50% 50% 0 0/65% 63% 0 0;
            border-top: 1px solid;
            border-bottom: 0;
        }
        .top:before,
        .top:after{
            content: "";
            position: absolute;
            width: 13%;
            height: 43%;
            background: radial-gradient(120% 89% at 41% 0,#0000 93%,#4b2a1e ),var(--sb);
            right: -2%;
            top: 42%;
            border-radius: 53% 47% 46% 54% / 58% 30% 70% 42%;
            border: 1px solid #5f5149;
        }
        .top:before {
          left:-2%;
          right:auto;
          transform:scaleX(-1);
        }
        .top [class*=eye]{
         .........完整代码请登录后点击上方下载按钮下载查看