{"html":"

\n\n

","css":".phoneContainer {\n width: 185px;\n height: 350px;\n background-color: black;\n border-radius: 20px;\n position: relative;\n}\n\n.screen {\n width: 180px;\n height: 340px;\n background: rgb(255,196,196);\n background: linear-gradient(167deg, rgba(255,196,196,1) 10%, rgba(45,138,253,1) 20%, rgba(34,193,195,1) 48%, rgba(211,216,255,1) 69%, rgba(0,164,24,1) 88%);\n border-radius: 20px;\n position: absolute;\n top: 4px;\n bottom: 2px;\n right: 2px;\n left: 2px;\n box-sizing: border-box;\n}\n\n.camera {\n width: 80px;\n background-color: black;\n position: absolute;\n height: 20px;\n top: 4%;\n right: 50%;\n transform: translate(50%, -50%);\n border-radius: 25px;\n transition: 0.3s;\n animation-name: callTransition;\n animation-duration: 1.9s;\n animation-direction: alternate;\n animation-iteration-count: infinite;\n animation-timing-function: ease;\n}\n\n@keyframes callTransition {\n 15% {\n width: 40px;\n }\n\n 95% {\n width: 95px;\n background-color: darkblue;\n }\n}\n\n.camera:before {\n content: \"\";\n width: 15px;\n height: 15px;\n background-color: rgb(19, 19, 51);\n position: absolute;\n border-radius: 50%;\n left: 5px;\n top: 2px;\n}\n\n.camera:after {\n content: \"\";\n width: 5px;\n height: 5px;\n background-color: lightgreen;\n position: absolute;\n border-radius: 50%;\n right: 5px;\n top: 6px;\n}\n\n.appsContainer {\n margin-top: 10px;\n position: absolute;\n right: 50%;\n top: 40%;\n transform: translate(50%, -50%);\n}\n\n.widgets {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 10px;\n box-sizing: border-box;\n}\n\n.one, .two {\n height: 80px;\n width: 80px;\n background-color: blue;\n border-radius: 10px;\n cursor: pointer;\n}\n\n.two {\n background-color: lightblue;\n}\n\n.oneApp, .twoApp {\n width: 35px;\n height: 35px;\n background-color: white;\n border-radius: 5px;\n margin-top: 10px;\n}\n\n.apps {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n margin-top: 15px;\n margin-left: 5px;\n}\n\n.menuBar {\n display: flex;\n border-radius: 20px;\n position: absolute;\n bottom: -70px;\n}\n\n.menuBar .twoApp:not(:last-child) {\n margin-right: 10px;\n}\n\n.menuBar::before {\n content: \"\";\n position: absolute;\n width: 50px;\n height: 13px;\n background-color: lightgray;\n border: none;\n border-radius: 20px;\n top: -5px;\n right: 50%;\n transform: translate(50%, -50%);\n}\n\n.menuBar::before {\n content: \"°°°°°°\";\n position: absolute;\n display: flex;\n justify-content: center;\n font-size: 18px;\n font-weight: bolder;\n color: gray;\n}"}

white-wombat-4

👁 实时预览

📝 源代码