const app = document.getElementById('app') const myRand = () => { let r = 50 while (40 < r && r < 60) { r = Math.random() * 100 } return r } for (let i = 0; i < 50; i++) { const delay = Math.random() + 's'; const el = document.createElement('img') el.src = 'https://dl.dropboxusercontent.com/s/soxcov4m81dx55l/star.svg' el.className = 'glitter-star' el.style.top = myRand() + '%' el.style.left = myRand() + '%' el.style.animationDelay = delay el.style.msAnimationDelay = delay el.style.webkitAnimationDelay = delay el.style.monAnimationDelay = delay app.appendChild(el) }
<div id="app"> <img class="character" src="https://pbs.twimg.com/profile_images/751035224700522496/YCsfWM6Q.jpg"> </div>
#app { position: relative; width: 640px; height: 400px; background-color: #333333; } .character { position: absolute; top: calc(50% - 50px); left: calc(50% - 50px); witdh: 100px; height: 100px; border-radius: 5px; } img.glitter-star { position: absolute; height: 16px; width: 16px; animation: glitter 2s linear 0s infinite normal; -webkit-animation: glitter 2s linear 0s infinite normal; -moz-animation: glitter 2s linear 0s infinite normal; -ms-animation: glitter 2s linear 0s infinite normal; -o-animation: glitter 2s linear 0s infinite normal; } @keyframes glitter { 0% { -webkit-transform: scale(1.0); opacity: 1; } 25% { -webkit-transform: scale(0.5); opacity: 0; } 50% { -webkit-transform: scale(1.0); opacity: 1; } 75% { -webkit-transform: scale(0.5); opacity: 0; } 100% { -webkit-transform: scale(1.0); opacity: 1; } }