{"loaderData":{"0":null,"0-3":{"total":7413,"projects":[{"created":"2024-01-18T12:12:50.000Z","isPrivate":0,"projectId":"2ac588","snapshot":"https://s1.qingting.work/runjs/6d8193385d89.png?x-oss-process=style/webp-w-500","tags":null,"title":"Checkbox by gagan-gv made with CSS | Uiverse.io","updated":"2024-01-18T14:12:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":110,"cssLen":1330,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n \n \n \n \n \n \n Sketch\n \n \n

\n","css":".checkbox-wrapper-16 *,\n .checkbox-wrapper-16 *:after,\n .checkbox-wrapper-16 *:before {\n box-sizing: border-box;\n}\n\n.checkbox-wrapper-16 .checkbox-input {\n clip: rect(0 0 0 0);\n -webkit-clip-path: inset(100%);\n clip-path: inset(100%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile {\n border-color: #2260ff;\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);\n color: #2260ff;\n}\n\n.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile:before {\n transform: scale(1);\n opacity: 1;\n background-color: #2260ff;\n border-color: #2260ff;\n}\n\n.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile .checkbox-icon,\n .checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile .checkbox-label {\n color: #2260ff;\n}\n\n.checkbox-wrapper-16 .checkbox-input:focus + .checkbox-tile {\n border-color: #2260ff;\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 4px #b5c9fc;\n}\n\n.checkbox-wrapper-16 .checkbox-input:focus + .checkbox-tile:before {\n transform: scale(1);\n opacity: 1;\n}\n\n.checkbox-wrapper-16 .checkbox-tile {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 7rem;\n min-height: 7rem;\n border-radius: 0.5rem;\n border: 2px solid #b5bfd9;\n background-color: #fff;\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);\n transition: 0.15s ease;\n cursor: pointer;\n position: relative;\n}\n\n.checkbox-wrapper-16 .checkbox-tile:before {\n content: \"\";\n position: absolute;\n display: block;\n width: 1.25rem;\n height: 1.25rem;\n border: 2px solid #b5bfd9;\n background-color: #fff;\n border-radius: 50%;\n top: 0.25rem;\n left: 0.25rem;\n opacity: 0;\n transform: scale(0);\n transition: 0.25s ease;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='://www.w3.org/2000/svg' width='192' height='192' fill='%23FFFFFF' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolyline points='216 72.005 104 184 48 128.005' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'%3E%3C/polyline%3E%3C/svg%3E\");\n background-size: 12px;\n background-repeat: no-repeat;\n background-position: 50% 50%;\n}\n\n.checkbox-wrapper-16 .checkbox-tile:hover {\n border-color: #2260ff;\n}\n\n.checkbox-wrapper-16 .checkbox-tile:hover:before {\n transform: scale(1);\n opacity: 1;\n}\n\n.checkbox-wrapper-16 .checkbox-icon {\n transition: 0.375s ease;\n color: #494949;\n}\n\n.checkbox-wrapper-16 .checkbox-icon svg {\n width: 3rem;\n height: 3rem;\n}\n\n.checkbox-wrapper-16 .checkbox-label {\n color: #707070;\n transition: 0.375s ease;\n text-align: center;\n}"},{"created":"2024-01-18T12:12:03.000Z","isPrivate":0,"projectId":"60a734","snapshot":"https://s1.qingting.work/runjs/0edcb0ac6748.png?x-oss-process=style/webp-w-500","tags":null,"title":"Checkbox by gagan-gv made with CSS | Uiverse.io","updated":"2024-01-18T14:12:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":110,"cssLen":1281,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n \n

\n \n \n \n

","css":".heart-container {\n --heart-color: rgb(255, 91, 137);\n position: relative;\n width: 50px;\n height: 50px;\n transition: .3s;\n}\n\n.heart-container .checkbox {\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: 0;\n z-index: 20;\n cursor: pointer;\n}\n\n.heart-container .svg-container {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.heart-container .svg-outline,\n .heart-container .svg-filled {\n fill: var(--heart-color);\n position: absolute;\n}\n\n.heart-container .svg-filled {\n animation: keyframes-svg-filled 1s;\n display: none;\n}\n\n.heart-container .svg-celebrate {\n position: absolute;\n animation: keyframes-svg-celebrate .5s;\n animation-fill-mode: forwards;\n display: none;\n stroke: var(--heart-color);\n fill: var(--heart-color);\n stroke-width: 2px;\n}\n\n.heart-container .checkbox:checked~.svg-container .svg-filled {\n display: block\n}\n\n.heart-container .checkbox:checked~.svg-container .svg-celebrate {\n display: block\n}\n\n@keyframes keyframes-svg-filled {\n 0% {\n transform: scale(0);\n }\n\n 25% {\n transform: scale(1.2);\n }\n\n 50% {\n transform: scale(1);\n filter: brightness(1.5);\n }\n}\n\n@keyframes keyframes-svg-celebrate {\n 0% {\n transform: scale(0);\n }\n\n 50% {\n opacity: 1;\n filter: brightness(1.5);\n }\n\n 100% {\n transform: scale(1.4);\n opacity: 0;\n display: none;\n }\n}"},{"created":"2024-01-18T11:55:00.000Z","isPrivate":0,"projectId":"3d2d9c","snapshot":"https://s1.qingting.work/runjs/01f38637bb1e.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button Shadow","updated":"2024-01-19T00:20:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":66,"cssLen":643,"jsLen":0,"nickname":"枫林","avatar":"https://s1.qingting.work/runjs/063f7158b7044f04/9382251ac4a9.png","username":"jinlingxi","editors":"1100","html":"

\n \n

","css":"html, body {\n height: 100%;\n}\n\n.wrap {\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.button {\n width: 140px;\n height: 45px;\n font-family: 'Roboto', sans-serif;\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 2.5px;\n font-weight: 500;\n color: #000;\n background-color: #fff;\n border: none;\n border-radius: 45px;\n box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);\n transition: all 0.3s ease 0s;\n cursor: pointer;\n outline: none;\n }\n\n.button:hover {\n background-color: #2EE59D;\n box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);\n color: #fff;\n transform: translateY(-7px);\n}"},{"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"}]}},"actionData":null,"errors":null}