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);
}
}
SOCIAL SHARE CARD GENERATOR