solar eclipse animation using HTML and CSS | Learn Html CSS Animation

In this tutorial you will learn to create solar effect using CSS. You can also call it CSS animation for solar eclipse.
This is just a short tutorial and you will learn this animation just in 1 minute.
Enjoy!!
HTML Code
Below is HTML file Code.
<body>
<div class="moon"></div>
</body>
CSS Code
Below is CSS file Code.
html, body {
height: 100%;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background-image: linear-gradient(30deg, #182c51, #09101e);
}
.moon {
background-image: linear-gradient(30deg, #13223f, #2b4980);
width: 256px;
height: 256px;
border-radius: 50%;
position: relative;
}
.moon::before {
content: "";
background-color: #ffa400;
position: absolute;
height: 100%;
width: 100%;
border-radius: 50%;
z-index: -1;
animation: 10.2s eclipse linear infinite alternate;
}
@keyframes eclipse {
0% {
transform: translate(-30px, 30px) scale(0.9);
}
50% {
transform: translate(0px, 0px) scale(1.02);
box-shadow: 0 0 10px #f9f3f2,
0 0 80px 8px #c7938B;
background: #efdbd8;
}
100% {
transform: translate(30px, -30px) scale(0.9);
box-shadow: none;
}
}
Watch Below Video for Detail Understanding
Recent Blog
Instagram Post