Multiple moving stars

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

        .container {
            position: relative;
            width: 100%;
            height: 100vh;
            background-color: black;
        }

        .star {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: red;
            border-radius: 50%;
            animation: moveStar 5s linear infinite;
        }

        @keyframes moveStar {
            0% {
                transform: translateY(0) translateX(0);
            }
            100% {
                transform: translateY(-100vh) translateX(100vw);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Create multiple stars -->
        <div class="star" style="top: 20%; left: 30%;"></div>
        <div class="star" style="top: 50%; left: 70%;"></div>
        <div class="star" style="top: 10%; left: 50%;"></div>
        <!-- Add more stars as needed -->
    </div>
</body>
</html>

Comments

Popular posts from this blog

Carbohydrates || Lipids|| Proteins || Vitamins & Minerals || Fats and Oils

Himanshu chaudhary

2.0 gram of a metal burst in oxygen give 3.2 gram of its oxide. 1.42 gram of the same metal heat in steam give 2.27 gram of its oxide which toys shown by this data?

Vistas Chapter-2 The Tiger King || Revision Notes Class 12 Board Exams

Data Mining || Supervised vs. Unsupervised Techniques || Dimensionality Reduction || Partitioning Methods