{"html":"

\n \n

\n Johnathon
F. Stag\n

\n Professional human\n

\n I do human things such as exist, eat foot, and work.\n

","css":".card {\n position: relative;\n width: 190px;\n color: white;\n height: 260px;\n background: #444;\n border-radius: 14px;\n}\n\n.bg {\n position: absolute;\n z-index: -1;\n inset: -4px;\n border-radius: 16px;\n overflow: hidden;\n}\n\n.uwu {\n filter: blur(8px);\n transition: filter 0.3s;\n}\n\n.bg::before {\n content: '';\n position: absolute;\n aspect-ratio: 1/1;\n top: 50%;\n left: 50%;\n min-width: 150%;\n min-height: 150%;\n background-image: conic-gradient(\n hsl(0, 100%, 50%),\n hsl(30, 100%, 50%),\n hsl(60, 100%, 50%),\n hsl(90, 100%, 50%),\n hsl(120, 100%, 50%),\n hsl(150, 100%, 50%),\n hsl(180, 100%, 50%),\n hsl(210, 100%, 50%),\n hsl(240, 100%, 60%),\n hsl(270, 100%, 50%),\n hsl(300, 100%, 50%),\n hsl(330, 100%, 50%),\n hsl(360, 100%, 50%)\n );\n animation: speeen 4s linear infinite;\n transform-origin: 0% 0%;\n transform: rotate(0deg) translate(-50%, -50%);\n}\n\n@keyframes speeen {\n from {\n transform: rotate(0deg) translate(-50%, -50%);\n }\n\n to {\n transform: rotate(360deg) translate(-50%, -50%);\n }\n}\n\n.content {\n position: relative;\n padding: 14px 16px;\n}\n\n.img {\n height: 5em;\n width: 5em;\n margin: auto;\n background-color: #fff3;\n border-radius: 1em;\n}\n\n.img svg {\n height: 100%;\n fill: white;\n}\n\n.content div {\n text-align: center;\n}\n\n.h1 {\n margin-top: 1em;\n margin-bottom: 0.5em;\n font-size: 1em;\n font-weight: 600;\n}\n\n.p {\n font-size: 0.75em;\n}\n\n.p p {\n margin-top: 0.5em;\n padding: 0.5em;\n background-color: #0003;\n border-radius: 1em;\n}"}

swift-bullfrog-34

👁 实时预览

📝 源代码