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

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?

Write a Python program to print three numbers in Descending Order.

IPL 2023 Season Summary || Moments of IPL 2023

Test and Measurement in Sports Case Study Based Questions Chapter 6 Class 12 Physical education