3D Pulse Rings
Home
Snippets
3D Pulse Rings
HTML
CSS
JS
<div class="portal"></div>
* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #000; overflow: hidden; } .portal { position: relative; width: 20px; height: 20px; } .ring { position: absolute; inset: 0; border: 2px solid hsl(var(--h) 100% 50%); border-radius: 50%; transform-style: preserve-3d; animation: expand 2s linear infinite; opacity: .8; } @keyframes expand { 0% { transform: translateZ(0) scale(0.1); opacity: 1; } 100% { transform: translateZ(200px) scale(8); opacity: 0; } }
const portal = document.querySelector('.portal'); for (let i = 0; i < 20; i++) { const ring = document.createElement('div'); ring.className = 'ring'; ring.style.setProperty("--h", i * 18); ring.style.animationDelay = `${i * 0.1}s`; portal.appendChild(ring); }
Ad #1
Ad #2
Scroll to Top