{"html":"

Welcome To Uiverse

Contribute to Open Source UI Elements

","css":".notification {\n display: flex;\n flex-direction: column;\n isolation: isolate;\n position: relative;\n width: 18rem;\n height: 8rem;\n background: #29292c;\n border-radius: 1rem;\n overflow: hidden;\n font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;\n font-size: 16px;\n --gradient: linear-gradient(to bottom, #2eadff, #3d83ff, #7e61ff);\n --color: #32a6ff\n}\n\n.notification:before {\n position: absolute;\n content: \"\";\n inset: 0.0625rem;\n border-radius: 0.9375rem;\n background: #18181b;\n z-index: 2\n}\n\n.notification:after {\n position: absolute;\n content: \"\";\n width: 0.25rem;\n inset: 0.65rem auto 0.65rem 0.5rem;\n border-radius: 0.125rem;\n background: var(--gradient);\n transition: transform 300ms ease;\n z-index: 4;\n}\n\n.notification:hover:after {\n transform: translateX(0.15rem)\n}\n\n.notititle {\n color: var(--color);\n padding: 0.65rem 0.25rem 0.4rem 1.25rem;\n font-weight: 500;\n font-size: 1.1rem;\n transition: transform 300ms ease;\n z-index: 5;\n}\n\n.notification:hover .notititle {\n transform: translateX(0.15rem)\n}\n\n.notibody {\n color: #99999d;\n padding: 0 1.25rem;\n transition: transform 300ms ease;\n z-index: 5;\n}\n\n.notification:hover .notibody {\n transform: translateX(0.25rem)\n}\n\n.notiglow,\n.notiborderglow {\n position: absolute;\n width: 20rem;\n height: 20rem;\n transform: translate(-50%, -50%);\n background: radial-gradient(circle closest-side at center, white, transparent);\n opacity: 0;\n transition: opacity 300ms ease;\n}\n\n.notiglow {\n z-index: 3;\n}\n\n.notiborderglow {\n z-index: 1;\n}\n\n.notification:hover .notiglow {\n opacity: 0.1\n}\n\n.notification:hover .notiborderglow {\n opacity: 0.1\n}\n\n.note {\n color: var(--color);\n position: fixed;\n top: 80%;\n left: 50%;\n transform: translateX(-50%);\n text-align: center;\n font-size: 0.9rem;\n width: 75%;\n}"}

rude-tiger-29

👁 实时预览

📝 源代码