SUN AND MOON CODE IN HTML 5
 |
| Sun and moon |
<html>
<head>
<style>
body {
background-color: wight;
animation-name: dayTonight ;
animation-duration:10s ;
animation-iteration-count:infinite ; }
.content {position: absolute;
top: 50%; left:50%; transform: translate (-50%, -50% ); display: block;}
.sun{
height:150px;
width:159px;
border-radius: 50%;
Position: fixed;top:2;left:30%;
background-color:#FEFCD7;
border: 3px solid #FEFCD7;}
.shadow{height: 167px;
width: 167px;
border-radius: 50%; background-color:#fcd25b ;
top:5px;
left:0px;
animation-name: moveshadow ;
animation-duration:10s ;
animation-iteration-count:infinite;
}
@keyframes moveshadow{
0%{ transform: translateX(150px);
background-color: white;}
50%{ transform: translateX(-50px);
background-color: black;}
100% { transform: translateX(-170px)
background-color: white;} }
@keyframes dayTonight{
0% {background-color: white;}
50% {background-color: black;}
100% {background-color: white;} }
</style>
</head>
<body>
<div class="content">
<div class="sun">
<div class="shadow"></div>
</div>
</div>
</body>
</html>
W3 School website link:👉 click here.. 👈
YouTube channel link 👉:- click here..👈
0 Comments