{"html":"

\n\n \n \n

\n","css":".phone-card {\n width: 180px;\n margin: 0 auto;\n transform: scale(1);\n transition: transform 0.3s ease;\n}\n\n.phone {\n position: relative;\n width: 80%;\n height: 250px;\n background-color: #fff6ee;\n border-radius: 20px;\n box-shadow: inset -4px -4px 10px rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n\n.front-cam {\n position: absolute;\n width: 7px;\n height: 7px;\n background: gray;\n border-radius: 50%;\n top: 8px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 2;\n}\n\n.side-buttons {\n position: absolute;\n top: 18%;\n right: -3px;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.side-btn {\n width: 4px;\n height: 18px;\n background-color: pink;\n border-radius: 0 50px 50px 0;\n box-shadow: inset -2px -2px 5px rgba(0, 0, 0, 0.2);\n}\n\n.side-btn.bottom {\n background-color: #f4a6c4;\n}\n\n.screen {\n width: 88%;\n height: 85%;\n background-color: #383838;\n border: 2px solid lightgray;\n border-radius: 12px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n position: relative;\n transition: background 0.4s ease;\n cursor: pointer;\n}\n\n#toggleScreen:checked + .screen {\n background: linear-gradient(135deg, #ffd6e0, #cce7ff, #fff4c2);\n}\n"}

witty-emu-98

👁 实时预览

📝 源代码