{"html":"

\n\n \n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n

","css":".sparkle-button {\n --active: 0;\n --bg: radial-gradient(\n\t\t\t40% 50% at center 100%,\n\t\t\thsl(270 calc(var(--active) * 97%) 72% / var(--active)),\n\t\t\ttransparent\n\t\t),\n\t\tradial-gradient(\n\t\t\t80% 100% at center 120%,\n\t\t\thsl(260 calc(var(--active) * 97%) 70% / var(--active)),\n\t\t\ttransparent\n\t\t),\n\t\thsl(260 calc(var(--active) * 97%) calc((var(--active) * 44%) + 12%));\n background: var(--bg);\n font-size: 1.2rem;\n font-weight: 500;\n border: 0;\n cursor: pointer;\n padding: 1em 1em;\n display: flex;\n align-items: center;\n gap: 0.25em;\n white-space: nowrap;\n border-radius: 100px;\n position: relative;\n box-shadow: 0 0 calc(var(--active) * 3em) calc(var(--active) * 1em) hsl(260 97% 61% / 0.75),\n\t\t0 0em 0 0 hsl(260 calc(var(--active) * 97%) calc((var(--active) * 50%) + 30%)) inset,\n\t\t0 -0.05em 0 0 hsl(260 calc(var(--active) * 97%) calc(var(--active) * 60%)) inset;\n transition: box-shadow var(--transition), scale var(--transition), background var(--transition);\n scale: calc(1 + (var(--active) * 0.1));\n transition: .3s;\n}\n\n.sparkle-button:active {\n scale: 1;\n transition: .3s;\n}\n\n.sparkle path {\n color: hsl(0 0% calc((var(--active, 0) * 70%) + var(--base)));\n transform-box: fill-box;\n transform-origin: center;\n fill: currentColor;\n stroke: currentColor;\n animation-delay: calc((var(--transition) * 1.5) + (var(--delay) * 1s));\n animation-duration: 0.6s;\n transition: color var(--transition);\n}\n\n.sparkle-button:is(:hover, :focus-visible) path {\n animation-name: bounce;\n}\n\n@keyframes bounce {\n 35%, 65% {\n scale: var(--scale);\n }\n}\n\n.sparkle path:nth-of-type(1) {\n --scale: 0.5;\n --delay: 0.1;\n --base: 40%;\n}\n\n.sparkle path:nth-of-type(2) {\n --scale: 1.5;\n --delay: 0.2;\n --base: 20%;\n}\n\n.sparkle path:nth-of-type(3) {\n --scale: 2.5;\n --delay: 0.35;\n --base: 30%;\n}\n\n.sparkle-button:before {\n content: \"\";\n position: absolute;\n inset: -0.2em;\n z-index: -1;\n border: 0.25em solid hsl(260 97% 50% / 0.5);\n border-radius: 100px;\n opacity: var(--active, 0);\n transition: opacity var(--transition);\n}\n\n.spark {\n position: absolute;\n inset: 0;\n border-radius: 100px;\n rotate: 0deg;\n overflow: hidden;\n mask: linear-gradient(white, transparent 50%);\n animation: flip calc(var(--spark) * 2) infinite steps(2, end);\n}\n\n@keyframes flip {\n to {\n rotate: 360deg;\n }\n}\n\n.spark:before {\n content: \"\";\n position: absolute;\n width: 200%;\n aspect-ratio: 1;\n top: 0%;\n left: 50%;\n z-index: -1;\n translate: -50% -15%;\n rotate: 0;\n transform: rotate(-90deg);\n opacity: calc((var(--active)) + 0.4);\n background: conic-gradient(\n\t\tfrom 0deg,\n\t\ttransparent 0 340deg,\n\t\twhite 360deg\n\t);\n transition: opacity var(--transition);\n animation: rotate var(--spark) linear infinite both;\n}\n\n.spark:after {\n content: \"\";\n position: absolute;\n inset: var(--cut);\n border-radius: 100px;\n}\n\n.backdrop {\n position: absolute;\n inset: var(--cut);\n background: var(--bg);\n border-radius: 100px;\n transition: background var(--transition);\n}\n\n@keyframes rotate {\n to {\n transform: rotate(90deg);\n }\n}\n\n@supports(selector(:has(:is(+ *)))) {\n body:has(button:is(:hover, :focus-visible)) {\n --active: 1;\n --play-state: running;\n }\n\n .bodydrop {\n display: none;\n }\n}\n\n.sparkle-button:is(:hover, :focus-visible) ~ :is(.bodydrop, .particle-pen) {\n --active: 1;\n --play-state: runnin;\n}\n\n.sparkle-button:is(:hover, :focus-visible) {\n --active: 1;\n --play-state: running;\n}\n\n.sp {\n position: relative;\n}\n\n.particle-pen {\n position: absolute;\n width: 200%;\n aspect-ratio: 1;\n top: 50%;\n left: 50%;\n translate: -50% -50%;\n -webkit-mask: radial-gradient(white, transparent 65%);\n z-index: -1;\n opacity: var(--active, 0);\n transition: opacity var(--transition);\n}\n\n.particle {\n fill: white;\n width: calc(var(--size, 0.25) * 1rem);\n aspect-ratio: 1;\n position: absolute;\n top: calc(var(--y) * 1%);\n left: calc(var(--x) * 1%);\n opacity: var(--alpha, 1);\n animation: float-out calc(var(--duration, 1) * 1s) calc(var(--delay) * -1s) infinite linear;\n transform-origin: var(--origin-x, 1000%) var(--origin-y, 1000%);\n z-index: -1;\n animation-play-state: var(--play-state, paused);\n}\n\n.particle path {\n fill: hsl(0 0% 90%);\n stroke: none;\n}\n\n.particle:nth-of-type(even) {\n animation-direction: reverse;\n}\n\n@keyframes float-out {\n to {\n rotate: 360deg;\n }\n}\n\n.text {\n translate: 2% -6%;\n letter-spacing: 0.01ch;\n background: linear-gradient(90deg, hsl(0 0% calc((var(--active) * 100%) + 65%)), hsl(0 0% calc((var(--active) * 100%) + 26%)));\n -webkit-background-clip: text;\n color: transparent;\n transition: background var(--transition);\n}\n\n.sparkle-button svg {\n inline-size: 1.25em;\n translate: -25% -5%;\n}"}

fat-bat-0

👁 实时预览

📝 源代码