{"html":"

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

\n GO\n

\n","css":".button {\n --card-w: 160px;\n --card-h: 48px;\n width: var(--card-w);\n height: var(--card-h);\n border: 2px solid #333;\n border-radius: 8px;\n display: grid;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n background-color: #222;\n transition: transform 0.1s ease-in-out;\n user-select: none;\n &:active {\n transform: scale(0.95);\n }\n &:hover .border {\n opacity: 1;\n }\n &:hover .bg {\n animation-play-state: paused;\n filter: grayscale(0);\n &::before {\n animation-play-state: running;\n opacity: 0.6;\n }\n }\n &:hover .text {\n transform: skewX(-15deg);\n }\n &:hover .svgBox {\n opacity: 1;\n width: 50px;\n }\n}\n\n.bg {\n --size: calc(max(var(--card-w), var(--card-h)) * 1.25);\n width: var(--size);\n height: var(--size);\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n filter: grayscale(1);\n animation: rotateBg 14s linear infinite;\n animation-play-state: running;\n &::before {\n content: \"\";\n width: 100%;\n height: 100%;\n display: block;\n background: repeating-conic-gradient(\n from 0deg at 50% 50%,\n rgba(246, 194, 92, 0.75) 0deg,\n rgba(246, 194, 92, 0.75) 15deg,\n transparent 15deg,\n transparent 30deg\n );\n opacity: 0.2;\n transition: opacity 0.3s ease-in-out;\n animation: rotateBgBefore 4s linear infinite;\n animation-play-state: paused;\n }\n}\n\n@keyframes rotateBg {\n to {\n transform: translate(-50%, -50%) rotate(360deg);\n }\n}\n@keyframes rotateBgBefore {\n to {\n transform: rotate(360deg);\n }\n}\n.border {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n border-radius: 8px;\n box-shadow: inset 0 0 16px 0 rgba(194, 194, 194, 0.75);\n opacity: 0;\n transition: opacity 0.3s ease-in-out;\n}\n.content {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n position: absolute;\n top: 0;\n left: 0;\n .text {\n display: block;\n font-size: 24px;\n font-weight: 900;\n color: #fff;\n position: relative;\n transition: transform 0.3s ease-in-out;\n }\n\n .svgBox {\n width: 0px;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: flex-end;\n gap: 2px;\n transition: all 0.3s ease-in-out;\n opacity: 0;\n .svgLine {\n position: relative;\n }\n .line {\n stroke: #fff;\n animation: animLine 0.6s linear infinite;\n }\n .svgLine:nth-child(1) {\n transform: translateX(4px);\n }\n .svgLine:nth-child(3) {\n transform: translateX(-4px);\n }\n .svgLine:nth-child(1) .line {\n animation-delay: 0.2s;\n }\n .svgLine:nth-child(2) .line {\n animation-delay: 0.1s;\n }\n }\n}\n@keyframes animLine {\n 0% {\n stroke-dashoffset: 0;\n }\n 100% {\n stroke-dashoffset: 120;\n }\n}\n"}

green-pug-100

👁 实时预览

📝 源代码