{"html":"

\n","css":".article {\n --fur: #aac;\n --detail: #222;\n --mouth: radial-gradient(49% 55% at 50% 89%, #0000, #c001 40%, #0000 0),\n radial-gradient(50% 50% at 50% 88%, #fff 38%, #0000, #00000003 40%, #0000 0),\n linear-gradient(130deg, #bbc0cc88, #bbccc000),\n linear-gradient(-130deg, #0081, #0080),\n linear-gradient(#0084 10%, #0000 50%);\n --dots: radial-gradient(circle, #0001 0.1em, #0000 0) 1em 1em / 3em 7em,\n radial-gradient(circle, #0001 0.1em, #0000 0) 1em 1em / 7em 3em,\n radial-gradient(circle, #0001 0.1em, #0000 0) 1em 1em / 11em 13em,\n radial-gradient(circle, #fff2 0.1em, #0000 0) 1em 1em / 13em 11em,\n radial-gradient(circle, #fff3 0.1em, #0000 0) 1em 1em / 5em 5em,\n radial-gradient(circle, #fff4 0.1em, #0000 0) 1em 1em / 4em 9em;\n --light: radial-gradient(at 35% 30%, #fff5, #fff0 40%),\n radial-gradient(at 45% 40%, #fff6, #fff0 70%);\n position: relative;\n font-size: 1vmin;\n width: 80em;\n aspect-ratio: 1;\n transform: scale(0.5);\n animation: floating 5s ease-in-out infinite;\n\n .body {\n width: 63%;\n height: 45%;\n left: 50%;\n translate: -50%;\n top: 50%;\n\n .shadow {\n width: 120%;\n height: 33%;\n background: radial-gradient(#0009, #0000 50%),\n radial-gradient(60% 100% at 26% 40%, #0009, #0000 30%),\n radial-gradient(60% 100% at 75% 45%, #0009, #0000 30%),\n radial-gradient(#8001 30%, #8000 50%),\n radial-gradient(#0082 40%, #0084 60%), #0003;\n opacity: 0.6;\n border-radius: 50%;\n bottom: 2%;\n left: 53%;\n transform: translate(-50%, 14%);\n filter: blur(1.2em);\n }\n\n .chest {\n --mouth: radial-gradient(49% 55% at 50% 70%, #0000, #c001 80%, #0000 0),\n radial-gradient(\n 50% 55% at 50% 69%,\n #fff 78%,\n #0000,\n #00000003 80%,\n #0000 0\n ),\n linear-gradient(130deg, #bbc0cc88, #bbccc000),\n linear-gradient(-130deg, #0081, #0080),\n linear-gradient(#0084 10%, #0000 50%);\n left: 50%;\n translate: -50%;\n border-radius: 100% / 155% 155% 56% 56%;\n width: 60%;\n height: 90%;\n box-shadow:\n inset 0 40em 4em -25em #8003,\n inset 0 40em 6em -26em #0083,\n inset 0 43em 5em -28em #0004,\n inset 0 48em 2em -35em #0006,\n inset 0 0 4em -2.75em,\n inset -4em 0 4em -2em #0083,\n inset 0 -6em 8em -4em #8004,\n inset 0 -4em 4em -2em #0083,\n inset 1em 1em 3em #fff5;\n background: radial-gradient(60% 100% at 50% 80%, #0000 40%, #3002),\n radial-gradient(10% 5% at 50% 0, #0001, #0000 80%), var(--dots),\n var(--light), var(--mouth), var(--fur);\n\n .arm {\n width: 30%;\n height: 70%;\n border-radius: 100% / 100% 20% 40% 100%;\n bottom: 7%;\n left: 0;\n rotate: -10deg;\n background: linear-gradient(200deg, #400c, #0000 30%),\n radial-gradient(200% 80% at 65% 5%, #6003 5%, #0080 25%),\n radial-gradient(200% 70% at 80% 10%, #0082, #0080 40%),\n radial-gradient(60% 100% at 50% 80%, #0000 40%, #3002),\n radial-gradient(10% 5% at 50% 0, #0001, #0000 80%), var(--dots),\n var(--fur);\n box-shadow:\n inset 0 0 5em -2.75em,\n inset -4em 0 4em -2em #0083,\n inset 0 -6em 8em -4em #8004,\n inset 0 -4em 4em -2em #0083,\n inset 1em 1em 3em #fff5,\n 0 0.75em 0.5em #0002;\n filter: drop-shadow(1em 1.5em 1em #8004)\n drop-shadow(1.25em 2em 1.5em #0074);\n\n & ~ & {\n scale: -1 1;\n rotate: 12deg;\n left: auto;\n right: 3%;\n /* rotate: 15deg;\n right: 5%; */\n\n box-shadow:\n inset 0 0 5em -2.75em,\n inset 4em 0 4em -2em #0083,\n inset 0 -6em 8em -4em #8004,\n inset 0 -4em 4em -2em #0083,\n inset 1em 1em 3em #fff5,\n 0 0.75em 0.5em #0002;\n }\n }\n\n .leg {\n width: 53%;\n height: 40%;\n background: #f005;\n bottom: 0;\n transform: translate(-50%, -10%) rotate(-20deg);\n transform-origin: 80% 50%;\n left: -8%;\n border-radius: 10em 90% 40% 10em;\n box-shadow:\n inset 0 0 4em -2.75em,\n inset -4em 0 4em -2em #0083,\n inset 0 -6em 8em -4em #8004,\n inset 0 -4em 4em -2em #0083,\n inset 1em 1em 3em #fff5;\n --light: radial-gradient(at 35% 30%, #fff2, #fff0 40%),\n radial-gradient(at 45% 40%, #fff3, #fff0 70%);\n background:\n radial-gradient(60% 100% at 50% 80%, #0000 40%, #3002),\n radial-gradient(10% 5% at 50% 0, #0001, #0000 80%),\n var(--dots),\n var(--light),\n /* radial-gradient(30% 40% at 30% 50%, pink 80%, #0000 0), */\n var(--fur);\n\n &::before {\n --s1: 0.75em 0.6em 1.5em -1.25em #3007, 1em 0.5em 1.5em -1em #3007;\n --s2: inset -1.5em -0.5em 0.35em -0.75em #4002,\n inset -1.5em 0.5em 0.25em -0.75em #4002;\n --c1: #e99;\n content: \"\";\n width: 45%;\n height: 70%;\n background: pink;\n top: 50%;\n left: -4%;\n\n border-radius: 50%;\n transform: translate(0%, -50%) rotate(6deg);\n background: radial-gradient(at 35% 40%, #fff8 10%, #fff0), var(--c1);\n box-shadow:\n inset 0 0 0.25em #4008,\n inset 0.25em 0.1em 0.5em 0.1em #fff8,\n inset 0.5em 0.25em 0.75em #c002,\n var(--s2),\n inset 0 0 1em 0.5em #f553,\n var(--s1),\n 0.75em 0 0.5em 0.25em #0083,\n 1em 0 0.5em 0.25em #fff4;\n }\n\n &::after {\n acontent: \"\";\n inset: 0;\n border-radius: 10em 90% 40% 10em;\n box-shadow:\n inset 0 0 4em -2.75em,\n inset -4em 0 4em -2em #0083,\n inset 0 -6em 8em -4em #8004,\n inset 0 -4em 4em -2em #0083,\n inset 1em 1em 3em #fff5;\n }\n\n & ~ & {\n left: auto;\n right: 0;\n transform: scaleX(-1) translate(-5%, -10%) rotate(-20deg);\n clip-path: polygon(0 0, 80% 0, 85% 100%, 0 100%);\n mask: radial-gradient(47% 80% at 118% 42%, #0000 60%, #000);\n /* radial-gradient(25% 160% at 100% 0, #0000 70%, #000) */\n background: radial-gradient(60% 100% at 50% 80%, #0000 40%, #3002),\n radial-gradient(10% 5% at 50% 0, #0001, #0000 80%), var(--dots),\n var(--light), radial-gradient(60% 50% at 30% 50%, #0082 60%, #0000),\n var(--fur);\n\n box-shadow:\n inset 0 0 4em -2.75em,\n inset -4em 0 4em -2em #0083,\n inset 0 -6em 8em -4em #8004,\n inset 0 -4em 4em -2em #0083,\n inset 1em 1em 3em #fff5,\n inset 3em 0 4em #0084;\n &::before {\n --c1: #d88;\n --s1: 0.75em 1em 1.5em -1.25em #3007, 1em 0.5em 1.5em -1em #3007;\n --s2: inset -1.5em -0.5em 0.35em -0.75em #4002,\n inset -0.5em -1em 0.5em -0.5em #4002;\n background: radial-gradient(at 35% 40%, #fff6, #fff0), var(--c1);\n }\n }\n }\n }\n }\n\n .head {\n width: 63%;\n height: 59%;\n left: 50%;\n top: 5%;\n translate: -50%;\n\n .ear {\n --pos: -5%;\n top: 20%;\n left: var(--pos);\n width: 55%;\n aspect-ratio: 1;\n background: pink;\n border-radius: 50%;\n transform: translate(-50%, -50%);\n box-shadow:\n inset 0 0 4em -2.75em,\n inset -4em 0 4em -2em #0082,\n inset 0 -6em 8em -4em #8001,\n inset 0 -4em 4em -2em #0082,\n inset 1em 1em 3em #fff5;\n background: \n/* radial-gradient(60% 100% at 50% 80%, #0000 40%, #3002), */ radial-gradient(\n 10% 5% at 50% 0,\n #0001,\n #0000 80%\n ),\n var(--dots), var(--light), var(--fur);\n\n &::after {\n content: \"\";\n inset: 0;\n border-radius: inherit;\n box-shadow: inherit;\n background: radial-gradient(60% 65% at 105% 90%, #8005 0%, #0000 90%),\n radial-gradient(60% 65% at 110% 95%, #0085 0%, #0000 95%),\n radial-gradient(65% 70% at 110% 95%, #0005 0%, #0000);\n }\n\n &::before {\n content: \"\";\n --pos: 55%;\n --s1: 0.75em 0.6em 1.5em -1.25em #3007, 1em 0.5em 1.5em -1em #3007;\n --s2: inset -1.5em -0.5em 0.35em -0.75em #4002,\n inset -1.5em 0.5em 0.25em -0.75em #4002;\n --c1: #e99;\n width: 75%;\n aspect-ratio: 1;\n border-radius: 50% 45% 55% 50%;\n top: 54%;\n left: var(--pos);\n transform: translate(-50%, -50%) rotate(25deg);\n background: radial-gradient(at 35% 40%, #fff8 10%, #fff0), var(--c1);\n box-shadow:\n inset 0 0 0.25em #4008,\n inset 0.25em 0.1em 0.5em 0.1em #fff8,\n inset 0.5em 0.25em 0.75em #c002,\n var(--s2),\n inset 0 0 1em 0.5em #f553,\n var(--s1);\n }\n\n & ~ & {\n left: calc(100% - var(--pos));\n\n &::after {\n scale: -1 1;\n box-shadow:\n inset 0 0 4em -2.75em,\n inset 4em 0 4em -2em #0082,\n inset 0 -6em 8em -4em #8001,\n inset 0 -4em 4em -2em #0082,\n inset 1em 1em 3em #fff5;\n }\n\n &::before {\n left: calc(100% - var(--pos));\n transform: translate(-50%, -50%) rotate(-25deg);\n --c1: #d88;\n --s1: 0.75em 1em 1.5em -1.25em #3007, 1em 0.5em 1.5em -1em #3007;\n --s2: inset -1.5em -0.5em 0.35em -0.75em #4002,\n inset -0.5em -1em 0.5em -0.5em #4002;\n background: radial-gradient(at 35% 40%, #fff6, #fff0), var(--c1);\n\n border-radius: 50%;\n }\n }\n }\n\n .face {\n inset: 0;\n border-radius: 100% / 128% 130% 70% 70%;\n box-shadow:\n inset 0 0 4em -2.75em,\n inset -4em 0 4em -2em #0083,\n inset 0 -6em 8em -4em #8004,\n inset 0 -4em 4em -2em #0083,\n inset 1em 1em 3em #fff5;\n background: radial-gradient(60% 100% at 50% 80%, #0000 40%, #3002),\n radial-gradient(10% 5% at 50% 0, #0001, #0000 80%), var(--dots),\n var(--light), var(--mouth), var(--fur);\n\n .hair {\n width: 15%;\n height: 6%;\n background: var(--fur);\n border-radius: 50%;\n left: 50%;\n top: -4%;\n transform: translate(-80%, 0) rotate(10deg);\n box-shadow:\n inset 0 0 1em 0em #0001,\n inset 0.4em 0 0.2em 0.2em #0081,\n inset 0 0.6em 0.4em 0.4em #8001,\n inset 0 0.4em 0.2em 0.2em #0081,\n inset 0.1em 0.1em 1em #fff5;\n --light: radial-gradient(at 35% 30%, #fff2, #fff0 30%),\n radial-gradient(at 45% 40%, #fff4, #fff0 70%);\n background: var(--light), var(--fur);\n\n &::before {\n content: \"\";\n inset: 0;\n background: inherit;\n border-radius: 50%;\n transform-origin: 90% 50%;\n transform: rotate(45deg);\n box-shadow: inherit;\n mix-blend-mode: lighten;\n }\n }\n\n .nose {\n width: 22%;\n height: 35%;\n top: 62%;\n left: 50%;\n translate: -50% -50%;\n border-radius: 100% / 120% 120% 66% 66%;\n box-shadow:\n inset 0 0 4em -1.5em,\n inset 2em 2em 1.5em -1.5em #fff5,\n inset -5em 0 4em -4em #0088,\n 0 0 1em #0004,\n 1em 1em 2em -1em #3007,\n 1.5em 0.75em 2em -0.75em #3007;\n background: radial-gradient(at 35% 30%, #fff5, #fff0 36%),\n radial-gradient(at 40% 40%, #fff4, #fff0 60%), var(--detail);\n }\n\n .eye {\n --pos: 26%;\n --c1: #fff7;\n --p1: 35%;\n --b1: 1.25em -1.5em 0.75em #0000660c, 0.25em -1em 2em 2em #0061;\n --b2: 0.125em 0em 0.5em 0.5em #0001, 0 0 0.3em 0.85em #fff2;\n width: 16%;\n aspect-ratio: 1;\n border-radius: 50%;\n translate: -50% -50%;\n top: 57%;\n left: var(--pos);\n box-shadow:\n inset 0 0 4em -1.5em,\n inset 0 -2em 1em -0.5em #c003,\n inset -2em 0 1em -1em #00c3,\n inset 2em 2em 1.5em -1.5em #fff5,\n inset -5em 0 4em -4em #c003,\n inset -5em 0 4em -4em #0088,\n 0 0 1em #0004,\n var(--b2),\n 0.5em 1em 2em -1em #3007,\n 0.75em 0.5em 2em -0.75em #3007,\n var(--b1);\n background: radial-gradient(\n var(--p1) 35% at 35% 30%,\n var(--c1) 10%,\n #fff0\n ),\n radial-gradient(at 40% 40%, #fff4, #fff0 60%), var(--detail);\n\n & ~ & {\n --c1: #fff5;\n --p1: 50%;\n --b1: -1.25em -1.5em 0.75em #0000660c, 0.25em -1em 2em 2em #00006608;\n left: calc(100% - var(--pos));\n }\n }\n\n .mouth {\n width: 14%;\n aspect-ratio: 2.5;\n border-radius: 50% / 0 0 100% 100%;\n border: 0.5em solid #900;\n border-top: 0;\n top: 83%;\n left: 50%;\n translate: -50% -50%;\n clip-path: polygon(\n 0 40%,\n 10% 30%,\n 90% 30%,\n 100% 40%,\n 150% 40%,\n 150% 150%,\n 0 150%\n );\n /* mask: radial-gradient(farthest-side at 50% 100%, #000 99%, #0000); */\n filter: drop-shadow(0.1em 0.1em 0.2em #800c)\n drop-shadow(-0.1em -0.1em 0.1em #fff);\n }\n\n .cheek {\n --pos: 18%;\n --s1: 0.75em 0.6em 1.5em -1.25em #3007, 1em 0.5em 1.5em -1em #3007;\n --s2: inset -1.5em -0.5em 0.35em -0.75em #4002,\n inset -1.5em 0.5em 0.25em -0.75em #4002;\n --c1: #e99;\n width: 20%;\n height: 14%;\n border-radius: 50% 45% 55% 50%;\n top: 75%;\n left: var(--pos);\n transform: translate(-50%, -50%) rotate(25deg);\n background: radial-gradient(at 35% 40%, #fff8 10%, #fff0), var(--c1);\n box-shadow:\n inset 0 0 0.25em #4008,\n inset 0.25em 0.1em 0.5em 0.1em #fff8,\n inset 0.5em 0.25em 0.75em #c002,\n var(--s2),\n inset 0 0 1em 0.5em #f553,\n var(--s1);\n\n & ~ & {\n left: calc(100% - var(--pos));\n transform: translate(-50%, -50%) rotate(-25deg);\n --c1: #d88;\n --s1: 0.75em 1em 1.5em -1.25em #3007, 1em 0.5em 1.5em -1em #3007;\n --s2: inset -1.5em -0.5em 0.35em -0.75em #4002,\n inset -0.5em -1em 0.5em -0.5em #4002;\n background: radial-gradient(at 35% 40%, #fff6, #fff0), var(--c1);\n }\n }\n }\n }\n}\n\n.article .body,\n.article .shadow,\n.article .chest,\n.article .chest .arm,\n.article .chest .leg,\n.article .head,\n.article .head .ear,\n.article .head .face,\n.article .head .face .eye,\n.article .head .face .nose,\n.article .head .face .cheek,\n.article .head .face .mouth,\n.article .head .face .hair,\n.article .head .face .hair::before,\n.article .head .ear::before,\n.article .head .ear::after,\n.article .chest .leg::before,\n.article .chest .leg::after,\n.article .head .face .cheek::before,\n.article .head .face .cheek::after,\n.article .head .face .eye::before,\n.article .head .face .eye::after {\n position: absolute;\n box-sizing: border-box;\n}\n\n@keyframes floating {\n 0% {\n transform: translateY(50px) scale(0.5);\n }\n 50% {\n transform: translateY(0px) scale(0.5);\n }\n 100% {\n transform: translateY(50px) scale(0.5);\n }\n}\n"}

brave-shrimp-47

👁 实时预览

📝 源代码