{"html":"

\n \n

\n","css":".play-button-container * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\n.play-button-container body {\n background-color: #111;\n font-family: \"Russo One\", sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n}\n\n.play-button-container {\n position: relative;\n}\n\n.play-button-container .play-button {\n position: relative;\n padding: 1.2em 3em;\n border: none;\n outline: none;\n background-color: transparent;\n color: #ff0;\n font-size: 20px;\n font-weight: bold;\n letter-spacing: 2px;\n text-transform: uppercase;\n cursor: pointer;\n transition: 0.3s ease;\n z-index: 2;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.play-button-container .play-button:hover {\n background-color: #ff004d;\n transform: scale(1.05);\n}\n\n.play-button-container .play-button:active {\n transform: scale(0.95);\n background-color: #003366;\n box-shadow:\n 0 0 10px #003366,\n 0 0 20px #003366,\n 0 0 30px #003366;\n}\n\n.play-button-container .button-text {\n position: relative;\n z-index: 3;\n}\n\n.play-button-container .clip {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border: 5px solid #ff004d;\n clip-path: polygon(\n 20% 0%,\n 80% 0%,\n 100% 30%,\n 100% 70%,\n 80% 100%,\n 20% 100%,\n 0% 70%,\n 0% 30%\n );\n box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6);\n transition: 0.3s ease;\n animation: shape-glitch 1.5s infinite ease-in-out;\n}\n\n.play-button-container .play-button:hover .clip {\n box-shadow: inset 0 0 25px #ff0066;\n}\n\n.play-button-container .corner {\n position: absolute;\n width: 30px;\n height: 30px;\n background-color: #ff004d;\n transform: rotate(45deg);\n box-shadow: inset 1px 1px 8px #ff0066;\n transition: 0.2s ease;\n animation: corner-glitch 2s infinite ease-in-out;\n}\n\n.play-button-container .top-left {\n top: -15px;\n left: -15px;\n}\n\n.play-button-container .top-right {\n top: -15px;\n right: -15px;\n}\n\n.play-button-container .bottom-left {\n bottom: -15px;\n left: -15px;\n}\n\n.play-button-container .bottom-right {\n bottom: -15px;\n right: -15px;\n}\n\n.play-button-container .play-button:hover .corner {\n transform: scale(1.25) rotate(45deg);\n background-color: #ff0066;\n animation: corner-light 0.4s ease-in-out infinite alternate;\n}\n\n@keyframes glitch {\n 0% {\n transform: translateX(0px) translateY(0px);\n opacity: 1;\n }\n 25% {\n transform: translateX(1px) translateY(1px);\n opacity: 0.9;\n }\n 50% {\n transform: translateX(-1px) translateY(-1px);\n opacity: 0.8;\n }\n 75% {\n transform: translateX(1px) translateY(1px);\n opacity: 0.9;\n }\n 100% {\n transform: translateX(0px) translateY(0px);\n opacity: 1;\n }\n}\n\n@keyframes shape-glitch {\n 0% {\n clip-path: polygon(\n 20% 0%,\n 80% 0%,\n 100% 30%,\n 100% 70%,\n 80% 100%,\n 20% 100%,\n 0% 70%,\n 0% 30%\n );\n box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6);\n }\n 25% {\n clip-path: polygon(\n 15% 0%,\n 85% 0%,\n 100% 35%,\n 100% 65%,\n 85% 100%,\n 15% 100%,\n 0% 65%,\n 0% 35%\n );\n box-shadow: inset 0 0 25px #ff0066;\n }\n 50% {\n clip-path: polygon(\n 10% 0%,\n 90% 0%,\n 100% 40%,\n 100% 60%,\n 90% 100%,\n 10% 100%,\n 0% 60%,\n 0% 40%\n );\n box-shadow: inset 0 0 20px #ff0066;\n }\n 75% {\n clip-path: polygon(\n 20% 0%,\n 80% 0%,\n 100% 30%,\n 100% 70%,\n 80% 100%,\n 20% 100%,\n 0% 70%,\n 0% 30%\n );\n box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6);\n }\n 100% {\n clip-path: polygon(\n 20% 0%,\n 80% 0%,\n 100% 30%,\n 100% 70%,\n 80% 100%,\n 20% 100%,\n 0% 70%,\n 0% 30%\n );\n box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6);\n }\n}\n\n@keyframes corner-glitch {\n 0% {\n transform: scale(1) rotate(45deg);\n opacity: 1;\n }\n 25% {\n transform: scale(1.1) rotate(50deg);\n opacity: 0.9;\n }\n 50% {\n transform: scale(0.9) rotate(40deg);\n opacity: 0.8;\n }\n 75% {\n transform: scale(1.1) rotate(50deg);\n opacity: 0.9;\n }\n 100% {\n transform: scale(1) rotate(45deg);\n opacity: 1;\n }\n}\n\n@keyframes corner-light {\n 0% {\n box-shadow: inset 0 0 5px #ff0066;\n }\n 100% {\n box-shadow: inset 0 0 15px #ff0066;\n }\n}\n"}

mighty-husky-81

👁 实时预览

📝 源代码