用普通JavaScript控制CSS动画

我正在尝试编写一个可重用的JS函数，它可以控制许多形状上的CSS动画。我会尽我最大的努力来解释我想要达到的目标

目标是控制一些事情：

• param1

  ：正在生成的li元素（形状）的数量

• param2

  和

  param3

  ：每个生成形状的动画随机持续时间的数字范围

• param4

  和

  param5

  ：每个生成形状的随机左边距的数字范围

我想能够在一个网站的不同页面上使用这个功能。例如，我希望在主页上将形状作为整个背景的一部分，但在另一个页面上，在某些文本内容旁边创建一个动画形状柱

HTML

JS

函数bg三角形（x，max\u d，min\u d，max\u m，min\u m）{
var ul=document.getElementById（“bg_列表”）；
var duration=Math.floor（Math.random（）*（max\u d-min\u d+1）+min\u d）；
var margin=Math.floor（Math.random（）*（max_m-min_m+1）+min_m）；
for（设i=0；i

上面的代码主要工作，你可以通过刷新页面看到，但是我没有得到预期数量的形状，它们似乎是堆叠在一起的，而不是得到一个随机的动画

---

这里有一个演示：

你做得几乎正确，但有一个小小的例外：你的随机数在循环前计算一次，每个三角形都有相同的持续时间和边距。以下是如何修改代码以使其正常工作：

函数bg三角形（x，max\u d，min\u d，max\u m，min\u m）{
var ul=document.getElementById（“bg_列表”）；
for（设i=0；i

说清楚。我提出以下两点：

var duration=Math.floor（Math.random（）*（max\u d-min\u d+1）+min\u d）；
var margin=Math.floor（Math.random（）*（max_m-min_m+1）+min_m）；

他们现在在循环中，在循环的一开始。无需其他更改

---

这是你最新的钢笔：

嗯，FML。。这是我尝试的第一件事，但由于形状的不透明性，我猜我的视角我只是看到了一个白色的屏幕，认为它因为某种原因无法工作，然后拼命地寻找另一个解决方案。编辑：我太生自己的气了，忘了说谢谢！

<ul id="bg_list">
</ul>

:root {
  --animation-duration: 2s;
  --margin-left: 5px; 
}

#bg_list {
  position: absolute;
  top: 0;
  left: 0;
  overflow: none;
  width: 80%;
  height: 92%;
}


#bg_list li {
  position: absolute;
  display: inline-block;
  list-style: none;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 7px solid rgba(27, 23, 49, 0.5);
  bottom: -10px;
  overflow: none;
  animation: animate var(--animation-duration) linear infinite;
  margin-left: var(--margin-left);
  z-index: -1;
}


@keyframes animate {

  0%{
      transform: translateY(0) rotate(0deg);
      opacity: 0.2;
      border-radius: 0;
  }
  50% {
    opacity: 0.5;
  }
  100%{
      transform: translateY(-1000px) rotate(720deg);
      opacity: 1;
      border-radius: 50%;
  }
}

function bgTriangles(x, max_d, min_d, max_m, min_m) {
  var ul = document.getElementById("bg_list");
  var duration = Math.floor(Math.random() * (max_d - min_d + 1) + min_d);
  var margin = Math.floor(Math.random() * (max_m - min_m + 1) + min_m);

  for(let i = 0; i < x; i++) {
    var li = document.createElement("li");
    ul.appendChild(li);
    li.style.setProperty('--animation-duration', duration + 's');
    li.style.setProperty('--margin-left', margin + 'px');
  }
}

bgTriangles(5, 20, 10, 500, 5);