带有动画的可重复背景图标

Question

看看要开始的图像。这个想法是，绿色/红色星星应该随机放置在行的背景中，周围有内容。我们希望它们动画，等等。

要添加光晕，我们希望对其进行动画处理，这确实没什么大不了的。有一些思想流派。一方面，您可以使用background-image属性，并且由于可以有多个背景，因此应该对其进行处理并可以对其进行定位。另一方面，您可以将图像编码到页面本身上，并进行绝对定位。这就是棘手的地方。如果我不想有10张背景图片怎么办？如果我不想在页面上跨度10次怎么办？

是否有一种更清洁，更有效的方法？

我将包含一个代码笔，使用span思想在其中进行布局，但是我真的希望有一种更加专业的方法，然后将10个span标签或背景图像注入到页面/样式表中。

这是codepen。

https://codepen.io/juandahveed/pen/XoMeLo

你可以看到困境；

::是::

background-image:url(),url(),url(),url();

:::或::

<span class="foo"></span><span class="foo"></span><span class="foo"></span><span class="foo"></span>

这里是设计外观的一个想法。开放所有建议，只是尝试找到最佳/最智能/最负责任的方式来做到这一点。