<!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 {background-color: #000; /* 设置背景颜色为黑色 */width: 100%; /* 设置宽度为100% */height: 100vh; /* 设置高度为视口高度 */overflow: hidden; /* 隐藏溢出内容 */position: relative; /* 设置相对定位 */}div {background-color: #000; /* 设置背景颜色为黑色 */color: rgb(255, 255, 255); /* 设置文本颜色为白色 */font-size: 100px; /* 设置字体大小为100px */position: absolute; /* 设置绝对定位 */white-space: nowrap; /* 防止文本换行 */will-change: transform; /* 提示浏览器该元素会频繁变化 */}</style>
</head><body><div id="movingText">文本在屏幕上自由游动</div><script>(function () {// 错误处理：确保元素存在const textElement = document.getElementById('movingText');if (!textElement) {console.error('未找到元素 #movingText');return;}// 初始化位置和速度let x = Math.random() * (window.innerWidth - textElement.offsetWidth); /* 随机生成初始x坐标 */let y = Math.random() * (window.innerHeight - textElement.offsetHeight); /* 随机生成初始y坐标 */let dx = 0.5 + Math.random() * 0.011; /* 设置x方向速度 */let dy = 0.5 + Math.random() * 0.011; /* 设置y方向速度 */// 边界检测函数function checkBoundaries() {const maxX = window.innerWidth - textElement.offsetWidth; /* 计算x方向最大边界 */const maxY = window.innerHeight - textElement.offsetHeight; /* 计算y方向最大边界 */if (x > maxX || x < 0) { /* 如果x超出边界 */dx = -dx; /* 反转x方向速度 */x = Math.max(0, Math.min(x, maxX)); /* 防止文本超出边界 */}if (y > maxY || y < 0) { /* 如果y超出边界 */dy = -dy; /* 反转y方向速度 */y = Math.max(0, Math.min(y, maxY)); /* 防止文本超出边界 */}}// 动画循环function moveText() {x += dx; /* 更新x坐标 */y += dy; /* 更新y坐标 */checkBoundaries(); /* 检查边界 */// 使用 transform 替代 left 和 toptextElement.style.transform = `translate(${x}px, ${y}px)`; /* 应用变换 */requestAnimationFrame(moveText); /* 请求下一帧动画 */}// 启动动画moveText(); /* 开始动画 */// 窗口大小变化时重新计算边界window.addEventListener('resize', () => {x = Math.random() * (window.innerWidth - textElement.offsetWidth); /* 重新计算x坐标 */y = Math.random() * (window.innerHeight - textElement.offsetHeight); /* 重新计算y坐标 */});})();</script>
</body></html>
![HTB：Access[WriteUP]](http://pic.xiahunao.cn/nshx/HTB：Access[WriteUP])
