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%, 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, #0000 29%, #889b88 32% 75%, #0000 80%) 0% 10%/100% 16% no-repeat, linear-gradient(#506c56 56%, #203d3b 62%); filter: drop-shadow(0 0 1px #20101b) drop-shadow(0 0 0px #20101b); clip-path: polygon(0% -6%, 130% 10%, 130% 90%, 0% 112%); } .mouth > div:after { content: ""; position: absolute; top: -7%; bottom: -7%; width: 5%; right: 0; background: linear-gradient(-22deg, #0000 29%, #889b88 32% 75%, #0000 80%) 0% 10%/100% 16% no-repeat, linear-gradient(#506c56 56%, #203d3b 62%); filter: drop-shadow(0 0 1px #20101b) drop-shadow(0 0 0px #20101b); clip-path: polygon(-30% 10%, 100% -6%, 100% 106%, -30% 92%); } @supports (-moz-appearance:none) { .mouth { filter: drop-shadow(0 0 1px #0a0b0f) drop-shadow(0 0 0px #0a0b0f) drop-shadow(0 0 0px #0a0b0f); } } .neck { position: absolute; inset: 81% 39% -2% 41%; background: #7f7580; background: #807681; border: 1px solid var(--b); } .neck:before { content: ""; position: absolute; bottom: 0; left: 8%; width: 37%; height: 103%; background: linear-gradient(to top right, #0000 50%, var(--b) 53%) 100% 128%/53% 89% no-repeat, #83818e; transform-origin: bottom right; transform: rotate(-25deg); border-top-left-radius: 60% 32%; border: inherit; clip-path: polygon(0 0, 65% 0, 50% 13%, 100% 100%, 0 100%); box-sizing: border-box; z-index: 2; } .neck:after { content: ""; position: absolute; bottom: 0; right: 8%; width: 37%; height: 103%; background: linear-gradient(to top left, #0000 50%, var(--b) 53%) 0 128%/48% 90% no-repeat, #83818e; transform-origin: bottom left; transform: rotate(25deg); border-top-right-radius: 60% 32%; border: inherit; clip-path: polygon(45% 14%, 30% 0, 100% 0, 100% 100%, 0 100%); box-sizing: border-box; z-index: 2; } .u-neck:before { content: ""; position: absolute; width: 16%; height: 13%; left: 26%; bottom: 0; background: linear-gradient(to top right,#0000 48%,#472e4b 49% 50%,#0000 51%), linear-gradient(#472e4b 0 0) 50% 30%/100% 3% no-repeat, #654665; clip-path: polygon(0% 127%, 79% 0, 91% 0, 100% 100%, 0 100%); z-index: 1; } .u-neck:after { content: ""; position: absolute; width: 16%; height: 13%; right: 24%; bottom: 0; background: linear-gradient(to top right,#0000 48%,#472e4b 49% 50%,#0000 51%) 37%/37% 100% no-repeat, linear-gradient(to top right,#0000 47%,#472e4b 49% 50%,#0000 52%) 24%/24% 100% no-repeat, #654665; clip-path: polygon(8% 0, 21% 0, 100% 127%, 100% 100%, 0 100%); z-index: 1; } .hair { --h: #df4b143b; --h: /*#27343c*/ #1b242b; --ha: #0a0b0f; position: absolute; inset: 0; background: linear-gradient(var(--ha) 0 0) 28% 88%/3% 10%, linear-gradient(var(--ha) 0 0) 27% 100%/4% 13%, linear-gradient(94deg, #0000 61%, var(--ha) 63% 86%,#0000 88%) 24% 75%/9% 22%, linear-gradient(to bottom right, #0000 59%, var(--ha) 61%) 25% 88%/3% 15%, radial-gradient(99% 82% at 110% 72%, var(--ha) 95%, #0000) 24% 100%/3% 12%, radial-gradient(35% 54% at 0 50%, var(--ha) 90%, #0000) 24% 66%/3% 20%, linear-gradient(105deg, var(--ha) 46%, #0000 48%) 21% 80%/7% 10%, linear-gradient(to bottom right, #0000 48%, var(--ha) 50%) 20.5% 65%/4% 20%, radial-gradient(237% 235% at -100% -100%, #0000 99%, var(--ha)) 12% 85%/8% 18%, radial-gradient(75% 76% at 100% 48%, #0000 98%, var(--ha)) 20% 100%/8% 18%, linear-gradient(to bottom right, #0000 49%, var(--ha) 50%) 17% 81%/5% 18%, linear-gradient(to bottom right, #0000 49%, var(--ha) 50%) 5% 100%/16% 22%, linear-gradient(96deg, #0000 55%, var(--ha) 56%) 77% 76%/4% 20%, radial-gradient(81% 58% at 100% 72%, var(--ha) 97%, #0.........完整代码请登录后点击上方下载按钮下载查看
网友评论0