Liquid Neon Animation
Home
Snippets
Liquid Neon Animation
HTML
CSS
JS
<div class="container"> <div class="blob"></div> <div class="blob"></div> <div class="blob"></div> <div class="text">LOADING</div> </div>
* { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: grid; place-items: center; background: #050505; overflow: hidden; } .container { position: relative; width: 220px; height: 80px; filter: blur(8px) contrast(20); } .blob { position: absolute; width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, #00f5ff, #ff00c8); animation: move 3s ease-in-out infinite; } .blob:nth-child(2) { left: 80px; animation-delay: 0.3s; } .blob:nth-child(3) { left: 160px; animation-delay: 0.6s; } @keyframes move { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-25px) scale(1.2); } } .text { position: absolute; bottom: -40px; width: 100%; text-align: center; color: #fff; font-family: Arial, sans-serif; letter-spacing: 3px; font-size: 12px; opacity: 0.6; }
//javascript
Ad #1
Ad #2
Scroll to Top