{"html":"\n","css":".Just_Dance_Button {\n width: 15em;\n height: 15em;\n padding: 0.75em;\n border: 0.15em solid rgb(255, 255, 255, 0.255);\n background-color: transparent;\n --backgroundcolor: #1d3844;\n position: relative;\n z-index: 0;\n transition: all 0.05s ease-in-out;\n}\n\n.Just_Dance_Button:hover {\n transform: rotate(-15deg);\n border: solid 0.15em rgb(255, 255, 255, 0.255);\n}\n\n.Just_Dance_Button:active {\n transform: rotate(-15deg) scale(0.95);\n}\n\n.Just_Dance_Button_IMG {\n width: 100%;\n height: 100%;\n background-color: rgb(47, 158, 154);\n box-shadow: 0em -1.5em 2.5em -1em rgba(0, 255, 255, 0.5);\n display: flex;\n align-items: flex-end;\n justify-content: end;\n position: relative;\n z-index: 1;\n border-top: 0.15em solid rgb(255, 255, 255, 0.5);\n border-left: 0.15em solid rgb(255, 255, 255, 0.255);\n}\n\n.Just_Dance_Button:hover .Just_Dance_Button_IMG {\n animation: borderlight 1s infinite linear;\n box-shadow: 0em -1.5em 3em 0em rgba(0, 255, 255, 0.5);\n}\n\n.Just_Dance_Button:active .Just_Dance_Button_IMG {\n filter: brightness(120%);\n box-shadow: 0em -2.5em 4em 0em rgba(0, 255, 255, 0.5);\n}\n\n.Just_Dance_Button:active .Just_Dance_Button_Title p {\n text-shadow: 0em 0em 1em white;\n}\n\n@keyframes borderlight {\n 0% {\n border: 0.15em solid rgb(255, 255, 255, 0.255);\n border-top: 0.15em solid white;\n }\n 25% {\n border: 0.15em solid rgb(255, 255, 255, 0.255);\n border-right: 0.15em solid white;\n }\n 50% {\n border: 0.15em solid rgb(255, 255, 255, 0.255);\n border-bottom: 0.15em solid white;\n }\n 75% {\n border: 0.15em solid rgb(255, 255, 255, 0.255);\n border-left: 0.15em solid white;\n }\n 100% {\n border: 0.15em solid rgb(255, 255, 255, 0.255);\n border-top: 0.15em solid white;\n }\n}\n\n.Just_Dance_Button_IMG_Button {\n width: 7.5em;\n height: 2.5em;\n background-color: var(--backgroundcolor);\n clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 0% 100%);\n display: flex;\n justify-content: flex-end;\n align-items: flex-end;\n position: relative;\n z-index: 2;\n}\n\n.Just_Dance_Button:hover .Just_Dance_Button_IMG_Button {\n opacity: 0%;\n}\n\n.Just_Dance_Button_IMG_Arrow {\n width: 1.5em;\n height: 1.5em;\n background-color: white;\n clip-path: polygon(0% 0%, 100% 50%, 100% 50%, 0% 100%);\n position: absolute;\n z-index: 3;\n transition: all 0.25s ease-in-out;\n}\n\n.Just_Dance_Button:hover .Just_Dance_Button_IMG_Arrow {\n top: 55%;\n left: 65%;\n transform: scale(2.5) translate(-50%, -50%) rotate(15deg);\n}\n\n.Just_Dance_Button_Title {\n width: 20em;\n height: 5em;\n background-color: var(--backgroundcolor);\n position: absolute;\n z-index: 6;\n bottom: -5em;\n left: -4em;\n opacity: 0%;\n transition: all 0.15s ease-in-out;\n display: flex;\n justify-content: center;\n}\n\n.Just_Dance_Button_Title p {\n color: white;\n font-size: 2.5em;\n font-weight: bold;\n}\n\n.Just_Dance_Button:hover .Just_Dance_Button_Title {\n bottom: -2.5em;\n transform: rotate(15deg);\n display: flex;\n opacity: 100%;\n box-shadow: 0em -1em 1em -1em white;\n}\n"}

chilly-rabbit-11

👁 实时预览

📝 源代码