Scribd Logo
Upload

Welcome to Scribd!

  • Sistema Solar

    Uploaded by

    lfreenkober
    6 views2 pages
    The document contains CSS code that animates elements to simulate the movement of the sun, earth, and moon. The sun is animated to change its color and shadow over 5 seconds. The earth rotates over 90 seconds while translating across the screen. The moon also rotates over 7 seconds as it orbits the earth. Together these animations visually depict the rotation and revolution of our solar system.

    Original Description:

    Original Title

    sistemaSolar

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document contains CSS code that animates elements to simulate the movement of the sun, earth, and moon. The sun is animated to change its color and shadow over 5 seconds. The earth rotates over 90 seconds while translating across the screen. The moon also rotates over 7 seconds as it orbits the earth. Together these animations visually depict the rotation and revolution of our solar system.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    6 views2 pages

    Sistema Solar

    Uploaded by

    lfreenkober
    The document contains CSS code that animates elements to simulate the movement of the sun, earth, and moon. The sun is animated to change its color and shadow over 5 seconds. The earth rotates over 90 seconds while translating across the screen. The moon also rotates over 7 seconds as it orbits the earth. Together these animations visually depict the rotation and revolution of our solar system.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    <!

    DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Só a Terra, na verdade</title>
    <style>
    @keyframes espaco{
    0%{
    background-position: 0%;
    }
    100%{
    background-position: 100%;
    }
    }

    @keyframes sol {
    0%{
    background-image: radial-gradient(#ffdd00, #ff9500);
    box-shadow: 3px 3px 30px #877602;
    }
    100%{
    background-image: radial-gradient(#ffdd00, #ff9d00);
    box-shadow: 3px 3px 40px #aba68a;
    }
    }

    @keyframes terra {
    0%{
    transform: rotate(0deg) translateX(300%) rotate(0deg);
    }
    100%{
    transform: rotate(360deg) translateX(300%) rotate(-360deg);
    }
    }

    @keyframes lua {
    0%{
    transform: rotate(0deg) translateX(230%) rotate(0deg);
    }
    100%{
    transform: rotate(360deg) translateX(230%) rotate(-360deg);
    }
    }

    *{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
    }
    body{
    animation: espaco 120s ease-in-out infinite alternate;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("https://images.alphacoders.com/562/562953.png") no-
    repeat;
    background-size: 300% 300%;
    min-height: 100vh;
    overflow: hidden
    }
    .sol{
    background-image: radial-gradient(#ffdd00, #ff9500);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 250px;
    width: 250px;
    border-radius: 50%;
    box-shadow: 3px 3px 30px #877602;
    animation: sol 5s ease-in-out infinite alternate;
    }
    .terra{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 50%;
    height: 50%;
    background-image:
    url("https://www.designi.com.br/images/preview/10885440.jpg");
    background-position: center;
    background-size: 130% 130%;
    border-radius: 50%;
    transform: translate(150%, -150%);
    animation: terra 90s linear infinite forwards;
    }
    .lua{
    position: relative;
    width: 50%;
    height: 50%;
    background-color: #c3bfbf;
    border-radius: 50%;
    transform: translate(180%, 180%);
    animation: lua 7s linear infinite forwards;
    }

    </style>
    </head>
    <body>
    <div class="sol">
    <div class="terra">
    <div class="lua"></div>
    </div>
    </div>
    </body>
    </html>

    You might also like