{"html":"

CROSS

\n \n

CIRCLE

\n \n

SQUARE

\n \n

TRIANGLE

\n \n

\n","css":".playstation-input {\n width: 10em;\n height: 10em;\n background-color: #212121;\n border-radius: 50%;\n position: relative;\n transition: all 0.2s ease;\n box-shadow: 0px -1px 1px #969696;\n}\n\n#cross p,\n#triangle p {\n font-size: 30px;\n font-family: \"Segoe UI\", Tahoma, Verdana, sans-serif;\n font-weight: 325;\n padding-bottom: 5px;\n transition: all 0.2s ease;\n}\n\n#cross p,\n#square div,\n#triangle p,\n#circle div {\n transition: all 0.5s ease-in-out;\n}\n\n#cross p {\n color: rgb(124, 178, 232);\n transform: scaleX(1.5);\n}\n\n#triangle p {\n color: rgb(64, 226, 160);\n}\n\n#circle div,\n#square div {\n top: 50%;\n left: 50%;\n transform: translate(50%, 0%);\n width: 50%;\n height: 50%;\n background-color: none;\n}\n\n#circle div {\n border-radius: 50%;\n border: solid 2px rgb(255, 102, 102);\n}\n\n#square div {\n border: solid 2px rgb(255, 105, 248);\n}\n\n#cross-title,\n#circle-title,\n#triangle-title,\n#square-title {\n position: absolute;\n display: none;\n font-size: 13px;\n text-shadow:\n 0px 0px 2.5px black,\n 0px 0px 2.5px black;\n}\n\n#cross-title {\n color: rgb(124, 178, 232);\n}\n\n#circle-title {\n color: rgb(255, 102, 102);\n}\n\n#triangle-title {\n color: rgb(64, 226, 160);\n}\n\n#square-title {\n color: rgb(255, 105, 248);\n}\n\n#cross-input,\n#circle-input,\n#triangle-input,\n#square-input {\n position: absolute;\n transform: translate(-50%, -50%);\n}\n\n#cross-input {\n top: 80%;\n left: 50%;\n}\n\n#circle-input {\n top: 50%;\n left: 80%;\n}\n\n#triangle-input {\n top: 20%;\n left: 50%;\n}\n\n#square-input {\n top: 50%;\n left: 20%;\n}\n\n.playstation-input button {\n width: 3.5em;\n height: 3.5em;\n border-radius: 50%;\n border: none;\n background-color: #323232;\n box-shadow:\n inset 0px 1px #969696,\n 0px 1px black;\n transition: all 0.1s ease;\n cursor: pointer;\n}\n\n.playstation-input:hover {\n width: 13em;\n height: 13em;\n}\n\n.playstation-input:hover button {\n width: 4em;\n height: 4em;\n box-shadow:\n inset 0px 1px #969696,\n 0px 2.5px black;\n}\n\n.playstation-input:hover #cross p {\n text-shadow:\n 0px 0px 15px rgb(124, 178, 232),\n 0px 0px 15px rgb(124, 178, 232);\n}\n\n.playstation-input:hover #triangle p {\n text-shadow:\n 0px 0px 15px rgb(64, 226, 160),\n 0px 0px 15px rgb(64, 226, 160);\n}\n\n.playstation-input:hover #square div {\n box-shadow:\n 0px 0px 7.5px rgb(255, 105, 248),\n inset 0px 0px 7.5px rgb(255, 105, 248);\n}\n\n.playstation-input:hover #circle div {\n box-shadow:\n 0px 0px 7.5px rgb(255, 102, 102),\n inset 0px 0px 7.5px rgb(255, 102, 102);\n}\n\n#cross-input:hover #cross-title,\n#triangle-input:hover #triangle-title {\n display: flex;\n top: 125%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n#circle-input:hover #circle-title,\n#square-input:hover #square-title {\n display: flex;\n top: 110%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.playstation-input button:hover {\n filter: brightness(85%);\n}\n\n.playstation-input button:active {\n box-shadow: inset 0px 2px 2px black;\n}\n\n#cross-input:active {\n top: 81%;\n}\n\n#triangle-input:active {\n top: 21%;\n}\n\n#circle-input:active,\n#square-input:active {\n top: 51%;\n}\n\n#cross:active p,\n#triangle:active p {\n text-shadow: 0px 0px 10px white;\n}\n\n#circle:active div,\n#square:active div {\n box-shadow:\n inset 0px 0px 10px -5px white,\n 0px 0px 10px -5px white;\n}\n\n.playstation-input:has(#cross:active) {\n box-shadow:\n 0px 0px 0px 5px rgb(124, 178, 232),\n 0px 0px 0px 10px rgb(124, 178, 232, 0.5);\n}\n\n.playstation-input:has(#circle:active) {\n box-shadow:\n 0px 0px 0px 5px rgb(255, 102, 102),\n 0px 0px 0px 10px rgb(255, 102, 102, 0.5);\n}\n\n.playstation-input:has(#triangle:active) {\n box-shadow:\n 0px 0px 0px 5px rgb(64, 226, 160),\n 0px 0px 0px 10px rgb(64, 226, 160, 0.5);\n}\n\n.playstation-input:has(#square:active) {\n box-shadow:\n 0px 0px 0px 5px rgb(255, 105, 248),\n 0px 0px 0px 10px rgb(255, 105, 248, 0.5);\n}\n"}

lovely-newt-12

👁 实时预览

📝 源代码