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

Question

Looking for a demo that randomly position elements within a container div and fade them out/in at random times. Any suggestions? Maybe there is a premade library that has the function built in? Thanks a ton.

Answer 1

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

 #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} } 

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