Meteors

<!-- Meteors · Bron: Magic UI · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="meteors-root"><h3 class="meteors-label">Meteors</h3></div>
</div>

/* Meteors · Bron: Magic UI · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.meteors-root{position:absolute;inset:0;border-radius:0;overflow:hidden;background:radial-gradient(120% 120% at 50% 0%,#11111b,#05050a);display:flex;align-items:center;justify-content:center}
.meteors-label{color:#cfcfe0;font:600 18px 'Switzer',sans-serif;z-index:1}
.meteors-meteor{position:absolute;top:-10%;left:50%;width:2px;height:2px;border-radius:50%;background:#ffd2bf;box-shadow:0 0 6px 1px rgba(245,72,15,.6);transform:rotate(215deg);animation:meteors-fall linear infinite}
.meteors-meteor::before{content:"";position:absolute;top:50%;left:0;width:60px;height:1px;transform:translateY(-50%);background:linear-gradient(90deg,#ff9466,transparent)}
@keyframes meteors-fall{0%{transform:rotate(215deg) translateX(0);opacity:1}70%{opacity:1}100%{transform:rotate(215deg) translateX(420px);opacity:0}}

// Meteors · Bron: Magic UI · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
for(var i=0;i<14;i++){var m=document.createElement('span');m.className='meteors-meteor';m.style.left=Math.floor(Math.random()*100)+'%';m.style.top=Math.floor(Math.random()*40-20)+'%';m.style.animationDelay=(Math.random()*4).toFixed(2)+'s';m.style.animationDuration=(3+Math.random()*5).toFixed(2)+'s';root.appendChild(m);}
}
init(document.querySelector('.jouw-container'));