Infinity Tunnel
Home
Snippets
Infinity Tunnel
HTML
CSS
JS
<div class="tunnel" id="tunnel"></div>
body { margin: 0; background: #000; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; } .tunnel { position: relative; width: 200px; height: 200px; perspective: 800px; } .frame { position: absolute; width: 100%; height: 100%; border: 4px solid #0ff; animation: zoom 3s linear infinite; opacity: 0.8; } @keyframes zoom { 0% { transform: translateZ(0) scale(1); opacity: 1; } 100% { transform: translateZ(600px) scale(0); opacity: 0; } }
const tunnel = document.getElementById('tunnel'); for (let i = 0; i < 15; i++) { const frame = document.createElement('div'); frame.className = 'frame'; frame.style.animationDelay = `${i * 0.2}s`; tunnel.appendChild(frame); }
Ad #1
Ad #2
Scroll to Top