[{"id":226,"created_at":"2024-05-01T23:48:18.848836+00:00","html":"

\r\n

Click to unsheathe

\r\n","css":"@import url(\"https://fonts.googleapis.com/css2?family=Butcherman\");\r\n\r\nbody {\r\n background: black;\r\n margin: 0;\r\n padding: 0;\r\n font-family: Butcherman;\r\n color: whitesmoke;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.lightsaber {\r\n position: relative;\r\n width: 14px;\r\n height: 400px;\r\n margin: 0 auto;\r\n rotate: 230deg;\r\n}\r\n\r\n.handle {\r\n width: 100%;\r\n height: 100px;\r\n background-color: #333;\r\n border-radius: 10px 10px 0px 0px;\r\n position: relative;\r\n}\r\n\r\n.emitter {\r\n width: 40%;\r\n height: 20px;\r\n background-color: #666;\r\n border-radius: 5px;\r\n position: absolute;\r\n top: 10px;\r\n left: 50%;\r\n margin-left: 0.3px;\r\n transform: translateX(-50%);\r\n}\r\n\r\n.switch {\r\n width: 23px;\r\n height: 13px;\r\n background-color: #ccc;\r\n border-radius: 4px;\r\n position: absolute;\r\n bottom: 3px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n}\r\n\r\n.blade {\r\n position: absolute;\r\n top: 100px;\r\n left: 0;\r\n width: 100%;\r\n height: 0;\r\n background: linear-gradient(to bottom, #fff, #ff0000);\r\n box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);\r\n transition: height 1s ease-in-out;\r\n border-radius: 0px 0px 10px 10px;\r\n}\r\n\r\n.blade.active {\r\n height: 300px;\r\n}\r\n\r\n.lightsaber:has(.blade.active) {\r\n animation: rotate 1s forwards 1.1s;\r\n}\r\n\r\n@keyframes rotate {\r\n to {\r\n rotate: 1670deg;\r\n }\r\n}\r\n\r\n.text {\r\n position: absolute;\r\n bottom: 0;\r\n opacity: 0.2;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n}\r\n","js":"const blade = document.querySelector('.blade');\r\n\r\nfunction toggleBlade() {\r\n blade.classList.toggle('active');\r\n}\r\n\r\ndocument.addEventListener('click', toggleBlade);","user_id":"4529d7ae-0865-47e6-850e-f9cbf1ed7d3c","project_key":"KTY7Bj","description":"Light Saber","plugins":[{"css":{"tailwind":false,"bootstrap":false,"fontawesome":false,"materialicons":false,"googlefonts":false,"bulma":false},"js":{"animejs":false,"gsap":false,"motionone":false,"threejs":false,"velocity":false,"popmotion":false,"scrollreveal":false}}],"public":true,"config":{"tags": [], "babelActive": false, "cssProcessor": false, "userImportedJS": [], "typescriptActive": false},"tags":["css art","light saber"],"hide_js":false,"hide_css":false,"view":[{"views":492}]}]