{"html":"

Buzz Lightyear

\n\n

\n To infinity... and beyond! Having a great time exploring the outer\n sectors.\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: #f0e4d4;\n font-family: \"Arial Rounded MT Bold\", \"Helvetica Rounded\", Arial, sans-serif;\n}\n\n.pixar-card {\n --ui-blue: #5c99e2;\n --ui-blue-shadow: #3b76c0;\n --ui-green: #61c470;\n --ui-green-shadow: #45a253;\n --ui-red: #e65e5e;\n --ui-red-shadow: #c14242;\n --ui-cream: #f5f1e8;\n --ui-cream-shadow: #c7c1b5;\n --ui-dark: #4d4c4a;\n --button-press-depth: 0.15em;\n\n position: relative;\n width: 19em;\n max-width: 300px;\n max-height: 400px;\n background-color: var(--ui-cream);\n border-radius: 1.5em;\n padding: 1.2em;\n border: 0.2em solid var(--ui-dark);\n box-shadow: 0.6em 0.6em 0 var(--ui-dark);\n display: flex;\n flex-direction: column;\n transition:\n transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),\n box-shadow 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n\n.pixar-card:hover {\n transform: translateY(-0.5em) rotate(-2deg);\n box-shadow: 0.8em 0.8em 0 var(--ui-dark);\n}\n\n.card-header {\n display: flex;\n align-items: center;\n margin-bottom: 1em;\n}\n\n.card-avatar {\n width: 3.5em;\n height: 3.5em;\n border-radius: 50%;\n background: linear-gradient(45deg, #f9a86d, #f48a58);\n border: 0.2em solid var(--ui-dark);\n box-shadow: 0.2em 0.2em 0 var(--ui-dark);\n flex-shrink: 0;\n transition: transform 0.3s ease;\n}\n\n.pixar-card:hover .card-avatar {\n transform: scale(1.05) rotate(5deg);\n}\n\n.card-username {\n margin: 0 0 0 0.8em;\n font-size: 1.2em;\n font-weight: 700;\n color: var(--ui-dark);\n}\n\n.card-image-area {\n background-color: #d8d2c6;\n border-radius: 1em;\n padding: 0.8em;\n border: 0.2em solid var(--ui-dark);\n box-shadow: inset 0.2em 0.2em 0 #b3ac9f;\n}\n\n.card-image-placeholder {\n width: 100%;\n height: 5em;\n border-radius: 0.6em;\n background: linear-gradient(135deg, var(--ui-blue), #8cb9e8);\n border: 0.2em solid var(--ui-dark);\n transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.pixar-card:hover .card-image-placeholder {\n transform: scale(1.03);\n}\n\n.card-caption {\n margin: 1em 0 0 0;\n font-size: 0.9em;\n line-height: 1.4;\n color: var(--ui-dark);\n font-weight: 600;\n}\n\n.card-actions {\n display: flex;\n justify-content: space-around;\n margin-top: 1.5em;\n}\n\n.action-button {\n background: var(--ui-green);\n border: 0.2em solid var(--ui-dark);\n border-radius: 1em;\n padding: 0.5em;\n cursor: pointer;\n box-shadow:\n 0 var(--button-press-depth) 0 var(--ui-green-shadow),\n 0 0.4em 0 var(--ui-dark);\n transition:\n transform 0.1s ease,\n box-shadow 0.1s ease;\n}\n\n.action-button:active {\n transform: translateY(var(--button-press-depth));\n box-shadow:\n 0 0 0 var(--ui-green-shadow),\n 0 var(--button-press-depth) 0 var(--ui-dark);\n}\n\n.like-button {\n background: var(--ui-red);\n box-shadow:\n 0 var(--button-press-depth) 0 var(--ui-red-shadow),\n 0 0.4em 0 var(--ui-dark);\n}\n\n.like-button:active {\n box-shadow:\n 0 0 0 var(--ui-red-shadow),\n 0 var(--button-press-depth) 0 var(--ui-dark);\n}\n\n.action-button-icon {\n width: 1.8em;\n height: 1.8em;\n stroke: var(--ui-dark);\n stroke-width: 2.5;\n fill: none;\n stroke-linecap: round;\n stroke-linejoin: round;\n display: block;\n}\n"}

selfish-deer-16

👁 实时预览

📝 源代码