Menu

Creating an Eclipse Animation (HTML and CSS Only)

June 24, 2019 - General, Web Development
Creating an Eclipse Animation (HTML and CSS Only)


Source Code

<!DOCTYPE html>
<html>
<head>
    <title>Eclipse Animation</title>

    <style>
        body
        {
            background-color: #09101e;
        }
        .bright_circle
        {
            position: absolute;
            top: 178px;
            left: 478px;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: radial-gradient(circle closest-side, #efdbd8 90%, #09101e);
        }
        .circle1
        {
            position: absolute;
            top: 200px;
            left: 500px;
            width: 256px;
            height: 256px;
            border-radius: 50%;
            background-color: #efdbd8;
        }
        .circle2
        {
            position: absolute;
            top: 200px;
            left: 800px;
            width: 256px;
            height: 256px;
            border-radius: 50%;
            /* background-color: #09101e; */
            background-color: #09101e;
            animation: 10s anim linear infinite;
        }
        @keyframes anim
        {
            0% {
                /* transform: translate(-700px) scale(0.92); */
                transform: translate(-700px);
            }
        }
    </style>
</head>
<body>
        <!-- This circle simply makes a light effect -->
        <div class="bright_circle"></div>
        <div class="circle1">
        <!-- Circles on the moon -->
            <div style="position: relative;top: 75px;left: 75px;width: 50px;height: 50px;border-radius: 50%;background-color: #d6c5c2;"></div>
            <div style="position: relative;top: 120px;left: 90px;width: 20px;height: 20px;border-radius: 50%;background-color: #d6c5c2;"></div>
            <div style="position: relative;top: 80px;left: 110px;width: 40px;height: 40px;border-radius: 50%;background-color: #d6c5c2;"></div>
            <div style="position: relative;top: -30px;left: 170px;width: 15px;height: 15px;border-radius: 50%;background-color: #d6c5c2;"></div>
        </div>
        <!-- This circle has the color of the background -->
        <div class="circle2"></div>
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *