{"html":"

Start Grand Prix?

\n \n

\n","css":".button-mario-kart-8 {\n width: 25em;\n height: 12.5em;\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n align-items: center;\n position: relative;\n transform: scale(0.75);\n}\n\n.button-mario-kart-8-text {\n color: white;\n font-weight: bold;\n font-style: italic;\n display: flex;\n justify-content: center;\n font-size: 2em;\n font-family: Arial, sans-serif;\n text-shadow: 0.1em 0.1em rgb(0, 0, 0, 0.5);\n position: relative;\n}\n\n.button-mario-kart-8-button {\n cursor: pointer;\n width: 22.5em;\n height: 9em;\n position: relative;\n z-index: 3;\n clip-path: polygon(15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%);\n display: flex;\n justify-content: center;\n align-items: center;\n background: linear-gradient(#f4f2f0, #c4bfbb);\n border: 0.15em solid #f4f2f0;\n box-shadow: inset 0em 0.5em 1.5em white;\n transform: scale(1);\n transition: all 0.25s ease-in-out;\n}\n\n.button-mario-kart-8-button-yellow {\n width: 20em;\n height: 8em;\n position: relative;\n background: linear-gradient(#fff80d, #eeaf0c);\n z-index: 2;\n clip-path: polygon(15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%);\n box-shadow: inset 0em 0.5em 1.5em white;\n transform: translateX(0%);\n}\n\n.button-mario-kart-8-button-yellow-text {\n font-size: 5em;\n font-weight: bold;\n font-style: italic;\n font-family: \"Gill Sans\", \"Gill Sans MT\", Calibri, \"Trebuchet MS\", sans-serif;\n text-shadow: -0.025em 0em white;\n color: rgb(48, 48, 48);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n position: absolute;\n}\n\n.button-mario-kart-8-button-black {\n width: 19em;\n height: 8em;\n position: absolute;\n background-color: rgb(48, 48, 48);\n z-index: 2;\n clip-path: polygon(15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%);\n bottom: 0em;\n border-radius: 0%;\n transition: all 0.25s ease-in-out;\n transform: scale(1);\n}\n\n.button-mario-kart-8-button:hover {\n transform: scale(1.05);\n transition: all 0.25s ease-in-out;\n}\n\n.button-mario-kart-8:hover .button-mario-kart-8-button-black {\n transition: all 0.25s ease-in-out;\n transform: scale(1.1);\n}\n\n.button-mario-kart-8-corner1 {\n width: 1.25em;\n height: 2.5em;\n background: linear-gradient(#eeaf0c, #fff80d);\n position: absolute;\n border-radius: 0.25em;\n transform: rotate(0deg) skewX(-42.5deg);\n left: 2.5em;\n bottom: 5em;\n z-index: 1;\n transition: all 0.25s ease-in-out;\n animation: box-shadow-yellow 1s linear infinite;\n}\n.button-mario-kart-8-corner2 {\n width: 1.25em;\n height: 2.5em;\n background: linear-gradient(#fff80d, #eeaf0c);\n position: absolute;\n border-radius: 0.25em;\n transform: rotate(0deg) skewX(42.5deg);\n left: 2.5em;\n bottom: 0.25em;\n z-index: 1;\n transition: all 0.25s ease-in-out;\n animation: box-shadow-yellow 1s linear infinite;\n}\n.button-mario-kart-8-corner3 {\n width: 1.25em;\n height: 2.5em;\n background: linear-gradient(#eeaf0c, #fff80d);\n position: absolute;\n border-radius: 0.25em;\n transform: rotate(0deg) skewX(42.5deg);\n right: 2.5em;\n bottom: 5em;\n z-index: 1;\n transition: all 0.25s ease-in-out;\n animation: box-shadow-yellow 1s linear infinite;\n}\n.button-mario-kart-8-corner4 {\n width: 1.25em;\n height: 2.5em;\n background: linear-gradient(#fff80d, #eeaf0c);\n position: absolute;\n border-radius: 0.25em;\n transform: rotate(0deg) skewX(-42.5deg);\n right: 2.5em;\n bottom: 0.25em;\n z-index: 1;\n transition: all 0.25s ease-in-out;\n animation: box-shadow-yellow 1s linear infinite;\n}\n\n.button-mario-kart-8:hover .button-mario-kart-8-corner1,\n.button-mario-kart-8:hover .button-mario-kart-8-corner2 {\n left: 1.5em;\n}\n\n.button-mario-kart-8:hover .button-mario-kart-8-corner3,\n.button-mario-kart-8:hover .button-mario-kart-8-corner4 {\n right: 1.5em;\n}\n\n@keyframes box-shadow-yellow {\n 0% {\n box-shadow: 0em 0em 0em 0em #fff80d55;\n }\n 80% {\n box-shadow: 0em 0em 0em 0.25em #fff80d55;\n }\n 100% {\n box-shadow: 0em 0em 0em 0.5em #fff80d00;\n }\n}\n\n.button-mario-kart-8-button-yellow:active {\n animation: button-yellow 0.25s;\n}\n\n@keyframes button-yellow {\n 0% {\n transform: translateX(0%);\n filter: blur(0em);\n }\n 33% {\n transform: translateX(-5%);\n filter: blur(0.25em);\n }\n 66% {\n transform: translateX(5%);\n filter: blur(0.25em);\n }\n 100% {\n transform: translateX(0%);\n filter: blur(0em);\n }\n}\n"}

silent-fox-94

👁 实时预览

📝 源代码