{"html":"\n","css":"/* Entire component scoped under .stat-widget to avoid global selectors */\n.stat-widget {\n display: flex;\n flex-direction: column;\n gap: 22px;\n padding: 28px;\n min-height: 140px;\n align-items: center;\n justify-content: center;\n font-family:\n Inter,\n system-ui,\n -apple-system,\n \"Segoe UI\",\n Roboto,\n \"Helvetica Neue\",\n Arial;\n perspective: 900px; /* gives 3D depth for children */\n}\n\n.stat-widget .stat-pill {\n width: 320px;\n height: 96px;\n border-radius: 48px;\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.03),\n rgba(255, 255, 255, 0.01)\n );\n box-shadow:\n 0 8px 18px rgba(0, 0, 0, 0.6),\n inset 0 1px 0 rgba(255, 255, 255, 0.02);\n display: flex;\n align-items: center;\n gap: 16px;\n padding: 14px 20px;\n position: relative;\n transform-style: preserve-3d;\n transition:\n transform 300ms cubic-bezier(0.2, 0.9, 0.3, 1),\n box-shadow 300ms;\n cursor: pointer;\n user-select: none;\n border: none;\n outline: none;\n background-clip: padding-box;\n}\n\n.stat-widget .stat-pill:before {\n content: \"\";\n position: absolute;\n left: 0;\n right: 0;\n top: 6px;\n height: 36px;\n border-radius: 48px 48px 0 0;\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.03),\n rgba(255, 255, 255, 0)\n );\n pointer-events: none;\n mix-blend-mode: overlay;\n}\n\n.stat-widget .ring-wrap {\n width: 64px;\n height: 64px;\n position: relative;\n flex: 0 0 64px;\n transform-style: preserve-3d;\n}\n\n/* Ring has a rotating transform to simulate fill animation (CSS-only) */\n.stat-widget .ring {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n display: grid;\n place-items: center;\n box-shadow:\n 0 6px 12px rgba(0, 0, 0, 0.4),\n inset 0 -6px 18px rgba(0, 0, 0, 0.35);\n transform-origin: 50% 50%;\n transition: transform 350ms cubic-bezier(0.2, 0.9, 0.3, 1);\n will-change: transform;\n /* animation: rotateIn to give impression of progress filling */\n animation: ringRotate 900ms cubic-bezier(0.2, 0.9, 0.3, 1) both;\n}\n\n.stat-widget .ring .core {\n width: 46px;\n height: 46px;\n border-radius: 50%;\n background: rgba(0, 0, 0, 0.55);\n display: grid;\n place-items: center;\n color: #fff;\n font-weight: 600;\n font-size: 12px;\n letter-spacing: -0.02em;\n box-shadow:\n 0 2px 6px rgba(0, 0, 0, 0.6),\n inset 0 1px 0 rgba(255, 255, 255, 0.02);\n}\n\n.stat-widget .meta {\n color: #e9eef9;\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 6px;\n transform: translateZ(6px);\n}\n.stat-widget .meta .value {\n font-size: 20px;\n font-weight: 700;\n line-height: 1;\n}\n.stat-widget .meta .label {\n font-size: 12px;\n color: rgba(255, 255, 255, 0.65);\n font-weight: 500;\n}\n\n/* ground shadow for 3D depth */\n.stat-widget .stat-pill .ground-shadow {\n position: absolute;\n left: 10px;\n right: 10px;\n bottom: -12px;\n height: 14px;\n border-radius: 50%;\n filter: blur(18px);\n opacity: 0.45;\n pointer-events: none;\n background: linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.35));\n transform: translateZ(-40px);\n transition: opacity 220ms;\n}\n\n.stat-widget .stat-pill:hover .ground-shadow {\n opacity: 0.9;\n}\n\n/* hover/active tilt purely with CSS to create 3D interaction */\n.stat-widget .stat-pill:hover {\n transform: translateY(-10px) rotateX(6deg) rotateY(8deg) scale(1.01);\n box-shadow: 0 18px 40px rgba(2, 6, 23, 0.6);\n}\n.stat-widget .stat-pill:active {\n transform: translateY(-4px) rotateX(2deg) rotateY(3deg) scale(0.995);\n transition-duration: 120ms;\n}\n\n.stat-widget .stat-pill:focus {\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);\n}\n\n/* subtle breathing animation for the pill itself */\n@keyframes floaty {\n 0% {\n transform: translateY(0) translateZ(0);\n }\n 50% {\n transform: translateY(-4px) translateZ(4px);\n }\n 100% {\n transform: translateY(0) translateZ(0);\n }\n}\n.stat-widget .stat-pill {\n animation: floaty 4200ms ease-in-out infinite;\n}\n\n/* ring rotate animation to simulate fill */\n@keyframes ringRotate {\n 0% {\n transform: rotate(-120deg);\n }\n 70% {\n transform: rotate(8deg);\n }\n 100% {\n transform: rotate(0deg);\n }\n}\n\n/* color variants: the conic-gradient is hard-coded to show a desired percentage\n 67% => angle 241.2deg (67*3.6)\n 72% => angle 259.2deg (72*3.6)\n */\n\n.stat-widget .stat-pill.variant-green .ring {\n background-image: conic-gradient(\n #2ee6a6 0deg,\n #2ee6a6 241.2deg,\n rgba(255, 255, 255, 0.06) 241.2deg 360deg\n );\n}\n\n.stat-widget .stat-pill.variant-pink .ring {\n background-image: conic-gradient(\n #ff6ad5 0deg,\n #ff6ad5 259.2deg,\n rgba(255, 255, 255, 0.06) 259.2deg 360deg\n );\n}\n\n/* place core text centrally and ensure percentage formatting */\n.stat-widget .stat-pill .core-percent {\n font-size: 12px;\n font-weight: 700;\n color: #fff;\n}\n\n/* responsive tweak for narrow screens */\n@media (max-width: 360px) {\n .stat-widget {\n padding: 18px;\n }\n .stat-widget .stat-pill {\n width: 280px;\n height: 92px;\n }\n .stat-widget .ring-wrap {\n width: 58px;\n height: 58px;\n }\n .stat-widget .ring .core {\n width: 42px;\n height: 42px;\n }\n}\n"}

gentle-treefrog-69

👁 实时预览

📝 源代码