<think>我们参考用户的要求：使用HTML实现满屏飘字“我爱你”的效果。根据用户提供的引用[1]中的描述，我们需要实现：
1. 文字内容为浪漫语句（如“我爱你”、“余生请指教”等）。
2. 文字从屏幕右侧随机位置出现，以不同的速度和大小向左滚动。
3. 每句文字有随机的颜色和大小。
4. 背景为黑色。
我们将使用HTML、CSS和
JavaScript来实现。具体思路如下：
- 创建一个全屏的黑色背景。
- 使用
JavaScript动态创建多个包含文字的div元素。
- 为每个div元素设置随机的字体大小、颜色、起始位置（垂直方向随机）和滚动速度。
- 使用CSS动画或
JavaScript定时器控制元素从右向左移动，移出屏幕后删除该元素并创建新的元素，以保持持续飘字。
为了提高性能，我们可以使用CSS3动画，因为它可以利用GPU加速。
实现步骤：
1. HTML结构：一个全屏的容器，用于容纳飘动的文字。
2. CSS样式：
- 设置body和html为全屏，背景黑色，溢出隐藏。
- 飘动文字的样式：绝对定位，白色（但我们会用JS随机颜色），避免文字被选中。
3.
JavaScript：
- 创建多个文字节点，并设置随机的样式（字体大小、颜色、起始位置）。
- 为每个文字节点添加动画（使用CSS动画或使用requestAnimationFrame更新位置）。
- 当文字移出屏幕左侧时，移除该节点，并生成一个新的文字节点。
这里我们选择使用CSS动画来实现移动，因为这样更高效。
具体
代码实现：
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, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
background-color: black;
}
#container {
position: relative;
height: 100%;
width: 100%;
}
.floating-text {
position: absolute;
white-space: nowrap;
user-select: none; /* 避免用户选中文字 */
/* 具体的位置、颜色、大小等由
JavaScript动态设置 */
}
</style>
</head>
<body>
<div id="container"></div>
<script>
//
JavaScript代码将在这里
</script>
</body>
</html>
```
JavaScript部分（放在script标签内）：
我们预先定义好一组浪漫语句，然后动态创建多个文字元素，每个元素设置随机的样式，并添加从右向左移动的动画。动画结束后移除该元素，并不断创建新的元素以保持满屏飘字。
由于使用CSS动画，我们可以为每个元素设置一个动画，动画持续时间（即速度）随机，起始位置（垂直方向）随机。
具体步骤：
1. 获取容器元素（id为container）。
2. 定义浪漫语句数组。
3. 创建一个函数，用于生成随机数（指定范围）。
4. 创建一个函数，用于生成一个随机的颜色。
5. 创建一个函数，用于生成一个飘动的文字元素。
- 创建一个div，类名为floating-text。
- 设置其文本内容为随机选取的浪漫语句。
- 设置随机的字体大小（例如20px到
50px）。
- 设置随机的颜色。
- 设置起始位置：top为0到容器高度的随机值，left为容器宽度（即从右侧开始）。
- 设置动画：使用CSS动画，从right:0到left: -100%（即移出左侧屏幕）。但是注意，我们的起始位置是绝对定位的left为容器宽度，我们也可以使用transform来移动，但这里为了简单，我们设置left从100%到-100%（即从右侧外面到左侧外面）。不过，我们也可以设置起始left为100%，然后动画结束left为-元素自身宽度（但这样计算复杂）。另一种方法是使用transform: translateX，但为了简单，我们使用left的变化。
然而，使用left属性做动画可能会引起重排，性能不如transform。所以我们使用transform: translateX来移动，这样可以利用GPU加速。
修改方案：
初始位置：left: 100% （这样元素从右侧外面开始），然后动画将其向左移动，移动的距离为100vw + 元素自身宽度。但是我们可以使用transform: translateX(-100vw - 100%)，这样可以让元素完全移出左侧。
但是，我们也可以这样：让元素从右往左移动，设置初始位置为：
left: 100% -> 然后动画结束：transform: translateX(-100vw); 这样元素就会移动到左侧屏幕外。
但是，使用transform和left结合可能会有问题。所以我们可以使用transform的初始状态和结束状态。但是初始位置我们还需要垂直方向随机，所以我们可以这样：
设置元素的初始位置：
top: 随机值（0到100vh）
left: 0 （然后通过transform: translateX(100vw)将元素移动到右侧屏幕外？）
或者，我们可以设置初始位置为：
top: 随机值（0到容器高度）
left: 100%（即从右侧开始）
transform: translateX(0) // 初始位置就是left:100%的位置
然后动画：transform: translateX(-100vw - 100%); // 向左移动屏幕宽度+自身宽度，确保移出左侧
但是这样，每个动画的移动距离可能不一致，因为元素自身宽度不同。我们可以使用left和transform结合，但这样复杂。
另一种简单方法：我们让元素从右侧出现，然后向左移动200vw（确保移出屏幕），这样无论元素宽度多少，都会移出屏幕。
具体CSS动画关键帧：
@keyframes float {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100vw - 100%));
}
}
但是，这样计算量较大，我们可以简化：因为我们知道元素从left:100%开始，我们要让它移动到左侧屏幕外，移动的距离至少是屏幕宽度+元素宽度，但我们无法预知元素宽度。所以我们可以使用left和transform结合。
考虑到性能，我们还是使用transform，并且使用calc，不过我们可以使用：
to { transform: translateX(-100vw); }
但是这样，如果元素宽度很大，可能还没完全移出。所以我们用一个足够大的值，比如-200%？这样不一定。
更简单的方法：我们让元素从右侧（left:100%）开始，然后动画到left: -100%（这样元素会移动到左侧屏幕外，因为left:-100%是相对于父容器，而元素自身宽度小于100%时，-100%已经移出，但元素宽度较大时可能不行）。所以最好使用transform来移动整个屏幕宽度加上元素宽度。
鉴于实现起来可能比较复杂，而且性能要求，我们可以采用另一种思路：让元素从右侧出现，向左移动直到消失，我们不需要精确移除，而是当元素完全离开屏幕时（通过判断元素的位置）移除。但是这样就需要用
JavaScript不断检测，性能不如纯CSS动画。
权衡之后，我们使用CSS动画，移动距离为100vw+100%。但是注意，100%是元素自身宽度，所以calc(-100vw - 100%)就是向左移动屏幕宽度加自身宽度，这样元素就会完全移出左侧。
具体步骤：
1. 在CSS中定义动画关键帧：
@keyframes float {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-100vw - 100%));
}
}
2. 给每个文字元素设置动画：animation: float 线性 无限; 但是我们不能无限，因为每个元素的移动速度不同，而且我们希望在移出后移除元素并重新生成。所以实际上，我们不需要无限动画，而是设置动画一次，然后监听动画结束事件，在结束后移除元素，并生成新的元素。
但是，如果我们使用无限动画，那么元素会一直循环移动，但我们希望每个元素只移动一次，然后重新生成。所以我们可以不用无限，而是设置动画执行一次，然后结束后移除。
所以，我们为每个元素设置一个随机的动画持续时间（比如
5s到20s），这样速度就不同了。然后监听动画结束事件，结束后移除该元素，并生成一个新的元素。
具体
代码：
在CSS中添加：
@keyframes float {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100vw - 100%));
}
}
在创建元素时，设置动画：
animation: float linear [随机时间]s forwards;
然后，我们在
JavaScript中监听animationend事件，在事件处理中移除该元素，并调用创建新元素的函数（或者我们直接不断创建，不用移除后再创建，而是设定一个固定数量，然后不断补充）。
为了保持屏幕上一直有较多的文字，我们可以同时创建多个元素，然后每个元素结束后再创建一个新的。
具体实现：
我们设定一个函数createFloatingText()，用于创建一个飘动文字元素，并添加到容器中。
在这个函数中，我们：
1. 创建div，设置类名。
2. 随机选择一条文字。
3. 随机设置字体大小（比如20px到
50px）。
4. 随机设置颜色（使用随机RGB颜色）。
5. 设置初始位置：top为0到窗口高度（减去一些空间，避免超出底部）随机，left为100%（表示从右侧开始）。
6. 设置动画：动画名称为float，线性动画，持续时间随机（比如
5到20秒），forwards表示保持结束状态。
7. 添加animationend事件监听，当动画结束时，移除该元素，并调用createFloatingText()创建一个新元素（这样保持总数不变）。
8. 添加到容器中。
然后，我们初始化时创建一定数量的元素（比如20个），这样屏幕上就会一直有20个元素在飘动。
注意：由于每个元素移出后就会创建一个新的，所以数量保持不变。
代码实现：
首先，在CSS中定义关键帧动画：
修改上面的style部分，添加：
@keyframes float {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-100vw - 100%));
}
}
然后，
JavaScript代码如下：
```
javascript
// 获取容器
const container = document.getElementById('container');
// 浪漫语句数组
const texts = ["我爱你", "余生请指教", "执子之手，与子偕老", "你是我的唯一", "我想你了", "有你真好", "山有木兮木有枝，心悦君兮君
不知", "一生一世一双人"];
// 同时存在的文字数量
const count = 20;
// 生成指定范围内的随机数
function random(min, max) {
return Math.random() * (max - min) + min;
}
// 生成随机颜色
function randomColor() {
return `rgb(${random(0, 2
55)}, ${random(0, 2
55)}, ${random(0, 2
55)})`;
}
// 创建飘动文字
function createFloatingText() {
const textEl = document.createElement('div');
textEl.className = 'floating-text';
// 随机选择文字
textEl.textContent = texts[Math.floor(Math.random() * texts.length)];
// 随机字体大小
const fontSize = random(20,
50);
textEl.style.fontSize = `${fontSize}px`;
// 随机颜色
textEl.style.color = randomColor();
// 初始位置：垂直方向随机，水平方向从右侧开始
textEl.style.top = `${random(0, window.innerHeight -
50)}px`; // 减去
50避免超出底部
textEl.style.left = '100%'; // 从屏幕右侧开始
// 动画设置：持续时间随机
5-20秒
const duration = random(
5, 20);
textEl.style.animation = `float ${duration}s linear forwards`;
// 动画结束时，移除元素并创建新的
textEl.addEventListener('animationend', function() {
textEl.remove();
createFloatingText(); // 创建新的文字
});
container.appendChild(textEl);
}
// 初始化，创建多个文字
for (let i = 0; i < count; i++) {
// 每个文字初始位置水平方向错开一点，避免同时出现
// 我们可以设置一个随机的延迟，这样就不会同时开始
setTimeout(createFloatingText, random(0,
5000)); // 在0到
5秒内错开创建
}
// 窗口大小变化时，重新调整位置？但是我们的位置是绝对定位，top是固定的，left是100%，所以即使窗口变化，也只是初始位置变化，动画还是按照原来的方向运行。所以如果窗口大小变化，可能会导致位置错乱。我们可以考虑在resize时重新初始化，但这里为了简单，不做处理。
```
上述
代码中，我们使用setTimeout来错开每个文字的创建时间，这样就不会在同一时间创建所有文字，而是分散在
5秒内创建。
但是，这样初始创建后，每个文字动画结束后会立即创建新的，所以不会中断。
注意：我们使用innerHeight来设置top，这样在窗口大小变化时，新创建的元素会使用新的窗口高度。但是已经存在的元素不会调整，所以可能会出现部分元素在窗口变化后位置不合适。我们可以监听resize事件，然后移除所有元素并重新初始化，但这样会中断动画。或者我们不做处理，因为动画结束后会重新创建，新创建的元素会使用新的窗口尺寸。
另外，我们设置top时减去了
50，这是为了避免文字一开始就出现在底部边缘之外（因为字体大小最大
50px，所以减去
50px可以确保在窗口内）。
但是，这个效果在移动端可能也需要适配，我们这里主要考虑桌面端。
完整
代码：
将上述CSS和
JavaScript整合到HTML中。
我们给出完整HTML
代码：
</think>以下是使用HTML、CSS和
JavaScript实现满屏飘字"我爱你"效果的完整
代码。
代码模拟了情书飘舞效果，文字从右侧随机位置出现，以不同速度、大小和颜色向左飘动：
```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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #000;
overflow: hidden;
height: 100vh;
width: 100vw;
}
.love-letter {
position: absolute;
white-space: nowrap;
font-weight: bold;
font-family: 'Microsoft YaHei', sans-serif;
text-shadow: 0 0
5px rgba(2
55,2
55,2
55,0.7);
user-select: none;
}
</style>
</head>
<body>
<script>
// 浪漫语句库
const loveWords = [
"我爱你", "一生一世", "白头偕老",
"执子之手", "与子偕老", "你是我的唯一",
"余生请指教", "永远在一起", "心心相印",
"情有独钟", "海枯石烂", "至死不渝"
];
// 创建飘动文字
function createFloatingText() {
const text = document.createElement('div');
text.className = 'love-letter';
// 随机选择文字
text.textContent = loveWords[Math.floor(Math.random() * loveWords.length)];
// 随机样式设置
const fontSize = 20 + Math.random() * 30; // 20px-
50px
text.style.fontSize = `${fontSize}px`;
// 随机颜色 (避免太暗的颜色)
const r = 1
50 + Math.random() * 10
5;
const g = 1
50 + Math.random() * 10
5;
const b = 1
50 + Math.random() * 10
5;
text.style.color = `rgb(${r},${g},${b})`;
// 初始位置 (屏幕右侧随机高度)
const startY = Math.random() * window.innerHeight;
text.style.top = `${startY}px`;
text.style.right = `-${text.offsetWidth}px`; // 从屏幕外开始
// 动画参数
const duration = 10 + Math.random() * 20; // 10-30秒
const delay = Math.random() *
5; // 0-
5秒延迟
// 应用动画
text.style.animation = `float ${duration}s linear ${delay}s forwards`;
document.body.appendChild(text);
// 动画结束后移除元素
setTimeout(() => {
text.remove();
}, (duration + delay) * 1000);
}
// 定义飘动动画
const styleSheet = document.createElement('style');
styleSheet.textContent = `
@keyframes float {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100vw - 100%));
}
}
`;
document.head.appendChild(styleSheet);
// 初始创建多个文字
for (let i = 0; i < 20; i++) {
createFloatingText();
}
// 定时创建新文字
setInterval(createFloatingText, 1000);
// 窗口大小变化时重新调整
window.addEventListener('resize', () => {
const letters = document.querySelectorAll('.love-letter');
letters.forEach(letter => {
letter.style.top = `${Math.random() * window.innerHeight}px`;
});
});
</script>
</body>
</html>
```
### 效果说明[^1]：
1. **飘动效果**：文字从屏幕右侧随机位置出现，向左平滑移动
2. **随机样式**：
- 字体大小：20px-
50px随机
- 文字颜色：柔和的随机彩色
- 移动速度：10-30秒完成横跨
- 出现延迟：0-
5秒随机延迟
3. **内容多样性**：12种浪漫语句随机出现
4. **持续运行**：每秒新增文字，移出屏幕的文字自动清除
### 使用说明：
1. 复制以上完整
代码到文本
编辑器
2. 保存为`.html`格式文件
3. 用浏览器打开即可看到效果
4. 按F11键可进入全屏模式体验更佳
### 自定义修改：
- 修改`loveWords`数组可更换飘动文字
- 调整`fontSize`范围可改变文字大小
- 修改`duration`范围可调整移动速度
- 修改`setInterval`时间可控制新增频率
此效果使用CSS动画实现，性能优于传统
JavaScript位移操作，能流畅运行在各种现代浏览器上[^1]。
本文精选五款优秀的JavaScript代码编辑器，包括WebStorm、Visual Studio Code、Sublime Text、Atom Editor和Brackets，详细对比了它们的优点和缺点，帮助开发者选择最适合自己的开发工具。
点击阅读原文，输入关键词，即可搜索您想要的 优快云 文章。
你点的每个“在看”，我都认真当成了喜欢
扫一扫
277
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
