<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #111;
min-height: 100vh;
overflow: hidden;
}
.star {
position: absolute;
top: -20px;
color: #999999;
animation: animate 5s linear forwards;
/* you can set infinite too */
}
.star::before {
content: "\f005";
font-family: FontAwesome;
text-shadow: 0 0 5px #000, 0 0 20px #000, 0 0 50px #000;
}
@keyframes animate {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
}
80% {
opacity: 1;
}
100% {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}
@media screen and (max-width: 600px) {
.star {
font-size: 8px;
}
}
</style>
<script>
/* Script by petre-vitan */
function stars() {
let e = document.createElement("div");
e.setAttribute("class", "star");
document.body.appendChild(e);
e.style.left = Math.random() * +innerWidth + "px";
let size = Math.random() * 12;
let duration = Math.random() * 3;
e.style.fontSize = 12 + "px";
e.style.animationDuration = 2 + duration + "s";
setTimeout(function () {
document.body.removeChild(e);
}, 5000);
}
setInterval(function () {
stars();
}, 50);
</script>
Niciun comentariu:
Trimiteți un comentariu
Lasa un comentariu