{"html":"

2×30min

","css":".card {\n width: 300px;\n height: 200px;\n background: #252525;\n border-radius: 8px;\n box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;\n}\n\n.ups {\n display: flex;\n}\n\n.screw1 {\n display: flex;\n color: black;\n border: 1px solid black;\n background-color: lightgrey;\n height: 0.75em;\n width: 0.75em;\n margin: 0.5em;\n border-radius: 50%;\n align-items: center;\n justify-content: center;\n}\n\n.screw2 {\n display: flex;\n color: black;\n border: 1px solid black;\n background-color: lightgrey;\n height: 0.75em;\n width: 0.7em;\n margin-top: 0.5em;\n margin-left: 15.8em;\n border-radius: 50%;\n align-items: center;\n justify-content: center;\n}\n\n.downs {\n display: flex;\n}\n\n.screw3 {\n display: flex;\n color: black;\n border: 1px solid black;\n background-color: lightgrey;\n height: 0.75em;\n width: 0.75em;\n margin-top: -1.3em;\n margin-left: 0.5em;\n border-radius: 50%;\n align-items: center;\n justify-content: center;\n}\n\n.screw4 {\n display: flex;\n color: black;\n border: 1px solid black;\n background-color: lightgrey;\n height: 0.75em;\n width: 0.75em;\n margin-top: -1.3em;\n margin-left: 16.35em;\n border-radius: 50%;\n align-items: center;\n justify-content: center;\n}\n\n.card1 {\n width: 230px;\n height: 115px;\n margin-top: 0.5em;\n margin-left: 2.18em;\n background-color: #FFFDD0;\n clip-path: polygon(5% 0, 95% 0, 100% 10%, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 10%);\n border-radius: 5px;\n}\n\n.line1 {\n position: relative;\n width: 200px;\n height: 1px;\n background-color: black;\n top: 1em;\n left: 0.8em;\n}\n\n.line2 {\n position: relative;\n width: 200px;\n height: 1px;\n background-color: black;\n top: 2em;\n left: 0.8em;\n}\n\n.yl {\n display: flex;\n width: 228px;\n height: 50px;\n background-color: rgb(242, 188, 0);\n margin-top: 2.5em;\n margin-left: 0.06em;\n}\n\n.roll {\n width: 8em;\n height: 2em;\n margin-left: 3em;\n border-radius: 15px;\n background-color: #171717;\n display: flex;\n}\n\n.tape {\n width: 3em;\n height: 1.5em;\n position: relative;\n left: 0.9em;\n background-color: #252525;\n}\n\n.s_wheel {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n top: 0.215em;\n left: 0.15em;\n width: 1.55em;\n height: 1.55em;\n border: 2px dashed #fff;\n box-shadow: 0 0 0 4.4px #fff;\n border-radius: 50%;\n animation: 2s run infinite linear;\n}\n\n.window {\n background-color: white;\n width: auto;\n height: 2em;\n}\n\n.e_wheel {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n top: 0.215em;\n left: 1.7em;\n width: 1.55em;\n height: 1.55em;\n border: 2px dashed #fff;\n box-shadow: 0 0 0 4.4px #fff;\n border-radius: 50%;\n animation: 2s run infinite linear;\n}\n\n.num {\n margin-left: 1.5em;\n align-self: center;\n}\n\n.or {\n display: flex;\n width: 230px;\n height: 18px;\n background-color: rgb(241, 90, 37);\n margin-top: 0.4em;\n margin-left: 0em;\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px;\n align-items: center;\n justify-content: center;\n}\n\n.time {\n font-size: 0.5em;\n}\n\n.card2_main {\n filter: drop-shadow(4px 4px 14px rgba(0, 0, 0, 1));\n}\n\n.card2 {\n width: 150px;\n height: 50px;\n margin-top: 0em;\n margin-left: 4.6em;\n background-color: #252525;\n clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);\n}\n\n.screw5 {\n position: relative;\n display: flex;\n color: black;\n border: 1px solid black;\n background-color: lightgrey;\n height: 0.75em;\n width: 0.75em;\n left: 4.25em;\n top: -0.5em;\n border-radius: 50%;\n align-items: center;\n justify-content: center;\n}\n\n.c1 {\n position: relative;\n width: 0.5em;\n height: 0.5em;\n background-color: rgb(190, 190, 190);\n border-radius: 50%;\n left: 1.5em;\n top: 2em;\n}\n\n.t1 {\n position: relative;\n width: 0.5em;\n height: 0.5em;\n background-color: rgb(190, 190, 190);\n border-radius: 2px;\n left: 3em;\n top: 1em;\n}\n\n.t2 {\n position: relative;\n width: 0.5em;\n height: 0.5em;\n background-color: rgb(190, 190, 190);\n border-radius: 2px;\n left: 5.7em;\n top: -0.2em;\n}\n\n.c2 {\n position: relative;\n width: 0.5em;\n height: 0.5em;\n background-color: rgb(190, 190, 190);\n border-radius: 50%;\n left: 7.2em;\n top: -0.2em;\n}\n\n@keyframes run {\n 100% {\n transform: rotate(360deg);\n }\n}"}

jolly-bulldog-31

👁 实时预览

📝 源代码