css animations
Posted in
1113
10:29 am, February 28, 2024
Falling Stars CSS Animation
falling stars css animation
See the Pen Falling Stars by Prasenjit Nayak (@StarKnightt) on CodePen.
Falling Stars CSS Animation Demo
View Demo Full Screen View Demo New Tab
Falling Stars CSS Animation Code
HTML
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="eYxXxaR" data-user="StarKnightt" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/StarKnightt/pen/eYxXxaR">
Falling Stars</a> by Prasenjit Nayak (<a href="https://codepen.io/StarKnightt">@StarKnightt</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
CSS
.star {
position: absolute;
top: -20px;
color: #fff;
animation: animate 5s linear forwards;
/* you can set infinite too */
}
.star::before {
content: "\f005";
font-family: FontAwesome;
text-shadow: 0 0 5px #fff, 0 0 20px #fff, 0 0 50px #fff;
}
@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;
}
}
Scripts
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
Javascript
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);
External Link for Falling Stars CSS Animation
Related Tags
Add Comment
Other Items in css animations
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html canvas html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
css animations
css animations
HTML Canvas
javascript