To visit the site Click Here
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
background-color: skyblue;
animation:bg;
animation-duration:30s;
}
div.sun{
margin-top:150px;
margin-left:50px;
height:300px;
width:300px;
background-color: gold;
box-shadow: 0px 0px 50px 5px gold;
border-radius:150px;
position: absolute;
}
div.shadow{
margin-top:180px;
margin-left:-400px;
height:300px;
width:300px;
background-color: black;
border-radius:150px;
position: absolute;
animation:Eclipse;
animation-duration:40s;
}
@keyframes Eclipse{
from{
margin-top:250px;
margin-left:-300px;}
to{
margin-top:50px;
margin-left:400px;}
}
@keyframes bg{
from{
background-color:skyblue;
}
20%{
background-color:skyblue;
}
50%{
background-color:black;
}
100%{
background-color:skyblue;
}
}
</style>
</head>
<body>
<div class="sun"></div>
<div class="shadow"></div>
</body>
</html>
OUTPUT
Comments
Post a Comment