{"html":"

\n\n

\n \n \n \n

\n\n

\n \n \n \n \n

\n\n

\n \n \n \n

\n","css":".button-box {\n position: relative;\n width: 12rem;\n height: 5rem;\n display: flex;\n}\n.button-box .button {\n width: 3.2rem;\n height: 3.2rem;\n position: absolute;\n left: 50%;\n top: 50%;\n cursor: pointer;\n border: 3px solid #311703;\n border-radius: 5px;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: 0.3s;\n opacity: 0.85;\n box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.4);\n}\n.button-box .button .icon {\n width: 24px;\n height: 24px;\n opacity: 0.7;\n transition: 0.25s;\n}\n.button-box .button:nth-child(4) {\n transform: translate(-50%, -50%) rotate(90deg);\n z-index: 30;\n background: #ff7f50;\n}\n.button-box .button:nth-child(5) {\n transform: translate(-50%, -50%) rotate(-115deg);\n z-index: 40;\n background: #ffd700;\n}\n.button-box .button:nth-child(6) {\n transform: translate(-50%, -50%) rotate(-45deg);\n z-index: 50;\n background: #019b98;\n}\n.button-box .button:nth-child(6) .icon {\n animation: active 2.2s linear infinite;\n}\n.button-box .touch {\n position: relative;\n z-index: 60;\n height: 100%;\n flex: 1;\n cursor: pointer;\n}\n.button-box .touch.left:hover ~ .button:nth-child(4) {\n opacity: 1;\n transform: translate(-170%, -50%) rotate(-90deg) scale(1.05);\n}\n.button-box .touch.left:hover ~ .button:nth-child(4) .icon {\n width: 25px;\n opacity: 0.9;\n}\n.button-box .touch.left:active ~ .button:nth-child(4) {\n transform: translate(-170%, -50%) rotate(-90deg) scale(0.9);\n}\n.button-box .touch.right:hover ~ .button:nth-child(5) {\n opacity: 1;\n transform: translate(70%, -50%) rotate(90deg) scale(1.05);\n}\n.button-box .touch.right:hover ~ .button:nth-child(5) .icon {\n width: 25px;\n opacity: 0.9;\n}\n.button-box .touch.right:active ~ .button:nth-child(5) {\n transform: translate(70%, -50%) rotate(90deg) scale(0.9);\n}\n.button-box .touch.middle:hover ~ .button:nth-child(6) {\n opacity: 1;\n transform: translate(-50%, -50%) rotate(0deg) scale(1.05);\n}\n.button-box .touch.middle:hover ~ .button:nth-child(6) .icon {\n width: 25px;\n opacity: 0.9;\n}\n.button-box .touch.middle:active ~ .button:nth-child(6) {\n transform: translate(-50%, -50%) rotate(0deg) scale(0.9);\n}\n.button-box:hover .button:nth-child(4) {\n transform: translate(-170%, -50%) rotate(-90deg);\n}\n.button-box:hover .button:nth-child(5) {\n transform: translate(70%, -50%) rotate(90deg);\n}\n.button-box:hover .button:nth-child(6) {\n transform: translate(-50%, -50%) rotate(0deg);\n}\n.button-box:hover .button:nth-child(6) .icon {\n animation: active 4s linear infinite;\n}\n@keyframes active {\n to {\n transform: rotate(360deg);\n }\n}\n"}

spicy-ape-9

👁 实时预览

📝 源代码