body { width: 100vw; height: 100vh; overflow: hidden; background: #000; font-family: 'Arial', sans-serif; }
#logo { position: absolute; width: 200px; height: 100px; display: flex; align-items: center; justify-content: center; font-size: 48px; font-weight: bold; color: #fff; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); transition: background-color 0.1s ease; border-radius: 8px; } </style>
</head> <body> <div id="logo">DVD</div> <script> const logo = document.getElementById('logo'); const logoRect = { width: 200, height: 100 }; let x = Math.random() * (window.innerWidth - logoRect.width); let y = Math.random() * (window.innerHeight - logoRect.height); let dx = 2; let dy = 2; function getRandomColor() { const r = Math.floor(Math.random() * 256); const g = Math.floor(Math.random() * 256); const b = Math.floor(Math.random() * 256); return `rgb(${r}, ${g}, ${b})`; } logo.style.backgroundColor = getRandomColor(); function animate() { const viewportWidth = window.innerWidth; const viewportHeight = window.innerHeight; x += dx; y += dy; if (x <= 0 || x + logoRect.width >= viewportWidth) { dx = -dx; x = x <= 0 ? 0 : viewportWidth - logoRect.width; logo.style.backgroundColor = getRandomColor(); } if (y <= 0 || y + logoRect.height >= viewportHeight) { dy = -dy; y = y <= 0 ? 0 : viewportHeight - logoRect.height; logo.style.backgroundColor = getRandomColor(); } logo.style.left = x + 'px'; logo.style.top = y + 'px'; requestAnimationFrame(animate); } window.addEventListener('resize', () => { const viewportWidth = window.innerWidth; const viewportHeight = window.innerHeight; if (x + logoRect.width > viewportWidth) { x = viewportWidth - logoRect.width; } if (y + logoRect.height > viewportHeight) { y = viewportHeight - logoRect.height; } }); animate(); </script> </body> </html>