{"html":"

Uiverse

1m ago

Message

Uiverse

1m ago

Message

Uiverse

1m ago

Message

Uiverse

1m ago

Message

Uiverse

1m ago

Message

\n","css":".card {\n width: fit-content;\n height: 320px;\n background: #fff;\n box-shadow: 0px 1px 32px 8px rgba(0, 0, 0, 0.05);\n border-radius: 0.875rem;\n padding: 1.5rem;\n -webkit-user-drag: none;\n font-family:\n ui-sans-serif,\n system-ui,\n -apple-system,\n BlinkMacSystemFont,\n Segoe UI,\n Roboto,\n Noto Sans,\n Ubuntu,\n Cantarell,\n Helvetica Neue,\n Arial,\n sans-serif,\n Apple Color Emoji,\n Segoe UI Emoji,\n Segoe UI Symbol,\n Noto Color emoji;\n overflow: hidden;\n --delay: 150ms;\n}\n\n.messages {\n width: 280px;\n}\n\n.message {\n width: 280px;\n border: 1.5px solid rgba(0, 0, 0, 0.08);\n border-radius: 0.5rem;\n padding: 1rem 1.25rem;\n display: flex;\n gap: 1rem;\n transform: scale(0);\n height: 0;\n box-shadow: 0px 4px 16px 8px rgba(0, 0, 0, 0.03);\n animation: show-message 200ms forwards;\n transform-origin: top center;\n visibility: hidden;\n transition: all 0.2s ease-in-out;\n cursor: pointer;\n}\n\n.message:hover {\n box-shadow: 0px 3px 16px 8px rgba(0, 0, 0, 0.07);\n transform: translateY(-2px) scale(1.1);\n}\n\n.message-icon {\n background: linear-gradient(135deg, rgb(255, 137, 176), rgb(126, 93, 255));\n width: 2.5rem;\n height: 2.5rem;\n min-width: 2.5rem;\n min-height: 2.5rem;\n border-radius: 1rem;\n}\n\n.message:nth-child(1) {\n animation-delay: calc(4 * var(--delay));\n}\n\n.message:nth-child(2) {\n animation-delay: calc(3 * var(--delay));\n}\n\n.message:nth-child(3) {\n animation-delay: calc(2 * var(--delay));\n}\n\n.message:nth-child(4) {\n animation-delay: var(--delay);\n}\n\n.message:nth-child(2) .message-icon {\n background: linear-gradient(180deg, rgb(242, 124, 40), rgb(255, 69, 243));\n}\n\n.message:nth-child(3) .message-icon {\n background: linear-gradient(90deg, rgb(242, 212, 40), rgb(255, 56, 56));\n}\n\n.message:nth-child(4) .message-icon {\n background: linear-gradient(45deg, rgb(70, 197, 255), rgb(64, 64, 255));\n}\n\n.message:nth-child(5) .message-icon {\n background: linear-gradient(45deg, rgb(247, 158, 85), rgb(231, 38, 249));\n}\n\n.message-info {\n display: flex;\n flex-direction: column;\n}\n\n.message-header {\n display: flex;\n flex-direction: row;\n align-items: flex-end;\n line-height: 1;\n user-select: none;\n -webkit-user-select: none;\n}\n\n.message-title {\n font-size: 1rem;\n font-weight: 600;\n}\n\n.message-time {\n font-size: 0.875rem;\n color: #454545;\n}\n\n.message-time::before {\n content: \"•\";\n margin: 0 0.25rem;\n font-size: 0.875rem;\n color: #454545;\n}\n\n.message-content {\n margin-top: 0.5rem;\n line-height: 1;\n text-overflow: ellipsis;\n white-space: wrap;\n font-weight: 300;\n}\n\n@keyframes show-message {\n 0% {\n transform: scale(0);\n margin-bottom: 0;\n visibility: visible;\n }\n 100% {\n transform: scale(1);\n height: 100%;\n margin-bottom: 1rem;\n visibility: visible;\n }\n}\n"}

heavy-fox-66

👁 实时预览

📝 源代码