{"html":"

Captain Creative

@TheInker

\n\n

\n MEANWHILE... I've discovered a new source of ultimate creative power!\n

\n\n

\n \n \n \n

\n","css":".card-container {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n background-color: #f2f2f2;\n font-family: Impact, Haettenschweiler, \"Arial Narrow Bold\", sans-serif;\n}\n\n.comic-card {\n --paper-white: #fefae8;\n --primary-yellow: #ffd900;\n --accent-red: #d92b2b;\n --accent-blue: #2b80d9;\n --ink-black: #212121;\n --border-stroke: 0.15em;\n --dot-color: rgba(0, 0, 0, 0.2);\n\n position: relative;\n display: flex;\n flex-direction: column;\n width: 18em;\n max-width: 333px;\n max-height: 444px;\n background-color: var(--paper-white);\n border: var(--border-stroke) solid var(--ink-black);\n border-radius: 0.5em;\n padding: 1em;\n box-shadow: 0.5em 0.5em 0 var(--ink-black);\n transition:\n transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),\n box-shadow 0.2s ease;\n transform-origin: bottom left;\n}\n\n.comic-card:hover {\n transform: translateY(-0.6em) rotate(-2deg);\n box-shadow: 0.8em 0.8em 0 0.1em var(--accent-red);\n}\n\n.card-header {\n display: flex;\n align-items: center;\n margin-bottom: 0.8em;\n}\n\n.card-avatar {\n width: 3.5em;\n height: 3.5em;\n border-radius: 50%;\n background: linear-gradient(45deg, var(--accent-blue), #6ba9e4);\n border: var(--border-stroke) solid var(--ink-black);\n flex-shrink: 0;\n transition: transform 0.3s ease;\n}\n\n.comic-card:hover .card-avatar {\n transform: scale(1.1);\n}\n\n.card-user-info {\n margin-left: 0.8em;\n text-transform: uppercase;\n}\n\n.card-username {\n margin: 0;\n font-size: 1.2em;\n font-weight: 300;\n color: var(--ink-black);\n background-color: var(--primary-yellow);\n padding: 0.1em 0.5em;\n clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);\n letter-spacing: 1px;\n}\n\n.card-handle {\n margin: 0.2em 0 0 0;\n font-size: 0.8em;\n color: var(--ink-black);\n font-weight: 100;\n letter-spacing: 2px;\n}\n\n.card-content {\n flex-grow: 1;\n}\n\n.card-image-container {\n width: 100%;\n height: 9em;\n border-radius: 0.2em;\n border: var(--border-stroke) solid var(--ink-black);\n overflow: hidden;\n background-color: var(--accent-blue);\n background-image: radial-gradient(\n circle,\n var(--dot-color) 0.05em,\n transparent 0.05em\n );\n background-size: 0.5em 0.5em;\n background-position:\n 0 0,\n 0.25em 0.25em;\n transition: transform 0.3s ease;\n}\n\n.comic-card:hover .card-image-container {\n transform: skewX(-3deg) scale(1.02);\n}\n\n.card-caption {\n position: relative;\n margin: 0.8em 0;\n padding: 0.6em 0.8em;\n background-color: var(--paper-white);\n border: var(--border-stroke) solid var(--ink-black);\n border-radius: 0.5em;\n font-size: 0.9em;\n line-height: 1.3;\n color: var(--ink-black);\n}\n\n.card-caption::after {\n content: \"\";\n position: absolute;\n bottom: -0.6em;\n left: 1.5em;\n width: 0;\n height: 0;\n border: 0.5em solid var(--ink-black);\n border-color: var(--ink-black) transparent transparent transparent;\n}\n\n.card-caption::before {\n content: \"\";\n position: absolute;\n bottom: -0.4em;\n left: 1.6em;\n width: 0;\n height: 0;\n border: 0.4em solid var(--paper-white);\n border-color: var(--paper-white) transparent transparent transparent;\n}\n\n.card-actions {\n display: flex;\n justify-content: space-around;\n margin-top: auto;\n padding-top: 0.5em;\n}\n\n.action-button {\n background-color: var(--primary-yellow);\n border: var(--border-stroke) solid var(--ink-black);\n padding: 0.5em;\n cursor: pointer;\n border-radius: 0.5em;\n box-shadow: 0.2em 0.2em 0 var(--ink-black);\n transition:\n transform 0.1s ease,\n box-shadow 0.1s ease,\n background-color 0.2s ease;\n}\n\n.action-button:hover {\n background-color: var(--accent-red);\n}\n\n.action-button:active {\n transform: translate(0.2em, 0.2em);\n box-shadow: none;\n}\n\n.action-button-icon {\n width: 1.3em;\n height: 1.3em;\n stroke-width: 3;\n stroke: var(--ink-black);\n fill: none;\n stroke-linecap: round;\n stroke-linejoin: round;\n display: block;\n}\n\n.action-button:hover .action-button-icon {\n stroke: var(--paper-white);\n}\n\n.like-button:hover .action-button-icon {\n fill: var(--paper-white);\n}\n"}

white-starfish-90

👁 实时预览

📝 源代码