Question

我正在尝试编写一个可重用的JS函数，该函数可控制许多形状的CSS动画。我将尽力解释我要实现的目标。

目标是控制一些事情：

param1：正在生成的li个元素（形状）的数量
param2和param3：每个生成的形状在动画的随机持续时间内的数字范围
param4和param5：每个生成的形状的随机左边界的数字范围

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

HTML

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

CSS

: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%;
  }
}

JS

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);

上面的代码大多数都可以通过刷新页面来查看，但是我没有得到预期的形状数量，并且看起来它们彼此堆叠在一起，而不是每个都获得随机动画。

这是它的演示：pen

Answer 1

您做得差不多，只有一个例外：您的随机数在循环之前计算一次，并且每个三角形的持续时间和边距都相同。这是修改代码以使其正常工作的方法：

function bgTriangles(x, max_d, min_d, max_m, min_m) {
  var ul = document.getElementById("bg_list");

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

说明清楚。我移动了以下两行：

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);

它们现在就在循环的最开始。无需其他更改。

这是您更新的笔：https://codepen.io/anon/pen/RzVVmm

使用香草JavaScript控制CSS动画

1 个答案: