{"loaderData":{"0":null,"0-3":{"total":7420,"projects":[{"created":"2024-01-18T11:53:42.000Z","isPrivate":0,"projectId":"191678","snapshot":"https://s1.qingting.work/runjs/063f7158b7044f04/647dac0175d9.png?x-oss-process=style/webp-w-500","tags":null,"title":"Download Button Animation","updated":"2024-01-19T08:35:29.000Z","isTemplate":1,"htmlType":"html","pureCSS":0,"htmlLen":1049,"cssLen":5642,"jsLen":2591,"nickname":"枫林","avatar":"https://s1.qingting.work/runjs/063f7158b7044f04/9382251ac4a9.png","username":"jinlingxi","editors":"1110"},{"created":"2024-01-18T11:52:36.000Z","isPrivate":0,"projectId":"0e6ea6","snapshot":"https://s1.qingting.work/runjs/e745b7f47531.png?x-oss-process=style/webp-w-500","tags":null,"title":"Animated Tab Bar","updated":"2024-01-18T13:52:37.000Z","isTemplate":1,"htmlType":"html","pureCSS":0,"htmlLen":2315,"cssLen":2256,"jsLen":1421,"nickname":"枫林","avatar":"https://s1.qingting.work/runjs/063f7158b7044f04/9382251ac4a9.png","username":"jinlingxi","editors":"1110"},{"created":"2024-01-18T11:34:59.000Z","isPrivate":0,"projectId":"7b413f","snapshot":"https://s1.qingting.work/runjs/20daf5628157.png?x-oss-process=style/webp-w-500","tags":null,"title":"Checkbox by bimbx","updated":"2024-01-18T13:35:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":110,"cssLen":1073,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n","css":"/* Hide the default checkbox */\n.container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n.container {\n display: block;\n position: relative;\n cursor: pointer;\n font-size: 20px;\n user-select: none;\n}\n\n/* Create a custom checkbox */\n.checkmark {\n position: relative;\n top: 0;\n left: 0;\n height: 1.3em;\n width: 1.3em;\n background: #606062;\n border-radius: 5px;\n box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.30), 0px 1px 1px rgba(0,5);\n}\n\n/* When the checkbox is checked, add a blue background */\n.container input:checked ~ .checkmark {\n background-image: linear-gradient(#b9e9b3,#a8e4a0)\n}\n\n/* Create the checkmark/indicator (hidden when not checked) */\n.checkmark:after {\n content: \"\";\n position: absolute;\n display: none;\n}\n\n/* Show the checkmark when checked */\n.container input:checked ~ .checkmark:after {\n display: block;\n}\n\n/* Style the checkmark/indicator */\n.container .checkmark:after {\n left: 0.45em;\n top: 0.25em;\n width: 0.25em;\n height: 0.5em;\n border: solid white;\n border-width: 0 0.15em 0.15em 0;\n transform: rotate(45deg);\n}"},{"created":"2024-01-18T07:48:24.000Z","isPrivate":0,"projectId":"c76ad6","snapshot":"https://s1.qingting.work/runjs/1aa9fa27d64e.png?x-oss-process=style/webp-w-500","tags":"vue","title":"elementui demo","updated":"2024-01-18T09:58:28.000Z","isTemplate":0,"htmlType":"html","pureCSS":0,"htmlLen":398,"cssLen":249,"jsLen":907,"nickname":"蓝色的太平洋","avatar":"","username":"502337","editors":"1110"},{"created":"2024-01-18T06:58:04.000Z","isPrivate":0,"projectId":"906857","snapshot":null,"tags":null,"title":"Untitled","updated":"2024-01-18T07:17:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":0,"htmlLen":1825,"cssLen":815,"jsLen":850,"nickname":"Dwsy","avatar":"https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eriao1VBdibxoBVnOBpQAXicdNW8TQIMrz6rx9bc9skLoh3K9c9FpQDD2iaVpXXkcZ86SckzvhIdibiau9A/132","username":"42c74f","editors":"1110"},{"created":"2024-01-17T09:22:55.000Z","isPrivate":0,"projectId":"2d857f","snapshot":null,"tags":null,"title":"demo","updated":"2024-01-17T09:22:55.000Z","isTemplate":0,"htmlType":"html","pureCSS":0,"htmlLen":0,"cssLen":0,"jsLen":0,"nickname":"霜林醉","avatar":"https://s1.qingting.work/runjs/cf9e14a2e89b4571/4d40b9829b08.jfif","username":"l-x-f","editors":"0000"},{"created":"2024-01-17T09:19:59.000Z","isPrivate":0,"projectId":"2b5cf3","snapshot":"https://s1.qingting.work/runjs/4391c6cd84f8.png?x-oss-process=style/webp-w-500","tags":null,"title":"demo","updated":"2024-01-17T11:22:32.000Z","isTemplate":0,"htmlType":"html","pureCSS":0,"htmlLen":248,"cssLen":0,"jsLen":1722,"nickname":"霜林醉","avatar":"https://s1.qingting.work/runjs/cf9e14a2e89b4571/4d40b9829b08.jfif","username":"l-x-f","editors":"1010"},{"created":"2024-01-17T09:10:54.000Z","isPrivate":0,"projectId":"6f11a4","snapshot":"https://s1.qingting.work/runjs/5e6d01b69a6f.png?x-oss-process=style/webp-w-500","tags":null,"title":"小红书聚光平台|一站式广告投放平台","updated":"2024-01-17T11:21:37.000Z","isTemplate":1,"htmlType":"html","pureCSS":0,"htmlLen":70461,"cssLen":81466,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100"},{"created":"2024-01-17T07:01:59.000Z","isPrivate":0,"projectId":"c931f9","snapshot":"https://s1.qingting.work/runjs/77d4e5e56f67.png?x-oss-process=style/webp-w-500","tags":null,"title":"CSS cube rotating - RunJS 3D logo","updated":"2024-01-17T13:44:47.000Z","isTemplate":0,"htmlType":"html","pureCSS":1,"htmlLen":240,"cssLen":2360,"jsLen":0,"nickname":"枫林","avatar":"https://s1.qingting.work/runjs/063f7158b7044f04/9382251ac4a9.png","username":"jinlingxi","editors":"1100","html":"

\n","css":"* {\n box-sizing: border-box;\n}\n\nbody {\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: #ececec;\n position: relative;\n perspective: 1000px;\n}\n\n@keyframes view {\n to {\n transform: rotateX(325deg) rotateY(395deg);\n }\n}\n\n.cube-box {\n width: 100px;\n height: 100px;\n transform-style: preserve-3d;\n position: relative;\n transition: all 0.3s;\n transform: rotateX(-35deg) rotateY(35deg);\n animation: view 4s linear infinite;\n}\n\n.surface {\n width: 95%;\n height: 95%;\n opacity: 0.9;\n border-radius: 8%;\n backface-visibility: visible;\n position: absolute;\n}\n.surface.front {\n transform: translateZ(50px);\n background-color: #de0031;\n}\n.surface.back {\n transform: translateZ(-50px);\n background-color: #de0031;\n}\n.surface.left {\n transform: rotateY(90deg) translateZ(-50px);\n background-color: #41b882;\n}\n.surface.right {\n transform: rotateY(90deg) translateZ(50px);\n background-color: #41b882;\n}\n.surface.up {\n transform: rotateX(90deg) translateZ(50px);\n background-color: #60dafa;\n}\n.surface.down {\n transform: rotateX(90deg) translateZ(-50px);\n background-color: #60dafa;\n}\n