{"loaderData":{"0":null,"0-3":{"total":7313,"projects":[{"created":"2024-01-19T08:31:48.000Z","isPrivate":0,"projectId":"6a306d","snapshot":"https://s1.qingting.work/runjs/beefb4164f8e.png?x-oss-process=style/webp-w-500","tags":null,"title":"BV Button","updated":"2024-01-19T11:03:28.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":527,"cssLen":2125,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n Install free version\n

\n","css":".runjs-1 {\n box-sizing: border-box;\n display: flex;\n position: relative;\n box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 8px 0px;\n background-color: rgb(52, 186, 11);\n border-radius: 2px;\n}\n\n@media print {\n .runjs-1 {\n text-shadow: none !important;\n box-shadow: none !important;\n }\n}\n.runjs-2 {\n box-sizing: border-box;\n background-color: transparent;\n display: inline-block;\n min-width: 180px;\n padding: 10px 15px;\n text-decoration: none;\n flex: 1 1 auto;\n cursor: pointer;\n text-align: center;\n color: rgb(255, 255, 255);\n font-size: 1.2rem;\n}\n\n.runjs-2:hover {\n background-color: rgb(48, 170, 10);\n border-top-left-radius: 2px;\n border-bottom-left-radius: 2px;\n}\n\n@media print {\n .runjs-2 {\n text-shadow: none !important;\n box-shadow: none !important;\n text-decoration: underline;\n }\n\n .runjs-2:hover {\n text-decoration: underline;\n }\n}\n.runjs-3 {\n box-sizing: border-box;\n text-decoration: none;\n background-color: transparent;\n position: relative;\n flex-grow: 0;\n flex-shrink: 0;\n z-index: 1;\n border: none;\n display: inline-block;\n font-size: inherit;\n line-height: 1;\n color: inherit;\n text-align: left;\n text-indent: 0px;\n border-spacing: 0px;\n padding: 0px;\n width: 28px;\n cursor: pointer;\n}\n\n.runjs-3:hover {\n text-decoration: underline;\n background-color: rgb(48, 170, 10);\n border-top-right-radius: 2px;\n border-bottom-right-radius: 2px;\n}\n\n.runjs-3:after {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translateX(-50%) translateY(-50%);\n text-align: center;\n margin-left: 1px;\n content: \"\";\n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-top: 4px solid rgb(255, 255, 255);\n}\n\n.runjs-3:before {\n content: \"\";\n display: block;\n width: 0px;\n position: absolute;\n left: 0px;\n top: 15%;\n bottom: 0px;\n height: 70%;\n border-left: 1px solid rgb(48, 170, 10);\n border-right: 1px solid rgb(58, 206, 13);\n}\n\n@media print {\n .runjs-3 {\n text-shadow: none !important;\n box-shadow: none !important;\n text-decoration: underline;\n }\n\n .runjs-3:hover {\n text-decoration: underline;\n }\n}\n"},{"created":"2024-01-19T07:57:51.000Z","isPrivate":0,"projectId":"0e897f","snapshot":"https://s1.qingting.work/runjs/d274e3c5a64e.png?x-oss-process=style/webp-w-500","tags":null,"title":"drop-shadow 实现任意边框","updated":"2024-01-21T09:31:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":0,"htmlLen":35,"cssLen":317,"jsLen":0,"nickname":"cissy","avatar":"","username":"a85f40","editors":"1100"},{"created":"2024-01-19T00:50:07.000Z","isPrivate":0,"projectId":"b2048b","snapshot":"https://s1.qingting.work/runjs/ab27d7948d54.png?x-oss-process=style/webp-w-500","tags":null,"title":"Select from PostHog","updated":"2024-01-19T11:08:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1738,"cssLen":7538,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n \n \n

\n","css":".container {\n position: relative;\n}\n.runjs-1 {\n box-sizing: border-box;\n border-color: #dadbd2;\n border-style: solid;\n border-width: 0px;\n touch-action: manipulation;\n color: inherit;\n overflow: visible;\n text-transform: none;\n align-items: center;\n background: none;\n border: none;\n border-radius: 0.375rem;\n display: flex;\n flex-direction: row;\n flex-shrink: 0;\n font-size: 0.875rem;\n font-weight: 500;\n gap: 0.5rem;\n justify-content: flex-start;\n line-height: 1.5rem;\n text-align: left;\n user-select: none;\n appearance: none !important;\n cursor: pointer;\n font-family: \"MatterSQ\", -apple-system, BlinkMacSystemFont, \"Inter\",\n \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", helvetica, arial, sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n outline: none;\n padding: 0px;\n position: relative;\n transition: opacity 0.2s ease, transform 0.2s ease;\n}\n\n.runjs-2 {\n box-sizing: border-box;\n flex: 1 1 0%;\n align-items: center;\n border-color: transparent;\n border-style: solid;\n border-width: 1px;\n color: #111;\n display: flex;\n flex-direction: row;\n flex-shrink: 0;\n font-size: 0.875rem;\n font-weight: 500;\n gap: 0.5rem;\n height: 100%;\n justify-content: flex-start;\n line-height: 1.5rem;\n min-height: 2.3125rem;\n position: relative;\n text-align: left;\n width: 100%;\n background: transparent;\n padding: calc(0.25rem - 0.1875rem * 0.5) 0.375rem\n calc(0.25rem + 0.1875rem * 0.5) 0.5rem;\n}\n\n.runjs-2:after {\n border-radius: 0.375rem;\n box-shadow: 0 0.1875rem 0 -1px #e1dddd;\n content: \"\";\n inset: -1px -1px calc(0.1875rem - 1px) -1px;\n position: absolute;\n transition: opacity 0.2s ease 0s;\n z-index: 0;\n border: 1px solid #aaa;\n background: #fff;\n}\n\n.runjs-2:before {\n border: 1px solid #ccc;\n border-radius: 0.375rem;\n content: \"\";\n inset: -1px;\n position: absolute;\n z-index: 0;\n}\n\n.runjs-3 {\n box-sizing: border-box;\n border-color: #dadbd2;\n border-style: solid;\n border-width: 0px;\n align-items: center;\n display: flex;\n flex: 1 1 0%;\n line-height: normal;\n overflow: hidden;\n z-index: 1;\n}\n\n.runjs-4 {\n box-sizing: border-box;\n border-color: #dadbd2;\n border-style: solid;\n border-width: 0px;\n display: flex !important;\n flex: 1 1 0% !important;\n}\n\n.runjs-5 {\n box-sizing: border-box;\n border-color: #dadbd2;\n border-style: solid;\n border-width: 0px;\n display: flex;\n flex-shrink: 0;\n font-size: 1.5rem;\n place-items: center;\n transition: color 0.2s ease 0s;\n z-index: 1;\n}\n\n.runjs-6 {\n box-sizing: border-box;\n border-color: #dadbd2;\n border-style: solid;\n border-width: 0px;\n display: inline-block;\n vertical-align: -0.15em;\n width: 1em;\n overflow: hidden;\n opacity: 0.75;\n}\n\n.runjs-7 {\n box-sizing: border-box;\n border-color: #dadbd2;\n border-style: solid;\n border-width: 0px;\n}\n\n.menu-1 {\n box-sizing: border-box;\n border-color: #dadbd2;\n border-style: solid;\n border-width: 0px;\n display: flex;\n flex-direction: row;\n perspective: 80rem;\n perspective-origin: center top;\n z-index: 1063;\n position: absolute;\n top: 40px;\n left: 0px;\n max-height: 291.688px;\n max-width: 777.266px;\n width: 336px;\n}\n\n.menu-2 {\n box-sizing: border-box;\n border-style: solid;\n border-width: 0px;\n border: 1px solid #dadbd2;\n border-radius: 0.375rem;\n box-shadow: 0 3px 0 #dadbd2;\n flex-grow: 1;\n max-width: 100%;\n overflow: hidden;\n position: relative;\n transition: opacity 50ms ease 0s, transform 50ms ease 0s;\n margin-top: 0.25rem;\n transform-origin: center top;\n opacity: 1;\n transform: none;\n background: #fff;\n border-color: #ccc;\n padding: 0.25rem;\n}\n\n.menu-3 {\n box-sizing: border-box;\n border-color: #dadbd2;\n border-style: solid;\n border-width: 0px;\n max-height: 100%;\n overflow-y: auto;\n}\n\n.menu-4 {\n box-sizing: border-box;\n border-color: #dadbd2;\n border-style: solid;\n border-width: 0px;\n margin-top: 0px;\n list-style: none;\n margin-bottom: 0px;\n padding-left: 0px;\n}\n\n.menu-5 {\n box-sizing: border-box;\n border-color: #dadbd2;\n border-style: solid;\n border-width: 0px;\n}\n\n.menu-6 {\n box-sizing: border-box;\n border-color: #dadbd2;\n border-style: solid;\n border-width: 0px;\n touch-action: manipulation;\n margin: 0px;\n color: inherit;\n overflow: visible;\n text-transform: none;\n align-items: center;\n background: none;\n border: none;\n border-radius: 0.375rem;\n display: flex;\n flex-direction: row;\n flex-shrink: 0;\n font-size: 0.875rem;\n font-weight: 500;\n justify-content: flex-start;\n line-height: 1.5rem;\n text-align: left;\n user-select: none;\n appearance: none !important;\n width: 100%;\n gap: 0.25rem;\n cursor: pointer;\n font-family: \"MatterSQ\", -apple-system, BlinkMacSystemFont, \"Inter\",\n \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", helvetica, arial, sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n outline: none;\n padding: 0px;\n position: relative;\n transition: opacity 0.2s ease, transform 0.2s ease;\n}\n\n.menu-6:hover {\n background-color: #e4e5de;\n}\n\n.menu-7 {\n box-sizing: border-box;\n flex: 1 1 0%;\n align-items: center;\n background: none;\n border-color: transparent;\n border-style: solid;\n border-width: 0;\n color: #111;\n display: flex;\n flex-direction: row;\n flex-shrink: 0;\n font-size: 0.875rem;\n font-weight: 500;\n gap: 0.25rem;\n height: 100%;\n justify-content: flex-start;\n line-height: 1.5rem;\n min-height: 2.0625rem;\n padding: 0.25rem 0.5rem;\n position: relative;\n text-align: left;\n width: 100%;\n}\n\n.menu-8 {\n box-sizing: border-box;\n border-color: #dadbd2;\n border-style: solid;\n border-width: 0px;\n align-items: center;\n display: flex;\n flex: 1 1 0%;\n line-height: normal;\n overflow: hidden;\n}\n\n.menu-9 {\n box-sizing: border-box;\n border-color: #dadbd2;\n border-style: solid;\n border-width: 0px;\n margin-bottom: calc(1px * 0) !important;\n margin-top: calc(1px * (1 - 0)) !important;\n}\n\n.menu-10 {\n box-sizing: border-box;\n border-color: #dadbd2;\n border-style: solid;\n border-width: 0px;\n touch-action: manipulation;\n margin: 0px;\n color: inherit;\n overflow: visible;\n text-transform: none;\n align-items: center;\n background: none;\n border: none;\n border-radius: 0.375rem;\n display: flex;\n flex-direction: row;\n flex-shrink: 0;\n font-size: 0.875rem;\n font-weight: 500;\n justify-content: flex-start;\n line-height: 1.5rem;\n text-align: left;\n user-select: none;\n appearance: none !important;\n width: 100%;\n gap: 0.25rem;\n cursor: pointer;\n font-family: \"MatterSQ\", -apple-system, BlinkMacSystemFont, \"Inter\",\n \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", helvetica, arial, sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n outline: none;\n padding: 0px;\n position: relative;\n transition: opacity 0.2s ease, transform 0.2s ease;\n background-color: #e4e5de;\n}\n\n.menu-10:hover {\n background-color: #e4e5de;\n}\n\n.menu-11 {\n box-sizing: border-box;\n flex: 1 1 0%;\n align-items: center;\n background: none;\n border-color: transparent;\n border-style: solid;\n border-width: 0;\n color: #111;\n display: flex;\n flex-direction: row;\n flex-shrink: 0;\n font-size: 0.875rem;\n font-weight: 500;\n gap: 0.25rem;\n height: 100%;\n justify-content: flex-start;\n line-height: 1.5rem;\n min-height: 2.0625rem;\n padding: 0.25rem 0.5rem;\n position: relative;\n text-align: left;\n width: 100%;\n}\n\n.menu-12 {\n box-sizing: border-box;\n border-color: #dadbd2;\n border-style: solid;\n border-width: 0px;\n align-items: center;\n display: flex;\n flex: 1 1 0%;\n line-height: normal;\n overflow: hidden;\n}\n"},{"created":"2024-01-19T00:28:59.000Z","isPrivate":0,"projectId":"a5adca","snapshot":"https://s1.qingting.work/runjs/ac9e4fb7f223.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by Yaya12085","updated":"2024-01-19T02:29:36.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1087,"cssLen":596,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"html, body {\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\nbutton {\n max-width: 320px;\n display: flex;\n padding: 0.5rem 1.4rem;\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 700;\n text-align: center;\n text-transform: uppercase;\n vertical-align: middle;\n align-items: center;\n border-radius: 0.5rem;\n border: 1px solid rgba(0, 0, 0, 0.25);\n gap: 0.75rem;\n color: rgb(65, 63, 63);\n background-color: #fff;\n cursor: pointer;\n transition: all .6s ease;\n}\n\n.button svg {\n height: 24px;\n}\n\nbutton:hover {\n transform: scale(1.02);\n}"},{"created":"2024-01-19T00:27:37.000Z","isPrivate":0,"projectId":"e5ee83","snapshot":"https://s1.qingting.work/runjs/3924e248e1b3.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by adamgiebl","updated":"2024-01-19T02:28:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":104,"cssLen":1796,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"html, body{\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\nbutton {\n transform: rotate(-25deg) skew(25deg);\n transform-style: preserve-3d;\n position: relative;\n list-style: none;\n width: 100px;\n height: 32px;\n border: none;\n background: transparent;\n font-family: inherit;\n cursor: pointer;\n}\n\nbutton:before {\n content: '';\n position: absolute;\n bottom: -10px;\n left: -5px;\n width: 100%;\n height: 10px;\n background: #2a2a2a;\n transform: skewX(-41deg);\n}\n\nbutton:after {\n content: '';\n position: absolute;\n top: 5px;\n left: -9px;\n width: 9px;\n height: 100%;\n background: #2a2a2a;\n transform: skewY(-49deg);\n}\n\nbutton span {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: #2a2a2a;\n color: #fff;\n font-size: 25px;\n transition: 1.1s ease-out;\n}\n\nbutton:hover span {\n z-index: 1000;\n transition: .3s;\n color: #fff;\n}\n\nbutton:hover span:nth-child(5) {\n transform: translate(40px, -40px);\n opacity: 1;\n}\n\nbutton:hover span:nth-child(4) {\n transform: translate(30px, -30px);\n opacity: .8;\n}\n\nbutton:hover span:nth-child(3) {\n transform: translate(20px, -20px);\n opacity: .6;\n}\n\nbutton:hover span:nth-child(2) {\n transform: translate(10px, -10px);\n opacity: .4;\n}\n\nbutton:hover span:nth-child(1) {\n transform: translate(0px, 0px);\n opacity: .2;\n}\n\nbutton:active span:nth-child(5) {\n transform: translate(20px, -20px);\n opacity: 1;\n}\n\nbutton:active span:nth-child(4) {\n transform: translate(15px, -15px);\n}\n\nbutton:active span:nth-child(3) {\n transform: translate(10px, -10px);\n}\n\nbutton:active span:nth-child(2) {\n transform: translate(5px, -5px);\n}\n\nbutton:active span:nth-child(1) {\n transform: translate(0px, 0px);\n}\n\nbutton:nth-child(1):hover span {\n background: #52E19F;\n}"},{"created":"2024-01-18T23:21:49.000Z","isPrivate":0,"projectId":"e328ba","snapshot":"https://s1.qingting.work/runjs/8bd2b4e897da.png?x-oss-process=style/webp-w-500","tags":null,"title":"Button by Madflows","updated":"2024-01-19T01:21:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":82,"cssLen":649,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".button {\n position: relative;\n overflow: hidden;\n height: 3rem;\n padding: 0 2rem;\n border-radius: 1.5rem;\n background: #3d3a4e;\n background-size: 400%;\n color: #fff;\n border: none;\n cursor: pointer;\n}\n\n.button:hover::before {\n transform: scaleX(1);\n}\n\n.button-content {\n position: relative;\n z-index: 1;\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n transform: scaleX(0);\n transform-origin: 0 50%;\n width: 100%;\n height: inherit;\n border-radius: inherit;\n background: linear-gradient(\n 82.3deg,\n rgba(150, 93, 233, 1) 10.8%,\n rgba(99, 88, 238, 1) 94.3%\n );\n transition: all 0.475s;\n}\n"},{"created":"2024-01-18T16:23:44.000Z","isPrivate":0,"projectId":"d2ab58","snapshot":null,"tags":null,"title":"React 官网","updated":"2024-01-18T16:23:44.000Z","isTemplate":0,"htmlType":"html","pureCSS":0,"htmlLen":0,"cssLen":0,"jsLen":0,"nickname":"曦","avatar":"https://thirdwx.qlogo.cn/mmopen/vi_32/SsrfN68wK9iajFkrxs2AHNsXMxwXlWj76O8SkK5e23v6SKicQj01cEUNyoGqSnjLrVVCKTEuXz05XGiaicpek1ibPicg/132","username":"73a1f7","editors":"0000"},{"created":"2024-01-18T16:22:35.000Z","isPrivate":0,"projectId":"c08f0a","snapshot":null,"tags":null,"title":"CSS cube rotating - RunJS 3D logo","updated":"2024-01-18T16:22:35.000Z","isTemplate":0,"htmlType":"html","pureCSS":0,"htmlLen":0,"cssLen":0,"jsLen":0,"nickname":"曦","avatar":"https://thirdwx.qlogo.cn/mmopen/vi_32/SsrfN68wK9iajFkrxs2AHNsXMxwXlWj76O8SkK5e23v6SKicQj01cEUNyoGqSnjLrVVCKTEuXz05XGiaicpek1ibPicg/132","username":"73a1f7","editors":"0000"},{"created":"2024-01-18T16:21:40.000Z","isPrivate":0,"projectId":"008ca0","snapshot":null,"tags":null,"title":"纯css动画按钮","updated":"2024-01-18T16:21:40.000Z","isTemplate":0,"htmlType":"html","pureCSS":0,"htmlLen":0,"cssLen":0,"jsLen":0,"nickname":"曦","avatar":"https://thirdwx.qlogo.cn/mmopen/vi_32/SsrfN68wK9iajFkrxs2AHNsXMxwXlWj76O8SkK5e23v6SKicQj01cEUNyoGqSnjLrVVCKTEuXz05XGiaicpek1ibPicg/132","username":"73a1f7","editors":"0000"},{"created":"2024-01-18T16:21:22.000Z","isPrivate":0,"projectId":"397e8b","snapshot":null,"tags":null,"title":"Neumorphic Elements","updated":"2024-01-18T16:21:22.000Z","isTemplate":0,"htmlType":"html","pureCSS":0,"htmlLen":0,"cssLen":0,"jsLen":0,"nickname":"曦","avatar":"https://thirdwx.qlogo.cn/mmopen/vi_32/SsrfN68wK9iajFkrxs2AHNsXMxwXlWj76O8SkK5e23v6SKicQj01cEUNyoGqSnjLrVVCKTEuXz05XGiaicpek1ibPicg/132","username":"73a1f7","editors":"0000"},{"created":"2024-01-18T16:20:35.000Z","isPrivate":0,"projectId":"e55563","snapshot":null,"tags":null,"title":"Login Page","updated":"2024-01-18T16:20:35.000Z","isTemplate":0,"htmlType":"html","pureCSS":0,"htmlLen":0,"cssLen":0,"jsLen":0,"nickname":"曦","avatar":"https://thirdwx.qlogo.cn/mmopen/vi_32/SsrfN68wK9iajFkrxs2AHNsXMxwXlWj76O8SkK5e23v6SKicQj01cEUNyoGqSnjLrVVCKTEuXz05XGiaicpek1ibPicg/132","username":"73a1f7","editors":"0000"},{"created":"2024-01-18T16:20:04.000Z","isPrivate":0,"projectId":"7e87a3","snapshot":null,"tags":null,"title":"36 - Hoverboard","updated":"2024-01-18T16:20:04.000Z","isTemplate":0,"htmlType":"html","pureCSS":0,"htmlLen":0,"cssLen":0,"jsLen":0,"nickname":"曦","avatar":"https://thirdwx.qlogo.cn/mmopen/vi_32/SsrfN68wK9iajFkrxs2AHNsXMxwXlWj76O8SkK5e23v6SKicQj01cEUNyoGqSnjLrVVCKTEuXz05XGiaicpek1ibPicg/132","username":"73a1f7","editors":"0000"}]}},"actionData":null,"errors":null}