{"html":"

\n \n

Hello MackBook

\n","css":".laptop {\n transform: scale(0.8);\n}\n.screen {\n border-radius: 20px;\n box-shadow: inset 0 0 0 2px #c8cacb, inset 0 0 0 10px #000;\n height: 318px;\n width: 518px;\n margin: 0 auto;\n padding: 9px 9px 23px 9px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n background-image: linear-gradient(\n 15deg,\n #3f51b1 0%,\n #5a55ae 13%,\n #7b5fac 25%,\n #8f6aae 38%,\n #a86aa4 50%,\n #cc6b8e 62%,\n #f18271 75%,\n #f3a469 87%,\n #f7c978 100%\n );\n transform-style: preserve-3d;\n transform: perspective(1900px) rotateX(-88.5deg);\n transform-origin: 50% 100%;\n animation: open 4s infinite alternate;\n}\n@keyframes open {\n 0% {\n transform: perspective(1900px) rotateX(-88.5deg);\n }\n 100% {\n transform: perspective(1000px) rotateX(0deg);\n }\n}\n.screen::before {\n content: \"\";\n width: 518px;\n height: 12px;\n position: absolute;\n background: linear-gradient(#979899, transparent);\n top: -3px;\n transform: rotateX(90deg);\n border-radius: 5px 5px;\n}\n\n.text {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen,\n Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n color: #fff;\n letter-spacing: 1px;\n text-shadow: 0 0 5px #fff;\n}\n.header {\n width: 100px;\n height: 12px;\n position: absolute;\n background-color: #000;\n top: 10px;\n left: 50%;\n transform: translate(-50%, -0%);\n border-radius: 0 0 6px 6px;\n}\n.screen::after {\n background: linear-gradient(to bottom, #272727, #0d0d0d);\n border-radius: 0 0 20px 20px;\n bottom: 2px;\n content: \"\";\n height: 24px;\n left: 2px;\n position: absolute;\n width: 514px;\n}\n.keyboard {\n background: radial-gradient(circle at center, #e2e3e4 85%, #a9abac 100%);\n border: solid #a0a3a7;\n border-radius: 2px 2px 12px 12px;\n border-width: 1px 2px 0 2px;\n box-shadow: inset 0 -2px 8px 0 #6c7074;\n height: 24px;\n margin-top: -10px;\n position: relative;\n width: 620px;\n z-index: 9;\n}\n.keyboard::after {\n background: #e2e3e4;\n border-radius: 0 0 10px 10px;\n box-shadow: inset 0 0 4px 2px #babdbf;\n content: \"\";\n height: 10px;\n left: 50%;\n margin-left: -60px;\n position: absolute;\n top: 0;\n width: 120px;\n}\n.keyboard::before {\n background: 0 0;\n border-radius: 0 0 3px 3px;\n bottom: -2px;\n box-shadow: -270px 0 #272727, 250px 0 #272727;\n content: \"\";\n height: 2px;\n left: 50%;\n margin-left: -10px;\n position: absolute;\n width: 40px;\n}\n"}

silent-quail-90

👁 实时预览

📝 源代码