超炫！“尤思寒是大**！”文字随鼠标动且色彩随机变幻

好的，下面是一段实现你需求的 HTML 代码。这段代码会在一个黑色背景的屏幕上显示“尤思寒是大**！”的文字，并且每个文字会跟随鼠标移动，颜色随机变化，字号特大。 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>炫彩文字跟随鼠标</title> <style> body { margin: 0; overflow: hidden; background-color: black; color: white; font-size: 5em; /* 特大字号 */ font-family: Arial, sans-serif; } .char { position: absolute; transition: transform 0.1s, color 0.1s; } </style> </head> <body> <div id="text">尤思寒是大**！</div> <script> const text = document.getElementById('text'); const chars = text.textContent.split(''); text.textContent = ''; chars.forEach(char => { const span = document.createElement('span'); span.className = 'char'; span.textContent = char; text.appendChild(span); }); let mouseX = 0; let mouseY = 0; window.addEventListener('mousemove', e => { mouseX = e.clientX; mouseY = e.clientY; }); function updateChars() { const chars = document.querySelectorAll('.char'); chars.forEach(char => { const x = Math.random() * 100 - 50; const y = Math.random() * 100 - 50; const color = `hsl(${Math.random() * 360}, 100%, 50%)`; char.style.transform = `translate(${mouseX + x}px, ${mouseY + y}px)`; char.style.color = color; }); } setInterval(updateChars, 30); </script> </body> </html> ``` ### 额外需要注意的逻辑点： 1. **性能优化**：频繁的 `setInterval` 调用可能会导致性能问题，可以考虑使用 `requestAnimationFrame` 来优化动画效果。 2. **边界检测**：如果文字移动到屏幕边缘，可能会超出可视范围，可以添加边界检测来限制文字的位置。 3. **兼容性**：确保代码在不同浏览器和设备上都能正常运行，特别是对于较旧的浏览器，可能需要添加一些兼容性处理。 ######[AI写代码神器 | 553点数解答 | 2024-11-20 15:04:15]

服务商

更多选项

快捷项

自定义