<html>
  <head>
    <link href="live.css"rel="stylesheet"type="text/css">
    <title>Bouncing Ball</title>
  </head>
  <body>
    <div class="night">
      <div id="star1" class="stars"></div>
      <div id="star2" class="stars"></div>
      <div id="star3" class="stars"></div>
      <div id="star4" class="stars"></div> 
    </div>
    <div class="day"></div>
    <div class="sun"></div>
    <div class="moon"></div>
    <div class="image"></div>
  </body>
</html>
.image
{
  position: absolute;
  top:0%;
  left:0;
  right:0;
  height: 100%;
  width: 100%;
  background-image:url("https://github.com/akashpapnai/akashpapnai.github.io/blob/master/Projects/mountain.png?raw=true");
  background-size: 100% 100%;
}
.day
{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  background: linear-gradient(#F6C92F,#EC922C,#E8742A);
  width: 100%;
  height:100%;
  animation:day 6s infinite;
}
.night
{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  background: linear-gradient(#111A54,#0A1E60,#122776,#203290);
  width: 100%;
  height:100%;
}
.sun
{
  position: absolute;
  top:10%;
  left:10%;
  background: #E76729;
  border-radius: 50%;
  height:5em;
  width: 5em;
  animation: sun 6s infinite;
}
#dark
{
  position: absolute;
  top: 4%;
  right:5%;
  width: 20%;
  height: 5%;
  border: 2px inset blue;
  outline:none;
  overflow:hidden;
}
.moon
{
  position:absolute;
  top:60%;
  left:20%;
  height:5em;
  width: 5em;
  border-left:15px solid white;
  border-radius: 100%;
  transform: rotate(-40deg);
  animation-name:moon;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}

.stars
{
  position: absolute;
  width:0px;
  height: 20px;
  margin: 0px;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-bottom: 10px solid white;
  left: 50%;
  animation: star 6s infinite;
  animation-delay: 3s;
}
.stars:before
{
  content: "";
  position: absolute;
  width:0px;
  margin: 0px;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-top: 10px solid white;
  top:24px;
  left:-10px;
}
#star1
{
  top: 5%;
  left:10%;
}
#star2
{
  top:20%;
  left:40%;
}
#star3
{
  top: 30%;
  left:70%;
}
#star4
{
  top: 10%;
  left:90%;
}
@keyframes moon {
    50%{top:5%;}
}
@keyframes sun
{
  50%{top:60%;}
}
@keyframes day {
  50%{opacity: 0;}
}
@keyframes star {
  50%{top:93%;}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.