超酷！HTML代码实现一条龙穿梭代码雨，中央惊现龙头标志

<!DOCTYPE html> <html> <head> <title>Code Rain with Dragon</title> <style> body { background-color: #000; overflow: hidden; font-family: monospace; color: #0F0; } #dragon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 30px; } .code { position: absolute; color: #0F0; } </style> </head> <body> <div id="dragon"></div> <script> const dragon = document.getElementById('dragon'); const codeRain = []; const codeChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; const codeCharsLength = codeChars.length; for (let i = 0; i < 100; i++) { const code = document.createElement('div'); code.className = 'code'; code.style.left = Math.floor(Math.random() * window.innerWidth) + 'px'; code.style.top = Math.floor(Math.random() * window.innerHeight) + 'px'; code.textContent = codeChars.charAt(Math.floor(Math.random() * codeCharsLength)); codeRain.push(code); document.body.appendChild(code); } function updateCodeRain() { codeRain.forEach(code => { const top = parseInt(code.style.top); code.style.top = (top >= window.innerHeight) ? '0px' : (top + 3) + 'px'; }); requestAnimationFrame(updateCodeRain); } updateCodeRain(); </script> </body> </html> ######[AI写代码神器 | 1103点数解答 | 2024-08-23 20:14:26]

服务商

更多选项

快捷项

自定义