Neon Wave Animation
Home
Snippets
Neon Wave Animation
HTML
CSS
JS
<div class="wave"> <span></span> <span></span> <span></span> <span></span> </div>
body{ margin:0; height:100vh; background:#020617; display:flex; justify-content:center; align-items:center; overflow:hidden; } .wave{ position:relative; width:600px; height:200px; } .wave span{ position:absolute; width:100%; height:100%; border-radius:50%; border:2px solid #38bdf8; animation:waveMove 4s linear infinite; } .wave span:nth-child(2){ border-color:#a855f7; animation-delay:1s; } .wave span:nth-child(3){ border-color:#22c55e; animation-delay:2s; } .wave span:nth-child(4){ border-color:#f59e0b; animation-delay:3s; } @keyframes waveMove{ 0%{ transform:scale(0.2); opacity:1; } 100%{ transform:scale(2); opacity:0; } }
//javascript
Ad #1
Ad #2
Scroll to Top