[{"id":217,"created_at":"2024-04-18T17:41:23.880744+00:00","html":"

\r\n

\r\n","css":"body {\r\n margin: 0;\r\n padding: 0;\r\n background-color: #000;\r\n overflow: hidden;\r\n}\r\n\r\n.container {\r\n position: relative;\r\n height: 100vh;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.wave {\r\n position: absolute;\r\n width: 200px;\r\n height: 200px;\r\n border-radius: 50%;\r\n background-color: transparent;\r\n transform: scale(0);\r\n box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);\r\n animation: wave 5s ease-in-out infinite;\r\n}\r\n\r\n@keyframes wave {\r\n 0% {\r\n transform: scale(0);\r\n border-radius: 50%;\r\n background-color: transparent;\r\n box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);\r\n }\r\n 25% {\r\n transform: scale(1);\r\n background-color: rgba(0, 255, 255, 0.2);\r\n box-shadow: 0 0 50px rgba(0, 255, 255, 0.8);\r\n }\r\n 50% {\r\n transform: scale(1.2);\r\n background-color: rgba(0, 255, 255, 0.4);\r\n box-shadow: 0 0 100px rgba(0, 255, 255, 1);\r\n }\r\n 75% {\r\n transform: scale(1);\r\n background-color: rgba(0, 255, 255, 0.2);\r\n box-shadow: 0 0 50px rgba(0, 255, 255, 0.8);\r\n }\r\n 100% {\r\n transform: scale(0);\r\n border-radius: 50%;\r\n background-color: transparent;\r\n box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);\r\n }\r\n}\r\n\r\n.wave:nth-child(1) {\r\n left: 10%;\r\n animation-delay: 0s;\r\n}\r\n\r\n.wave:nth-child(2) {\r\n left: 20%;\r\n animation-delay: 0.2s;\r\n}\r\n\r\n.wave:nth-child(3) {\r\n left: 30%;\r\n animation-delay: 0.4s;\r\n}\r\n\r\n.wave:nth-child(4) {\r\n left: 40%;\r\n animation-delay: 0.6s;\r\n}\r\n\r\n.wave:nth-child(5) {\r\n left: 50%;\r\n animation-delay: 0.8s;\r\n}\r\n\r\n.wave:nth-child(6) {\r\n left: 60%;\r\n animation-delay: 1s;\r\n}\r\n\r\n.wave:nth-child(7) {\r\n left: 70%;\r\n animation-delay: 1.2s;\r\n}\r\n\r\n.wave:nth-child(8) {\r\n left: 80%;\r\n animation-delay: 1.4s;\r\n}\r\n\r\n.wave:nth-child(9) {\r\n left: 90%;\r\n animation-delay: 1.6s;\r\n}\r\n\r\n.wave:nth-child(10) {\r\n left: 100%;\r\n animation-delay: 1.8s;\r\n}\r\n","js":"//\r\n","user_id":"eb85392e-2ebd-4695-9297-d8ef016b3ea4","project_key":"VcpkDX","description":"Neon Wave Animation CSS Only","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","neon wave","wave animation","background effect"],"hide_js":false,"hide_css":false,"messages":[],"view":[{"views":565}],"profiles":{"username":"this"}}]