{"html":"

\n \n \n \n

","css":".voltage-button {\n position: relative;\n}\n\n.voltage-button button {\n color: white;\n background: #0D1127;\n padding: 1rem 3rem 1rem 3rem;\n border-radius: 5rem;\n border: 5px solid #5978F3;\n font-size: 1.2rem;\n line-height: 1em;\n letter-spacing: 0.075em;\n transition: background 0.3s;\n}\n\n.voltage-button button:hover {\n cursor: pointer;\n background: #0F1C53;\n}\n\n.voltage-button button:hover + svg, .voltage-button button:hover + svg + .dots {\n opacity: 1;\n}\n\n.voltage-button svg {\n display: block;\n position: absolute;\n top: -0.75em;\n left: -0.25em;\n width: calc(100% + 0.5em);\n height: calc(100% + 1.5em);\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.4s;\n transition-delay: 0.1s;\n}\n\n.voltage-button svg path {\n stroke-dasharray: 100;\n filter: url(\"#glow\");\n}\n\n.voltage-button svg path.line-1 {\n stroke: #f6de8d;\n stroke-dashoffset: 0;\n animation: spark-1 3s linear infinite;\n}\n\n.voltage-button svg path.line-2 {\n stroke: #6bfeff;\n stroke-dashoffset: 500;\n animation: spark-2 3s linear infinite;\n}\n\n.voltage-button .dots {\n opacity: 0;\n transition: opacity 0.3s;\n transition-delay: 0.4s;\n}\n\n.voltage-button .dots .dot {\n width: 1rem;\n height: 1rem;\n background: white;\n border-radius: 100%;\n position: absolute;\n opacity: 0;\n}\n\n.voltage-button .dots .dot-1 {\n top: 0;\n left: 20%;\n animation: fly-up 3s linear infinite;\n}\n\n.voltage-button .dots .dot-2 {\n top: 0;\n left: 55%;\n animation: fly-up 3s linear infinite;\n animation-delay: 0.5s;\n}\n\n.voltage-button .dots .dot-3 {\n top: 0;\n left: 80%;\n animation: fly-up 3s linear infinite;\n animation-delay: 1s;\n}\n\n.voltage-button .dots .dot-4 {\n bottom: 0;\n left: 30%;\n animation: fly-down 3s linear infinite;\n animation-delay: 2.5s;\n}\n\n.voltage-button .dots .dot-5 {\n bottom: 0;\n left: 65%;\n animation: fly-down 3s linear infinite;\n animation-delay: 1.5s;\n}\n\n@keyframes spark-1 {\n to {\n stroke-dashoffset: -1000;\n }\n}\n\n@keyframes spark-2 {\n to {\n stroke-dashoffset: -500;\n }\n}\n\n@keyframes fly-up {\n 0% {\n opacity: 0;\n transform: translateY(0) scale(0.2);\n }\n\n 5% {\n opacity: 1;\n transform: translateY(-1.5rem) scale(0.4);\n }\n\n 10%, 100% {\n opacity: 0;\n transform: translateY(-3rem) scale(0.2);\n }\n}\n\n@keyframes fly-down {\n 0% {\n opacity: 0;\n transform: translateY(0) scale(0.2);\n }\n\n 5% {\n opacity: 1;\n transform: translateY(1.5rem) scale(0.4);\n }\n\n 10%, 100% {\n opacity: 0;\n transform: translateY(3rem) scale(0.2);\n }\n}\n"}

dull-mole-49

👁 实时预览

📝 源代码