3D Floating Orb animation
Home
Snippets
3D Floating Orb animation
HTML
CSS
JS
<body> <div class="container"> <div class="orb"></div> </div> </body>
body { display: flex; justify-content: center; align-items: center; height: 100vh; background: radial-gradient(circle, #1b2735, #090a0f); overflow: hidden; margin: 0; } .container { position: relative; perspective: 1000px; } .orb { position: relative; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.15), transparent); box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), inset 0 0 40px rgba(255, 255, 255, 0.3); animation: float 6s ease-in-out infinite; transition: transform 0.3s, box-shadow 0.3s; } .particle { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.7); animation: drift 8s infinite ease-in-out; pointer-events: none; } @keyframes drift { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(calc(100px - 200vw), calc(100px - 200vh)) scale(0.5); opacity: 0; } }
const container = document.querySelector('.container'); for (let i = 0; i < 50; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); particle.style.left = `${Math.random() * 100}%`; particle.style.top = `${Math.random() * 100}%`; particle.style.animationDelay = `${Math.random() * 8}s`; particle.style.width = `${Math.random() * 6 + 2}px`; particle.style.height = particle.style.width; container.appendChild(particle); }
Ad #1
Ad #2
Scroll to Top