{"html":"

\n \n POW!\n\n \n BAM!\n\n \n ZAP!\n\n

\n","css":".container {\n display: grid;\n place-content: center;\n width: 100%;\n height: 100%;\n background: #e0e0e0;\n}\n\n.comic-radio-group {\n --bg: #ffd700;\n --text-light: #ffffff;\n --text-dark: #000000;\n\n display: flex;\n position: relative;\n background: var(--bg);\n border-radius: 12px;\n border: 4px solid var(--text-dark);\n box-shadow: 8px 8px 0px var(--text-dark);\n overflow: hidden;\n width: fit-content;\n font-family: Impact, Haettenschweiler, \"Arial Narrow Bold\", sans-serif;\n font-style: italic;\n font-weight: 500;\n}\n\n.comic-radio-group input {\n display: none;\n}\n\n.comic-radio-group label {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 100px;\n font-size: 24px;\n padding: 0.8rem 1.6rem;\n cursor: pointer;\n letter-spacing: 1px;\n color: var(--text-dark);\n position: relative;\n z-index: 2;\n transition: color 0.3s ease-in-out;\n text-shadow:\n -1px -1px 0 var(--text-light),\n 1px -1px 0 var(--text-light),\n -1px 1px 0 var(--text-light),\n 1px 1px 0 var(--text-light);\n}\n\n.comic-radio-group input:checked + label {\n color: var(--text-light);\n text-shadow:\n -2px -2px 0 var(--text-dark),\n 2px -2px 0 var(--text-dark),\n -2px 2px 0 var(--text-dark),\n 2px 2px 0 var(--text-dark);\n}\n\n.comic-glider {\n position: absolute;\n top: 0;\n bottom: 0;\n width: calc(100% / 3);\n border-radius: 8px;\n z-index: 1;\n\n transition:\n transform 0.5s cubic-bezier(0.37, 1.95, 0.66, 0.56),\n background 0.4s ease-in-out,\n box-shadow 0.4s ease-in-out;\n border-right: 4px solid var(--text-dark);\n border-left: 4px solid var(--text-dark);\n}\n\n#comic-pow:checked ~ .comic-glider {\n transform: translateX(0%);\n background-color: #e74c3c;\n background-image: radial-gradient(\n circle at 4px 4px,\n #c0392b 2px,\n transparent 0\n );\n background-size: 8px 8px;\n box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);\n}\n\n#comic-bam:checked ~ .comic-glider {\n transform: translateX(100%);\n background-color: #3498db;\n background-image: radial-gradient(\n circle at 4px 4px,\n #2980b9 2px,\n transparent 0\n );\n background-size: 8px 8px;\n box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);\n}\n\n#comic-zap:checked ~ .comic-glider {\n transform: translateX(200%);\n background-color: #2ecc71;\n background-image: radial-gradient(\n circle at 4px 4px,\n #27ae60 2px,\n transparent 0\n );\n background-size: 8px 8px;\n box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);\n}\n"}

tasty-newt-31

👁 实时预览

📝 源代码