A Pen by Andrew Kirchmyer.

css-solar-eclipse.markdown

css solar eclipse

A Pen by Andrew Kirchmyer on CodePen.

License.

index.html

<div class="sun"></div>
<div class="moon"></div>

style.css

html{
    height: 100%;
}
body {
    background: black;
    height: 100%;
}
.sun {
    height: 200px;
    width: 200px;
    box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
    border-radius: 100px;
    background-color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
}
.moon {
    height: 200px;
    width: 200px;
    border-radius: 100px;
    background-color: black;
    position: absolute;
    top: 50%;
    margin-top: -100px;
    margin-left: -100px;
    -webkit-animation: slidein 30s linear infinite;
}

@-webkit-keyframes slidein {
  from{
      left: 22%;
  }
  to{
        left: 78%;
  }
}