Enjoy Live Rotation of Earth, Revolution of the Earth and Twinkling Stars

Ticker

10/recent/ticker-posts

Enjoy Live Rotation of Earth, Revolution of the Earth and Twinkling Stars

AK Creative 1/19/2021 04:02:00 PM

Maa Blogger Creation of the Earth 🌍 Rotation, Revolution & Moon 🌚 Rotation, Stars 🌟🌟 Twinkling By This Source Code


HTML 

<!DOCTYPE html>

<html lang="en" >

<head>

  <meta charset="UTF-8">

  <title>Orbiting Planet Animation</title>

  <link rel="stylesheet" href="./style.css">


</head>

<body>

<html>

<head>

    <title>Orbiting Planet Animation</title>

    <link rel="stylesheet" type="text/css" href="Stylesheet.css">

        <link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/7.0.0/normalize.css">

    <script src="https://raw.githubusercontent.com/aFarkas/html5shiv/master/src/html5shiv.js"></script>   

    </head>

    <body id="Universe">

<div id="Stars"></div>

        <div id="Sun"></div>

        <div id="EarthOrbit">

            <img id="Earth" src="https://media.giphy.com/media/3og0INnNodRPRBagJW/giphy.gif" alt="Rotating Earth">

                <div id="MoonOrbit">

                    <div id="Moon"></div>

                    </div>

            </div>

    </body>

</html>

</body>

</html>


CSS 


@charset "utf-8";

html, body {
height: 100%;
width: 100%;
}

#Universe {
background: url(https://wallpaperaccess.com/full/17495.jpg);
background: radial-gradient(#555, #000);
}

#Stars {
position: relative;
z-index: 4;
background: url(https://wallpaperaccess.com/full/17495.jpg) no-repeat fixed;
height: 100%;
width: 100%;
-webkit-animation: StarPulse 3s infinite alternate;
        animation: StarPulse 3s infinite alternate;
}

#Sun {
height: 300px;
width: 300px;
background: radial-gradient(#F5f11f, #E07f08);
position: absolute;
z-index: 4;
-webkit-box-shadow: 0 0 70px #F5f91A;
        box-shadow: 0 0 70px #F5f91A;
top: 50%;
left: 50%;
border-radius: 100%;
margin-top: -100px;
margin-left: -100px;
-webkit-animation: SunFire 3s infinite alternate;
        animation: SunFire 3s infinite alternate;  
}

#EarthOrbit {
border: none;
height: 700px;
width: 650px;
position: absolute;
z-index: 4;
top: 50%;
left: 50%;
margin-top: -350px;
margin-left: -275px;
border-radius: 100%;
-webkit-animation: Rotation 20s linear infinite;
        animation: Rotation 20s linear infinite;
}

#Earth {
position: absolute;
top: 50%;
left: 0;
height: 95px;
width: 95px;
margin-top: -40px;
-webkit-animation: Rotation 5s linear infinite;
        animation: Rotation 5s linear infinite;
}

#MoonOrbit {
border: none;
height: 130px;
width: 130px;
position: absolute;
z-index: 4;
top: 50%;
left: -20px;
margin-top: -60px;
border-radius: 100%;
-webkit-animation: Rotation 5s linear infinite reverse;
        animation: Rotation 5s linear infinite reverse;
}

#Moon {
height: 30px;
width: 30px;
background: radial-gradient(#fff, #999);
border-radius: 100%;
}

@-webkit-keyframes StarPulse {
from {opacity: 1.5}
to {opacity: 0.2}
}

@keyframes StarPulse {
from {opacity: 1.5}
to {opacity: 0.2}
}

@-webkit-keyframes SunFire {
from {-webkit-box-shadow: 0 0 70px #F5C91A;box-shadow: 0 0 70px #F5C91A;}
to {-webkit-box-shadow: 0 0 100px #F5C91A;box-shadow: 0 0 100px #F5C91A;}
}

@keyframes SunFire {
from {-webkit-box-shadow: 0 0 70px #F5C91A;box-shadow: 0 0 70px #F5C91A;}
to {-webkit-box-shadow: 0 0 100px #F5C91A;box-shadow: 0 0 100px #F5C91A;}
}

@-webkit-keyframes Rotation {
from {-webkit-transform: rotate(0);transform: rotate(0);}
to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}

@keyframes Rotation {
from {-webkit-transform: rotate(0);transform: rotate(0);}
to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}


Orbiting Planet Output Screen





Tags:

Post a Comment

37 Comments

  1. Unique KnowJanuary 19, 2021 at 4:07 PM

    Wowwww great guys
    Very interesting

    ReplyDelete
  2. Kanchan KirtimanJanuary 19, 2021 at 4:15 PM

    Perfect 👌

    ReplyDelete
  3. WonderingJanuary 19, 2021 at 4:16 PM

    Brilliant Works

    ReplyDelete
  4. Excellent workJanuary 19, 2021 at 4:17 PM

    Excellent job

    ReplyDelete
  5. AwesomeJanuary 19, 2021 at 4:19 PM

    Wonderful & Great

    ReplyDelete
  6. Jaunpur GPJanuary 19, 2021 at 4:21 PM

    Superb quality and excellent work

    ReplyDelete
  7. WonderfulJanuary 19, 2021 at 4:23 PM

    Awesome Article

    ReplyDelete
  8. Rock_ArviJanuary 19, 2021 at 4:24 PM

    Fantastic job

    ReplyDelete
  9. A A AJanuary 19, 2021 at 4:25 PM

    Amazing Interesting

    ReplyDelete
  10. ArviJanuary 19, 2021 at 4:26 PM

    Brilliant

    ReplyDelete
  11. UnknownJanuary 19, 2021 at 4:27 PM

    Brilliant & Wonderful

    ReplyDelete
  12. FabulousJanuary 19, 2021 at 4:29 PM

    Wonderful & Perfect

    ReplyDelete
  13. SuperJanuary 19, 2021 at 4:32 PM

    Exclusive & Excellent work

    ReplyDelete
  14. SonaJanuary 19, 2021 at 4:42 PM

    Wow🤩

    ReplyDelete
  15. UnknownJanuary 19, 2021 at 5:57 PM

    Superb

    ReplyDelete
  16. akhJanuary 19, 2021 at 6:03 PM

    Perfect

    ReplyDelete
  17. UnknownJanuary 19, 2021 at 6:05 PM

    Excellent

    ReplyDelete
  18. UnknownJanuary 19, 2021 at 6:06 PM

    Wonderful

    ReplyDelete
  19. UnknownJanuary 19, 2021 at 6:10 PM

    Interesting

    ReplyDelete
  20. UnknownJanuary 19, 2021 at 6:11 PM

    Interesting

    ReplyDelete
  21. UnknownJanuary 19, 2021 at 6:12 PM

    Interesting

    ReplyDelete
  22. UnknownJanuary 19, 2021 at 6:13 PM

    Interesting

    ReplyDelete
  23. UnknownJanuary 19, 2021 at 6:17 PM

    Interesting & WONDERFUL

    ReplyDelete
  24. UnknownJanuary 19, 2021 at 6:19 PM

    Interesting

    ReplyDelete
  25. KritikaJanuary 19, 2021 at 6:20 PM

    Perfect

    ReplyDelete
  26. UnknownJanuary 19, 2021 at 6:21 PM

    Excellent

    ReplyDelete
  27. UnknownJanuary 19, 2021 at 6:22 PM

    Interesting

    ReplyDelete
  28. UnknownJanuary 19, 2021 at 6:23 PM

    Awesome

    ReplyDelete
  29. UnknownJanuary 19, 2021 at 6:24 PM

    Brilliant

    ReplyDelete
  30. KKJanuary 19, 2021 at 6:25 PM

    Interesting

    ReplyDelete
  31. UnknownJanuary 19, 2021 at 6:27 PM

    Wow

    ReplyDelete
  32. UnknownJanuary 19, 2021 at 6:28 PM

    Interesting

    ReplyDelete
  33. UnknownJanuary 19, 2021 at 6:29 PM

    Interesting

    ReplyDelete
  34. UnknownJanuary 19, 2021 at 6:30 PM

    Wonderful

    ReplyDelete
  35. snehaJanuary 19, 2021 at 6:31 PM

    Wow Wonderful

    ReplyDelete
  36. UnknownJanuary 19, 2021 at 6:35 PM

    Interesting

    ReplyDelete
  37. UnknownJanuary 19, 2021 at 6:39 PM

    Amazing

    ReplyDelete