<div class="lab-container">
<div class="earth"></div>
</div>
:root {
--accent: #0fbcf9;
}
body {
background: #000 url(https://cdn.w3bits.com/content/images/starfield.jpg);
}
.lab-container {
min-height: 100dvh;
display: grid;
place-items: center;
padding: 2rem;
}
.earth {
position: relative;
width: 300px;
height: 300px;
margin: 3em auto;
background: #888 url(https://cdn.w3bits.com/content/images/earthmap.jpg) 0 0 repeat;
border-radius: 50%;
background-size: 630px;
animation: rotate 4s linear infinite;
transition: transform 200ms linear;
transform-style: preserve-3d;
box-shadow: inset 20px 0 80px 6px rgba(0, 0, 0, 1);
color: #000;
}
.earth:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: -80px 15px 80px 10px rgba(0,0,0,.9) inset;
z-index: 2;
}
.earth:after {
content: "";
position: absolute;
border-radius: 50%;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0.2;
background: radial-gradient(circle at 100px 100px, #fff, #000);
}
@keyframes rotate {
0% {background-position: 0 0;}
100% {background-position: 630px 0;}
}