如何在CSS/JS中为云朵动画添加随机自定义图片URL？

问题描述 #

希望在现有云朵动画效果中，插入自定义图片URL，实现云朵随机切换不同图片，不清楚如何修改现有CSS/JS代码。

修改方案 #

1. 定义自定义图片URL列表 #

先创建一个包含所有云朵图片URL的数组，方便后续随机选取：

const cloudImages = [
  "你的自定义图片URL1",
  "你的自定义图片URL2",
  "你的自定义图片URL3"
  // 可继续添加更多图片URL
];

2. 修改JavaScript代码实现随机选图 #

在创建云朵元素时，从上述数组中随机选取图片URL，设置为元素背景图：

function nuvoli() {
  let e = document.createElement("div");
  let duration = Math.random() * 3;
  // 随机选取图片URL
  const randomImg = cloudImages[Math.floor(Math.random() * cloudImages.length)];

  e.setAttribute("class", "nuvolo");
  // 给云朵元素设置随机背景图
  e.style.backgroundImage = `url(${randomImg})`;
  document.body.appendChild(e);
  // 修正垂直位置计算：原代码误用innerWidth，改为基于视口高度
  e.style.top = Math.random() * innerHeight + "px";
  e.style.animationDuration = 20 + duration + "s";

  setTimeout(function() {
    document.body.removeChild(e);
  }, 20000);
}

// 自定义图片URL数组
const cloudImages = [
  "自定义图片URL1",
  "自定义图片URL2",
  "自定义图片URL3"
];

setInterval(function() {
  nuvoli();
}, 100);

3. 优化CSS样式（可选） #

如果图片尺寸不一致，可在.nuvolo类中添加背景尺寸控制，保证显示效果统一：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: gray;
  min-height: 100vh;
  overflow: hidden;
}

.nuvolo {
  position: absolute;
  left: -100px;
  /* 根据实际图片调整宽高 */
  width: 150px;
  height: 80px;
  background-repeat: no-repeat;
  /* 统一背景大小，可选cover/contain */
  background-size: contain;
  animation: animate 20s linear forwards;
}

@keyframes animate {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(120%);
  }
}

说明 #

• 替换cloudImages数组中的URL为你的实际图片地址即可
• 修正了原代码中垂直位置计算的逻辑错误（误用innerWidth改为innerHeight）
• 可根据需求调整云朵的宽高、动画时长等参数

内容的提问来源于stack exchange，提问作者manuel