div+css绘制一个进击的巨人Colossal Titan效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css绘制一个进击的巨人Colossal Titan效果代码
下面为部分代码预览,完整代码请点击下载或在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