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]{
            position: absolute;
            width: 34%;
            height: 24%;
            background: 
              radial-gradient(farthest-side,#000 32%,#88878d 50% 87%,#000,#0000) 34.5% 44%/15% 24%,
              radial-gradient(farthest-side,#fff 98%,#0000) 32% 47%/29% 25%,
              radial-gradient(80% 46% at left,#0f0f0f 98%,#0000)#49281c;
            right: 8%;
            background-repeat: no-repeat;
            top: 75%;
            border-radius: 0 50% 50% 0;
            border: 1px solid #0f0f0f;
        }
        .eye-l {
          left:8%;
          right:auto;
          transform:scaleX(-1);
        }
        .top [class*=eye] div:before, 
        .top [class*=eye] div:after {
            content: "";
            position: absolute;
            width: 27%;
            top: 21%;
            right: 50%;
            aspect-ratio: 1;
            border-radius: 100% 0 0;
            border: 2px solid #994d40;
            box-shadow: 1px 1px 2px inset #0f0f0f;
            border-right: 0;
            border-bottom: 0;
            transform: rotate(45deg);
        }
        .top [class*=eye] div:after {
            transform: rotate(-135deg);
            top: 24%;
            border-width: 1.5px;
        }
        .top [class*=eye]:before {
            content: "";
            position: absolute;
            width: 84%;
            top: -9%;
            left: -13%;
            height: 33%;
            background: var(--sk);
            border-radius: 6px 0 100% 8px;
            border: 2px solid #0f0f0f;
            border-top: 0;
            border-right: 0;
            transform-origin: right bottom;
            transform: rotate(-2deg);
        }
        .top [class*=eye]:after {
            content: "";
            position: absolute;
            right: 100%;
            width: 16%;
            top: 25%;
            height: 75%;
            background: #0f0f0f;
            border-radius: 100% 0 0 0;
        }
        .b-eye-r,
        .b-eye-l{
            position: absolute;
            width: 28.5%;
            height: 18%;
            background: 
              radial-gradient(107% 82% at 63% 0,#0000 84%,#4b2a1e70 ),
              linear-gradient(var(--sb) 0 0)bottom/100% 81%,
              radial-gradient(84% 95% at 24% 100%,var(--sb) 98%,#0000) 0 0/50% 20%,
              radial-gradient(71% 103% at 30% -33%,#0000 98%,var(--sb)) 100% 0/50% 20%;
            background-repeat: no-repeat;
            right: 19%;
            top: 42%;
            border-radius: 39% 0 50% 50%/15% 0 50% 50%;
            filter: drop-shadow(0 -1px 0 #0f0f0f);
        }
        .b-eye-l {
          left:19%;
          right:auto;
          transform:scaleX(-1)
        }
        .nose {
          position:absolute;
          inset:0;
          filter: drop-shadow(0 0 1px #0f0f0f) drop-shadow(0 0 1px #0f0f0f);
            clip-path: inset(44.5% 0 0 0);
        }
        .nose:after {
            content: "";
            position: absolute;
            left: 50%;
            transform: translate(-50%);
            background: 
              radial-gradient(35% 92% at bottom left,#0000 89%,var(--sk)) left/51% 100%,
              radial-gradient(35% 92% at bottom right,#0000 89%,var(--sk)) right/51% 100%;
            background-repeat: no-repeat;
            width: 7%;
            top: 44.5%;
            height: 4%;
        }
        .n1 {
          position: absolute;
          width: 13%;
          aspect-ratio:1/1;
          top: 51%;
          background: var(--sk);
          left: 50%;
          transform: translate(-50%) rotate(45deg) rotate3d(1, -1, 0, 41deg);
          border-radius: 0 5px 13px 5px;
        }
        .n2 {
           position: absolute;
           width: 9%;
           aspect-ratio: 1/1;
           top: 49%;
           background: var(--sk);
           left: 50%;
           transform: translate(-50%) rotate(45deg) rotate3d(1, -1, 0, 9deg);
          border-radius: 0 5px 13px 5px;
        }
        .n3 {
            position: absolute;
            width: 9%;
            aspect-ratio: 1/1;
            top: 46%;
            background: var(--sk);
            left: 50%;
            transform: translate(-50%) rotate(45deg) rotate3d(1, 1, 0, 44deg);
            border-radius: 0 5px 13px 5px;
        }
        .u-nose {
            position: absolute;
            left: 50%;
            top: 56%;
            transform: translate(-50%);
            width: 37%;
            height: 17%;
            background: 
              radial-gradient(50% 107% at top,#0005 72%,#0000) top/45% 30%,
              linear-gradient(to bottom right,#0000 40%,#5f5149,#0000 50%) 40% 36%/8% 57%,
              linear-gradient(to bottom left,#0000 40%,#5f5149,#0000 50%) 60% 36%/8% 57%,      
              radial-gradient(116% 32% at 150% -6%,#0000 93%,#0f0f0f 95% 98%,var(--sk)) right/50.5% 100%,      
              radial-gradient(116% 32% at -50% -6%,#0000 93%,#0f0f0f 95% 98%,var(--sk)) left/50.4% 100%;
            background-repeat: no-repeat;
        }
        .lig-r,
        .lig-l{
            position: absolute;
            height: 28%;
            width: 7.5%;
            background: radial-gradient(67% 40% at -24% 44%,#0000 90%,#0f0f0f 92% 96%,var(--sk));
            border-radius: 0 100% 100% 0/0 50% 50% 0;
            right: 10%;
            top: 41%;
            transform-origin: top;
            transform: rotate(27deg);
            border-right: 2px solid #0f0f0f;
            clip-path:polygon(0 0,100% 21%,100% 84%,-20% 100%);
        }
        .lig-l {
          right:auto;
          left:10%;
          transform:scaleX(-1) rotate(27deg);
        }
        .lig-rr,
        .lig-ll {
            position: absolute;
            height: 32%;
            width: 4%;
            right: 15.3%;
            top: 42%;
            border-radius: 100% 100% 0 0;
            border: 2px solid #0f0f0f;
            transform: rotate(9deg);
            box-shadow: 0 0 0 33px var(--sk);
            clip-path: polygon(-90% -30%,87% -21%,136% 90%,33% 42%,45% 18%,0% 18%);
        }
        .lig-ll {
          left: 15.3%;
          right:auto;
          transform:scaleX(-1) rotate(9deg);
        }
        .lig-r1,
        .lig-l1{
            position: absolute;
            height: 15%;
            width: 18%;
            right: 12%;
            top: 61.2%;
            border-radius: 15px 0 0 20px/32px 0 0 20px;
            transform: rotate(-15deg);
            border: 2px solid #0f0f0f;
            box-shadow: 0 0 0 300px var(--sk);
            clip-path: polygon(-14% 0,24% -4%,38% 34%,41% 120%,-38% 100%);
        }
        .lig-l1{
            left: 12%;
           right:auto;
            transform:scaleX(-1) rotate(-15deg);
        }
        .lig-r2, 
        .lig-l2 {
            position: absolute;
            height: 12.5%;
            width: 4%;
            right: 16.5%;
            top: 64%;
            border-radius: 0 0 100% 0/0 0 32% 0;
            border: 2px solid #0f0f0f;
            border-top: 0;
            border-left: 0;
            box-shadow: 0 0 0 300px var(--sk);
            clip-path: polygon(13% 0%,125% 0,125% 115%,13% 103%);
        }
        .lig-l2{
          left: 16.5%;
          right:auto;
          transform:scaleX(-1)
        }
        .bottom {
            position: absolute;
            width: 50%;
            aspect-ratio: 1/1;
            background: radial-gradient(circle at 67% 68%,var(--sb) 41%,#0f0f0f,#0000 43%),var(--sk);
            top: 61%;
       .........完整代码请登录后点击上方下载按钮下载查看

网友评论0