为了实现弹窗一个个按顺序丝滑生成的动画效果，同时满足弹窗有随机填充背景色、宽高大
且文字不超范围并自动按顺序排列的需求，可以对之前的代码进行修改。以下是修改后的代码：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>生日祝福楼梯状爱心弹窗</title>
<style>
/* 容器样式 */
.container {
position: relative;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
/* 弹窗样式 */
.popup {
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
width: 150px; /* 增大弹窗宽度 */
height: 80px; /* 增大弹窗高度 */
overflow: auto; /* 保证文字不超出弹窗范围，超出部分可滚动 */
opacity: 0;
transform: scale(0.5);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.popup.show {
opacity: 1;
transform: scale(1);
}
</style>
</head>
<body>
<div class="container"></div>
<script>
// 定义祝福语句列表
const blessings = [
"祝你生日快乐！愿你的生活如诗如画，充满无尽的美好与欢乐！",
"生日快乐呀！祝你在新的一岁里，事业蒸蒸日上，梦想成真！",
"希望你生日这天阳光灿烂，心情愉悦，新的一岁一切顺遂！",
"愿你所遇皆美好，所行化坦途，所求皆
如愿，生日快乐！",
"祝你健康平安，幸福永远围绕在你身边，生日快乐！"
];
// 生成200个点沿着爱心形状
const numPoints = 200;
const points = [];
for (let t = 0; t <= 2 * Math.PI; t += 2 * Math.PI / numPoints) {
const x = 16 * Math.pow(Math.sin(t), 3);
const y = 13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t);
points.push([x, y]);
}
// 获取容器元素
const container = document.querySelector('.container');
// 循环创建弹窗
points.forEach(([x, y], index) => {
// 随机选择一条祝福语句
const randomBlessing = blessings[Math.floor(Math.random() * blessings.length)];
// 创建弹窗元素
const popup = document.createElement('div');
popup.classList.add('popup');
popup.textContent = randomBlessing;
// 随机生成背景色
const randomColor = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
popup.style.backgroundColor = randomColor;
// 计算弹窗的位置
const width = container.offsetWidth;
const height = container.offsetHeight;
const scale = Math.min(width, height) / 30;
const left = (x * scale + width / 2) - popup.offsetWidth / 2;
const top = (-y * scale + height / 2) - popup.offsetHeight / 2;
// 设置弹窗的位置
popup.style.left = `${left}px`;
popup.style.top = `${top}px`;
// 将弹窗添加到容器中
container.appendChild(popup);
// 按顺序显示弹窗
setTimeout(() => {
popup.classList.add('show');
}, index * 100);
});
</script>
</body>
</html>
```
### 代码解释
1. **增大弹窗宽高**：在 CSS 样式中，将 `.popup` 的 `width` 和 `height` 属性值增大，以实现增大弹窗宽高的效果。
2. **保证文字不超出弹窗范围**：为 `.popup` 添加 `overflow: auto` 属性，当文字超出弹窗范围时，会出现滚动条，保证文字不会溢出。
3. **随机填充背景色**：在 JavaScript 代码中，使用 `Math.random()` 函数随机生成 RGB 颜色值，并将其赋值给弹窗的 `backgroundColor` 样式属性。
4. **丝滑的动画效果**：通过 CSS 的 `transition` 属性，为 `opacity` 和 `transform` 添加过渡效果，使弹窗在显示时有淡入和放大的动画。在 JavaScript 中，使用 `setTimeout` 函数按顺序为每个弹窗添加 `show` 类，触发动画。
###
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
1602
