\r\n

程序猿不爱听de歌

\r\n

猿某某

\r\n

\r\n \r\n

\r\n

","css":".box{\r\n width:280px;\r\n height:130px;\r\n background-color:orange;\r\n border-radius: 30px;\r\n padding:10px 20px;\r\n box-shadow: 2px 2px 2px rgb(194, 126, 0);\r\n}\r\n\r\n.title{\r\n color:white;\r\n font-weight: bold;\r\n letter-spacing: .2rem;\r\n text-align: center;\r\n margin-block:10px;\r\n}\r\n\r\n.author{\r\n color:white;\r\n font-weight: bold;\r\n letter-spacing: .1rem;\r\n text-align: center;\r\n font-size: 12px;\r\n margin-block:5px;\r\n}\r\n\r\n.progress-group{\r\n position: relative;\r\n width:100%;\r\n height:10px;\r\n margin-block:10px;\r\n}\r\n\r\n.progress-group::after{\r\n content:\" \";\r\n position:absolute;\r\n left:40px;\r\n top:50%;\r\n transform: translateY(-50%);\r\n width:25px;\r\n aspect-ratio: 1;\r\n background-color:white;\r\n border-radius: 50%;\r\n box-shadow: 2px 2px 4px gray;\r\n cursor:pointer;\r\n transition:all .1s ease-in;\r\n}\r\n\r\n.progress-group:hover::after{\r\n box-shadow: 1px 1px 6px gray;\r\n}\r\n.progress-group:active::after{\r\n animation: .1s shake infinite;\r\n}\r\n\r\n.progress-group .bg{\r\n background-color:rgba(255,255,255,0.3);\r\n width:100%;\r\n height:100%;\r\n border-radius:20px;\r\n}\r\n\r\n.progress-group .progress{\r\n position: absolute;\r\n width:20%;\r\n height:100%;\r\n top:0;\r\n left:0;\r\n background-color:white;\r\n border-radius:20px;\r\n}\r\n\r\n.btns-group{\r\n width:100%;\r\n height:40px;\r\n margin-block:10px;\r\n\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-around;\r\n}\r\n\r\n.btns-group .pre,\r\n.btns-group .next{\r\n position: relative;\r\n height:80%;\r\n aspect-ratio: 1;\r\n background-color:white;\r\n border-radius: 50%;\r\n}\r\n\r\n.btns-group .stop,\r\n.btns-group .start\r\n{\r\n position: relative;\r\n height:100%;\r\n aspect-ratio: 1;\r\n background-color:white;\r\n border-radius: 50%;\r\n}\r\n\r\n.btns-group .pre::after,\r\n.btns-group .next::after,\r\n.btns-group .stop::after,\r\n.btns-group .start::after\r\n{\r\n position: absolute;\r\n top:0;\r\n left:0;\r\n\r\n content:\" \";\r\n width:100%;\r\n height:100%;\r\n background-color:black;\r\n}\r\n\r\n.btns-group div{\r\n transition: all .1s ease-in;\r\n cursor:pointer;\r\n box-shadow: 2px 2px 4px gray;\r\n}\r\n.btns-group div:hover{\r\n scale:1.05;\r\n box-shadow: 1px 1px 6px gray;\r\n}\r\n.btns-group div:active{\r\n scale:0.95;\r\n box-shadow:1px 1px 2px gray;\r\n animation: .1s shakexy infinite;\r\n}\r\n\r\n.btns-group .pre::after{\r\n clip-path: path(\"M16 17.6716V13.5864C16 11.8401 13.9188 10.9325 12.6391 12.1208L10.5209 14.0878C9.69018 14.8591 9.66599 16.166 10.4676 16.9676L12.5858 19.0858C13.8457 20.3457 16 19.4534 16 17.6716Z M20.075 14.5655C19.7205 15.1416 19.7088 15.8653 20.0444 16.4526C20.9854 18.0995 23.5 17.4317 23.5 15.535C23.5 13.6699 21.0525 12.9772 20.075 14.5655Z\");\r\n}\r\n\r\n.btns-group .next::after{\r\n clip-path: path(\"M16.5 13.8284V17.9136C16.5 19.6599 18.5812 20.5675 19.8609 19.3792L21.9791 17.4122C22.8098 16.6409 22.834 15.334 22.0324 14.5324L19.9142 12.4142C18.6543 11.1543 16.5 12.0466 16.5 13.8284Z M12.425 16.9345C12.7795 16.3584 12.7912 15.6347 12.4556 15.0474C11.5146 13.4005 9 14.0683 9 15.965C9 17.8301 11.4475 18.5228 12.425 16.9345Z\");\r\n}\r\n\r\n.btns-group .stop::after{\r\n clip-path:path(\"M18 27V14C18 12.3431 16.6569 11 15 11C13.3431 11 12 12.3431 12 14V27C12 28.6569 13.3431 30 15 30C16.6569 30 18 28.6569 18 27Z M28 27V14C28 12.3431 26.6569 11 25 11C23.3431 11 22 12.3431 22 14V27C22 28.6569 23.3431 30 25 30C26.6569 30 28 28.6569 28 27Z\");\r\n}\r\n\r\n.btns-group .start::after{\r\n clip-path: path(\"M14 28.2808V12.5836C14 11.018 15.7175 10.0595 17.05 10.8814L29.3348 18.4594C30.5782 19.2264 30.6064 21.0245 29.3875 21.8301L17.1028 29.9493C15.7731 30.8281 14 29.8746 14 28.2808Z\");\r\n}\r\n\r\n@keyframes shake{\r\n 0%{transform: translateY(-50%) translateX(1px);},\r\n 100%{transform: translateY(-50%) translateX(0px);}\r\n}\r\n@keyframes shakexy{\r\n 0%{transform: translateX(1px);},\r\n 100%{transform: translateX(-1px);}\r\n}\r\n"},{"created":"2023-11-25T04:54:06.000Z","isPrivate":0,"projectId":"89eb99","snapshot":"https://s1.qingting.work/runjs/41f73e020ce1.png?x-oss-process=style/webp-w-500","tags":null,"title":"Untitled","updated":"2023-11-27T10:49:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":0,"htmlLen":257,"cssLen":41,"jsLen":1141,"nickname":"Michael Wei","avatar":"https://thirdwx.qlogo.cn/mmopen/vi_32/iaA08tKQMlLNfia8hTObe51wFB4Vk2exoU9ibAkPEbLwSKfFWs4uYaMypSltm2YsAj5jKJsmVtqLMJb9iaZpCXctNg/132","username":"dbf12d","editors":"1110"},{"created":"2023-11-24T14:39:38.000Z","isPrivate":0,"projectId":"d79d24","snapshot":"https://s1.qingting.work/runjs/5d3f802fafa2.png?x-oss-process=style/webp-w-500","tags":null,"title":"Untitled","updated":"2023-11-24T16:58:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":0,"htmlLen":232,"cssLen":68,"jsLen":382,"nickname":"Michael Wei","avatar":"https://thirdwx.qlogo.cn/mmopen/vi_32/iaA08tKQMlLNfia8hTObe51wFB4Vk2exoU9ibAkPEbLwSKfFWs4uYaMypSltm2YsAj5jKJsmVtqLMJb9iaZpCXctNg/132","username":"dbf12d","editors":"1110"},{"created":"2023-11-24T13:31:25.000Z","isPrivate":0,"projectId":"2e3c76","snapshot":"https://s1.qingting.work/runjs/3b9d29788688.png?x-oss-process=style/webp-w-500","tags":null,"title":"Untitled","updated":"2023-11-24T15:31:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":0,"htmlLen":261,"cssLen":76,"jsLen":457,"nickname":"Michael Wei","avatar":"https://thirdwx.qlogo.cn/mmopen/vi_32/iaA08tKQMlLNfia8hTObe51wFB4Vk2exoU9ibAkPEbLwSKfFWs4uYaMypSltm2YsAj5jKJsmVtqLMJb9iaZpCXctNg/132","username":"dbf12d","editors":"1110"}]}},"actionData":null,"errors":null}