{"html":"

Uploading

\n\n

\n \n \n

\n","css":".upload {\n width: 360px;\n border-radius: 20px;\n border: 1px solid rgba(255, 255, 255, 0.1);\n background: rgba(255, 255, 255, 0.04);\n box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55);\n overflow: hidden;\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n font-family: ui-sans-serif, system-ui;\n}\n\n.up-head {\n display: grid;\n grid-template-columns: 42px 1fr auto;\n gap: 12px;\n padding: 14px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.06),\n rgba(255, 255, 255, 0.03)\n );\n align-items: center;\n}\n\n.icon {\n width: 42px;\n height: 42px;\n border-radius: 14px;\n background: radial-gradient(\n circle at 30% 25%,\n rgba(255, 255, 255, 0.18),\n rgba(255, 255, 255, 0.05) 45%,\n rgba(0, 0, 0, 0.22) 100%\n ),\n linear-gradient(\n 135deg,\n rgba(110, 231, 255, 0.35),\n rgba(176, 140, 255, 0.25)\n );\n border: 1px solid rgba(255, 255, 255, 0.12);\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);\n}\n\n.pill {\n font-size: 12px;\n padding: 8px 10px;\n border-radius: 999px;\n border: 1px solid rgba(255, 255, 255, 0.1);\n background: rgba(255, 255, 255, 0.04);\n color: rgba(255, 255, 255, 0.72);\n}\n\n.up-mid {\n padding: 14px;\n}\n\n.sk {\n height: 12px;\n border-radius: 999px;\n background: rgba(255, 255, 255, 0.06);\n border: 1px solid rgba(255, 255, 255, 0.07);\n margin: 10px 0;\n overflow: hidden;\n position: relative;\n}\n.sk-title {\n width: 62%;\n height: 13px;\n margin: 2px 0 8px;\n}\n.sk-sub {\n width: 44%;\n height: 11px;\n margin: 0;\n opacity: 0.9;\n}\n.sk-wide {\n width: 100%;\n}\n.sk-short {\n width: 62%;\n}\n\n.sk::before {\n content: \"\";\n position: absolute;\n inset: -40% -60%;\n background: linear-gradient(\n 110deg,\n transparent 0%,\n rgba(255, 255, 255, 0.1) 22%,\n rgba(255, 255, 255, 0.2) 30%,\n transparent 44%\n );\n transform: translateX(-60%);\n animation: shimmer 1.15s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;\n mix-blend-mode: screen;\n}\n\n.up-bar {\n height: 10px;\n margin: 2px 14px 14px;\n border-radius: 999px;\n position: relative;\n overflow: hidden;\n background: rgba(255, 255, 255, 0.06);\n border: 1px solid rgba(255, 255, 255, 0.09);\n}\n.up-bar .bar {\n position: absolute;\n inset: 0;\n background: linear-gradient(\n 90deg,\n rgba(110, 231, 255, 0),\n rgba(110, 231, 255, 0.55),\n rgba(176, 140, 255, 0.55),\n rgba(110, 231, 255, 0)\n );\n transform: translateX(-70%);\n animation: flow2 1.05s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;\n}\n.up-bar .shine {\n position: absolute;\n inset: -30% -40%;\n background: linear-gradient(\n 110deg,\n transparent 0%,\n rgba(255, 255, 255, 0.12) 22%,\n rgba(255, 255, 255, 0.28) 28%,\n transparent 40%\n );\n transform: translateX(-55%);\n animation: glint2 1.05s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;\n mix-blend-mode: screen;\n}\n\n@keyframes shimmer {\n to {\n transform: translateX(60%);\n }\n}\n@keyframes flow2 {\n 0% {\n transform: translateX(-75%);\n opacity: 0.55;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: translateX(75%);\n opacity: 0.55;\n }\n}\n@keyframes glint2 {\n 0% {\n transform: translateX(-60%);\n opacity: 0;\n }\n 20% {\n opacity: 1;\n }\n 100% {\n transform: translateX(60%);\n opacity: 0;\n }\n}\n"}

tough-puma-45

👁 实时预览

📝 源代码