{"html":"

\n \n \n

\n Cassette Mode\n \n\n \n \n

\n Walkman Style\n \n\n \n \n

\n 80s Mix\n \n\n \n \n

\n Retro FM\n \n

\n","css":"/* ===== Wrapper Radio Group ===== */\n.radio-group {\n background: #fffdf8;\n border: 2px solid #222;\n border-radius: 0.5rem;\n padding: 1.5rem;\n max-width: 15rem;\n width: 90%;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n position: relative;\n box-shadow: 4px 4px 0 #000;\n font-family: \"Noto Sans JP\", Arial, sans-serif;\n transition:\n transform 0.3s ease,\n box-shadow 0.3s ease;\n}\n\n/* Add subtle hover effect for the whole group */\n.radio-group:hover {\n transform: translateY(-2px);\n box-shadow: 6px 6px 0 #000;\n}\n\n/* Paper texture effect */\n.radio-group::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: repeating-linear-gradient(\n 0deg,\n rgba(0, 0, 0, 0.05) 0px,\n rgba(0, 0, 0, 0.05) 1px,\n transparent 2px\n );\n pointer-events: none;\n opacity: 0.25;\n}\n\n/* ===== Each Radio ===== */\n.radio {\n display: flex;\n align-items: center;\n gap: 0.8rem;\n cursor: pointer;\n position: relative;\n padding: 0.3rem;\n border-radius: 0.3rem;\n transition:\n background-color 0.2s ease,\n transform 0.2s ease;\n}\n\n/* Add background highlight on hover */\n.radio:hover {\n background-color: rgba(209, 17, 17, 0.1);\n transform: translateX(2px);\n}\n\n.radio input {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n}\n\n/* Hand-drawn styled circle */\n.radio-visual {\n width: 1.6rem;\n height: 1.6rem;\n border-radius: 50%;\n border: 2px solid #111;\n background: #fdfaf4;\n box-shadow:\n inset -2px -2px 0 #111,\n 2px 2px 0 #111;\n display: flex;\n align-items: center;\n justify-content: center;\n transition:\n transform 0.25s ease,\n background-color 0.2s ease;\n}\n\n/* Add rotation on hover for fun */\n.radio:hover .radio-visual {\n transform: rotate(5deg);\n}\n\n/* The dot inside */\n.radio-dot {\n width: 60%;\n height: 60%;\n border-radius: 50%;\n background: #d11;\n transform: scale(0);\n transition: transform 0.2s ease-out;\n box-shadow:\n inset 1px 1px 0 #700,\n 2px 2px 0 #000;\n}\n\n.radio input:checked + .radio-visual .radio-dot {\n transform: scale(1);\n animation: bounce 0.4s ease-out;\n}\n\n/* bounce effect */\n@keyframes bounce {\n 0% {\n transform: scale(0.3);\n }\n 50% {\n transform: scale(1.2);\n }\n 100% {\n transform: scale(1);\n }\n}\n\n/* Change visual when checked */\n.radio input:checked + .radio-visual {\n background: #ffe0e0;\n border-color: #d11;\n box-shadow:\n inset -2px -2px 0 #d11,\n 2px 2px 0 #111;\n}\n\n/* Hover jitter like hand-drawn */\n.radio:hover .radio-label {\n animation: jitter 0.3s infinite alternate;\n color: #d11;\n}\n\n@keyframes jitter {\n from {\n transform: rotate(-1deg) translateX(-1px);\n }\n to {\n transform: rotate(1deg) translateX(1px);\n }\n}\n\n/* Add a subtle glow to labels */\n.radio-label {\n transition:\n color 0.2s ease,\n text-shadow 0.2s ease;\n}\n\n.radio input:checked ~ .radio-label {\n color: #d11;\n text-shadow: 1px 1px 0 #700;\n}\n\n/* Retro scanline effect on the group */\n.radio-group::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background: repeating-linear-gradient(\n 0deg,\n transparent 0px,\n transparent 2px,\n rgba(0, 0, 0, 0.03) 2px,\n rgba(0, 0, 0, 0.03) 3px\n );\n pointer-events: none;\n animation: scanline 2s linear infinite;\n}\n\n@keyframes scanline {\n 0% {\n transform: translateY(0);\n }\n 100% {\n transform: translateY(-3px);\n }\n}\n"}

smart-moth-59

👁 实时预览

📝 源代码