CSS Eclipse

So you know how people forget holidays are coming. I realized Monday that it was eclipse day. Thought I could do make it with CSS.

Template saves time

I took the template that I use for other CSS projects and filled the center with the Sun. The sun is a circle with a drop shadow.
The sky is the subject div.

<div class="flex-container">
<div class="main">
<div class="outer_frame">
    <div class="subject">
      <div class="sun"></div>
  </div>    
</div>
</div>
</div>

.sun {
filter: drop-shadow(0 0 1.5rem white); 
  width: 300px;
  height: 300px;
  background: yellow;
  border-radius: 50%;
  position: absolute;
}

The Moon

The CSS Moon is gray circle of the same size.

.moon{
  width: 300px;
  height: 300px;
  background: gray;
  border-radius: 50%;
  z-index: 1;
  position: relative;
  margin-left: -1100px;
}

The Moon Div had to go in an different div than the Sun so it could move on and off screen aka the sky.

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

The Outer frame needed to hide the moon till it came on screen so it got overflow: hidden.

.outer_frame {
  background-color: #4981b3;
  overflow: hidden;
}

The final animation on the moon. I tried changing the moon from gray to black as it crossed the sky but I need finer control on the keyframes. And with an actual Eclipse going on, I went outside.

So here's my fast recreation of it.

.moon {
   animation: eclipse 18s linear;
 }

@keyframes eclipse {
   0% {
    transform: translate(0px, 0);
  }


  100% {
    transform: translate(1100px, 0);

  }
}

Blog

Chris Jarvis

Template saves time

The Moon

Join Our Newsletter. No Spam, Only the good stuff.

Related