{"html":"

\n \n \n \n

\n \n

\n","css":".wrap {\n --radius: 30px;\n --bg: #2c3238;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n position: relative;\n}\n\n.wrap::before {\n content: \"\";\n position: absolute;\n width: 250px;\n height: 3000px;\n border-radius: 50px;\n background-color: rgba(255, 255, 255, 0.05);\n filter: blur(60px);\n transform: skewY(-20deg);\n pointer-events: none;\n}\n\n.wrap::after {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 50px;\n background-color: rgba(0, 0, 0, 0.5);\n filter: blur(30px);\n}\n\n.button {\n position: relative;\n overflow: hidden;\n width: 154px;\n height: 150px;\n background-color: var(--bg);\n z-index: 2;\n border: transparent;\n border-radius: var(--radius);\n box-shadow:\n inset 0 1px 1px rgb(255 255 255 / 40%),\n inset 0 -6px 1px -4px #0084ff,\n inset 0 -15px 6px -8px #003cff;\n transition: all 0.3s ease;\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: calc(var(--radius) * 0.8);\n border-top: 50px solid #414244;\n border-left: 40px solid #2b2b2c;\n border-right: 40px solid #2b2b2c;\n border-bottom: 50px solid #15161a;\n filter: blur(6px);\n transition: all 0.5s ease;\n}\n\n.button .corner {\n transition: all 0.4s ease;\n opacity: 0.1;\n}\n\n.button .corner::before,\n.button .corner::after {\n content: \"\";\n position: absolute;\n top: 0;\n border-top: 55px solid white;\n border-left: 15px solid transparent;\n border-right: 15px solid transparent;\n filter: blur(6px);\n}\n\n.button .corner::before {\n left: 8px;\n transform: rotate(-40deg);\n}\n\n.button .corner::after {\n right: 8px;\n transform: rotate(40deg);\n}\n\n.button .inner {\n z-index: 9;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n inset: 22px 20px;\n border-radius: calc(var(--radius) * 0.85);\n background: linear-gradient(180deg, #232324 5%, #46484b 100%);\n transition: all 0.3s ease;\n box-shadow:\n inset 0 -5px 15px -1px rgba(0, 0, 0, 0.3),\n inset 0 -4px 3px -3px black,\n inset 0 -10px 20px -8px rgb(255 255 255 / 40%),\n inset 0 1px 0 1px rgb(255 255 255 / 20%);\n}\n\n.button .inner svg {\n display: block;\n overflow: visible;\n height: 45%;\n}\n\n.button .inner svg .symbol {\n fill: #212123;\n}\n\n.button .inner svg .symbol-path {\n filter: brightness(1.1) contrast(1.1);\n}\n\n.button .inner svg .symbol-path path {\n stroke-dasharray: 650;\n stroke-dashoffset: -650;\n stroke-width: 5;\n stroke: #3c69ff;\n animation: symbolPath 2s ease-in-out;\n}\n\n.button .inner svg .symbol-path-glow path {\n stroke-dasharray: 650;\n stroke-dashoffset: -650;\n stroke-width: 30;\n stroke: #0231ce;\n filter: blur(30px);\n animation: symbolPath 2s ease-in-out;\n}\n\n.button .inner svg .symbol-path circle {\n fill: #3c69ff;\n opacity: 0;\n animation: symbolCircle 2s ease-in-out;\n}\n\n.button .inner svg .symbol-path-glow circle {\n fill: #0231ce;\n filter: blur(30px);\n opacity: 0;\n animation: symbolCircle 2s ease-in-out;\n}\n\n.bg {\n background-color: black;\n position: absolute;\n inset: -7px;\n border-radius: calc(var(--radius) * 1.25);\n box-shadow: 0 20px 10px -10px rgba(0, 0, 0, 0.3);\n transition: all 0.3s ease;\n overflow: hidden;\n z-index: 1;\n}\n\n.bg::before {\n content: \"\";\n position: absolute;\n border-radius: inherit;\n box-shadow:\n inset 0 -2px 0px -1px rgb(120 176 255 / 32%),\n inset 0 0 5px 1px black,\n inset 0 0 0 1px black;\n inset: 0;\n z-index: 1;\n}\n\n.bg .shine-1,\n.bg .shine-2::before {\n content: \"\";\n position: absolute;\n z-index: 0;\n transition: all 0.3s ease;\n background: rgba(0, 60, 255, 1);\n width: 10px;\n height: 10px;\n left: 0;\n right: 0;\n bottom: 0;\n margin: auto;\n border-radius: 50%;\n filter: blur(2px);\n transform: translateY(0) scale(0);\n animation: bg 2.4s linear 0.3s;\n}\n\n.bg .shine-2::before {\n animation: bg 2.4s linear infinite;\n}\n\n.bg .shine-2 {\n transition: all 0.5s linear;\n opacity: 0;\n}\n\n.led {\n position: absolute;\n z-index: 10;\n top: 100%;\n border-radius: 50%;\n width: 6px;\n height: 6px;\n margin-top: 22px;\n transition: all 0.3s ease;\n background-color: #3aeaf3;\n box-shadow:\n 0 -10px 35px 17px #003cff,\n inset 0 1px 2px 0px rgba(255, 255, 255, 0.6),\n 0 0 0px 3px rgb(0 0 0 / 60%),\n 0 0 2px 4px rgb(0 79 152 / 80%);\n}\n\n.wrap .button.active {\n transform: scale(0.97);\n filter: contrast(1.07);\n background-color: transparent;\n}\n\n.wrap .button.active .inner {\n background: linear-gradient(180deg, #232324 5%, #3b3d40 100%);\n box-shadow:\n inset 0 -5px 15px -1px rgba(0, 0, 0, 0.3),\n inset 0 -4px 3px -3px black,\n inset 0 -10px 20px -8px rgb(255 255 255 / 20%),\n inset 0 1px 0 1px rgb(255 255 255 / 10%);\n transform: scale(0.95);\n}\n\n.button:hover + .led {\n box-shadow:\n 0 0 15px rgba(0, 0, 255, 0.9),\n 0 0 30px rgba(0, 0, 255, 0.7),\n 0 0 45px rgba(0, 0, 255, 0.5);\n}\n\n.button:hover .ripple {\n animation: ripple-animation 0.6s ease-out infinite;\n}\n\n.ripple {\n position: absolute;\n width: 100%;\n height: 100%;\n background: rgba(255, 255, 255, 0.5);\n border-radius: 50%;\n opacity: 0;\n transform: scale(0);\n animation: ripple-animation 0.6s ease-out;\n}\n\n@keyframes ripple-animation {\n 0% {\n transform: scale(0);\n opacity: 0.8;\n }\n 100% {\n transform: scale(3);\n opacity: 0;\n }\n}\n"}

silly-sloth-38

👁 实时预览

📝 源代码