建议在容器div中随机显示元素

Question

寻找一个随机定位容器div中的元素并随机淡出它们的演示。有什么建议？也许有一个内置函数的预制库？非常感谢。

Answer 1

＆＃13;

＆＃13;

function generateRandomNode(container) {
  var node = document.createElement('SPAN');
  node.style.top = Math.random() * 100 + '%';
  node.style.left = Math.random() * 100 + '%';
  container.appendChild(node);
  setTimeout(function(){node.remove();},1000);
}
setInterval(function() {
  generateRandomNode(document.getElementById('container'));
},1);

＆＃13;

#container {
  width:500px;
  height:500px;
}
.random-element {
  position: relative;
}
.random-element>* {
  width:3px;
  height: 3px;
  opacity:0;
  border-radius: 50%;
  position:absolute;
  background-color: #000;
  animation: fade 500ms ease;
}
@keyframes fade {
  0% {opacity:0}
  50%{opacity:1}
  100%{opacity:0}
}

＆＃13;

<div class="random-element" id="container"></div>

＆＃13;

＆＃13;

＆＃13;