{"html":"

\n \n

John Doe

Incoming Call

\n \n \n \n \n \n

\n","css":".card {\n width: 190px;\n height: 254px;\n border-radius: 1em;\n flex-direction: column;\n justify-content: space-evenly;\n background-color: #080808;\n box-shadow: 0 0 2rem rgba(0, 0, 0, 0.8);\n cursor: pointer;\n transition: 0.2s ease-in-out;\n padding: 5px;\n color: #fff;\n}\n\n.card:hover {\n rotate: 1deg;\n scale: 1.05;\n}\n\n.card, .imgBox, .caller {\n display: flex;\n align-items: center;\n}\n\n.imgBox {\n width: 6em;\n height: 6em;\n box-shadow: 0px 0.25em 1rem rgba(255, 255, 255, 0.5);\n border-radius: 50%;\n justify-content: center;\n}\n\n.imgBox svg {\n width: 100%;\n height: 100%;\n}\n\n.name {\n width: 100%;\n text-align: center;\n font-weight: 900;\n transition: 1s ease-in-out;\n}\n\n.name .p1 {\n font-size: 1.2em;\n}\n\n.name .p2 {\n font-size: 0.8em;\n color: rgb(50, 146, 255);\n}\n\n.caller {\n width: 100%;\n flex-direction: row;\n justify-content: space-evenly;\n}\n\n.callerBtn {\n width: 2em;\n height: 2em;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n font-size: 1.5rem;\n cursor: pointer;\n transition: 0.1s ease-in-out;\n animation: animate linear infinite 2s;\n}\n\n.callerBtn:hover {\n scale: 1.1;\n}\n\n#pick {\n background-color: #28ff28;\n box-shadow: 0px 3px 10px #28ff28;\n}\n\n#end {\n background-color: #ff2828;\n box-shadow: 0px 3px 10px #ff2828;\n}\n\n#end svg {\n rotate: 135deg;\n}\n\n@keyframes animate {\n 0% {\n transform: translateY(0px);\n }\n\n 50% {\n transform: translateY(3px) rotate(-10deg);\n }\n\n 100% {\n transform: translateY(0px);\n }\n}"}

odd-turtle-69

👁 实时预览

📝 源代码