Home
Programming

Shooting Star Effect in HTML

Syiainfoku make a Shooting Star Effect in HTML
Shooting Star Effect in HTML

Hello !

Welcome back, with me the founder of Syiainfoku. You will learn together on the Syiainfoku blog how to make a Shooting Star Effect in HTML and this effect pure HTML, CSS no JS.

Ok, let's get started.

Preview Shooting Star Effect

Preview Shooting Star Effect

More or less the result will be like in the picture above

Source Code and Brief Explanation

To make this program. First you need to create two Files, one HTML File and one CSS File. After creating these files, just paste the following code into your file. You can also download the source code file of this Shooting Star Effect from the given download button.

First, create an HTML file with the name index.html and paste the given code in your HTML file. Remember, you must create a file with an .html extension.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shooting Star Effect | hitoricoding</title>
    <link rel="stylesheet" href="./assets/style.css">
</head>

<body>
    <section>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </section>
</body>

</html>

Finally, create a CSS file with the name style.css and paste the given code in your CSS file. Remember, you must create a file with a .css extension. Background image can be changed according to taste. 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    overflow: hidden;
}

section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: url(./bg.jpg);
    background-position: center;
    background-size: cover;
    animation: bgAnim 50s linear infinite;
}

@keyframes bgAnim {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1),
        0 0 0 8px rgba(255, 255, 255, 0.1),
        0 0 20px rgba(255, 255, 255, 1);
    animation: starAnim 3s linear infinite;
}

span::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    height: 1px;
    background: linear-gradient(90deg, #fff, transparent);
}

@keyframes starAnim {
    0% {
        transform: rotate(315deg) translateX(0);
        opacity: 1;
    }

    65% {
        opacity: 0;
    }

    100% {
        transform: rotate(315deg) translateX(-1000px);
        opacity: 0;
    }
}

span:nth-child(1) {
    top: 0;
    right: 0;
    left: initial;
    animation-delay: 0;
    animation-duration: 1s;
}

span:nth-child(2) {
    top: 0;
    right: 80px;
    left: initial;
    animation-delay: 0.2s;
    animation-duration: 3s;
}

span:nth-child(3) {
    top: 80px;
    right: 0px;
    left: initial;
    animation-delay: 0.4s;
    animation-duration: 2s;
}

span:nth-child(4) {
    top: 0px;
    right: 180px;
    left: initial;
    animation-delay: 0.6s;
    animation-duration: 1.5s;
}

span:nth-child(5) {
    top: 0px;
    right: 400px;
    left: initial;
    animation-delay: 0.8s;
    animation-duration: 2.5s;
}

span:nth-child(6) {
    top: 0px;
    right: 600px;
    left: initial;
    animation-delay: 1s;
    animation-duration: 3s;
}

span:nth-child(7) {
    top: 150px;
    right: 400px;
    left: initial;
    animation-delay: 1.2s;
    animation-duration: 1.75s;
}

span:nth-child(8) {
    top: 0px;
    right: 700px;
    left: initial;
    animation-delay: 1.4s;
    animation-duration: 1.25s;
}

span:nth-child(9) {
    top: 0px;
    right: 1000px;
    left: initial;
    animation-delay: 0.75s;
    animation-duration: 2.25s;
}

span:nth-child(10) {
    top: 0px;
    right: 450px;
    left: initial;
    animation-delay: 2.75s;
    animation-duration: 2.25s;
}

That's it, now you have successfully created a Shooting Star Effect, If your code is not working or you are facing any error/problem, please download the source code file from the given download button. For the source code I saved it on MediaFire, It's free and a .zip file will be downloaded then you have to extract it.

Download 

Closing

Thank you for those of you who have read and downloaded this source code, hopefully it can be useful and add to your insight.

If you found this article useful, you can share it. That's all from me, and THANK YOU

Post a Comment