使用CSS动画在地球上旋转圆点

Question

我已经得到了一个地球的图像，我想在这个图像上放置一个以不同角度旋转的红点。以下是我迄今为实现测试目的而实施的内容。

.globe{ 
 
    width:200px; height:200px; background-color:blue; 
 
    border-radius:100px; 
 
    position:absolute; left:0px; right:0px; top:150px; 
 
    margin-left:auto; margin-right:auto; 
 
} 
 

 
.dot{ 
 
    width:30px; height:30px; background-color:red; 
 
    border-radius:15px; 
 
    position:absolute; left:0px; right:0px; top:200px; 
 
    margin-left:auto; margin-right:auto; 
 
    animation: rotate 3s infinite linear; 
 
} 
 

 

 
@keyframes rotate { 
 
\t from { 
 
\t \t transform: rotate(0deg) 
 
\t \t   translate(-150px) 
 
\t \t   rotate(0deg); 
 
\t } 
 
\t to { 
 
\t \t transform: rotate(360deg) 
 
\t \t   translate(-150px) 
 
\t \t   rotate(-360deg); 
 
\t } 
 
}

<div class="dot"></div> 
 
<div class="globe"></div>

而下方则是原始地球图像的截图和一个红点。 https://www.awesomescreenshot.com/image/2551396/94b0a80cb7d868fe1fa10f318d698438

忽略红线，因为这将只是一个固定的图像。

我不知道如何在逆时针方向旋转地球上的点。所以当它完成1次旋转时，它来自全球。但是当它开始的时候，它会覆盖全球的形象。

我希望我有这样的适当解释:)

Answer 1

我发现从this文章，其中有这样codepen此解决方案。这篇文章值得一读，因为作者解释了它是如何完成的。我所做的一切都是在#galaxy类中添加rotateY(-30deg)，使其达到您想要的倾斜角度并更改颜色。可悲的是，红线并没有出现在火狐的行星前，但似乎是在铬。

要改变地球和月球的大小，你只需要改变CSS底部的#earth和#moon选择器的字体大小。玩一下代码。我相信你可以把它看成你想要的。

最好在全屏模式下查看代码片段。

/* Background */ 
 

 
    #universe { 
 
     z-index: 1; 
 
     position: absolute; 
 
     overflow: hidden; 
 
     width: 100%; 
 
     height: 100%; 
 
    } 
 

 
    #galaxy { 
 
     position: relative; 
 
     width: 100%; 
 
     height: 100%; 
 
     transform: rotateX(75deg) rotateY(-30deg); 
 
     transform-style: preserve-3d; 
 
    } 
 

 
    #earth, .moon { 
 
     position: absolute; 
 
     top: 50%; 
 
     left: 50%; 
 
     width: 1em; 
 
     height: 1em; 
 
     margin-top: -0.5em; 
 
     margin-left: -0.5em; 
 
     border-radius: 50%; 
 
     transform-style: preserve-3d; 
 
    } 
 

 
    #earth { 
 
     background-color: blue; 
 
     background-repeat: no-repeat; 
 
     background-size: cover; 
 
     transform: rotateX(-75deg); 
 
    } 
 

 
    .pos { 
 
     position: absolute; 
 
     transform-style: preserve-3d; 
 
     animation-name: invert; 
 
     animation-iteration-count: infinite; 
 
     animation-timing-function: linear; 
 
    } 
 

 
    .moon { 
 
     background-color: red; 
 
     background-repeat: no-repeat; 
 
     background-size: cover; 
 
     animation-iteration-count: infinite; 
 
     animation-timing-function: linear; 
 
    } 
 

 
    .orbit { 
 
     position: absolute; 
 
     top: 50%; 
 
     left: 50%; 
 
     border: 8px solid red; 
 
     border-radius: 50%; 
 
     animation-name: orbit; 
 
     animation-iteration-count: infinite; 
 
     animation-timing-function: linear; 
 
     transform-style: preserve-3d; 
 
    } 
 

 
    /* Animations */ 
 
    @keyframes orbit { 
 
     0% { transform: rotateZ(0deg); } 
 
     100% { transform: rotateZ(-360deg); } 
 
    } 
 

 
    @keyframes invert { 
 
     0% { transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg); } 
 
     100% { transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); } 
 
    } 
 

 
    /* Orbit sizes */ 
 
    #moon.orbit { 
 
     width: 12em; 
 
     height: 12em; 
 
     margin-top: -6em; 
 
     margin-left: -6em; 
 
    } 
 

 
    /* Planet starting positions */ 
 
    #moon .pos { 
 
     left: 50%; 
 
     top: -1px; 
 
     border: solid 3px red; 
 
    } 
 

 
    /* Planet animation durations */ 
 
    #moon.orbit, #moon .pos { 
 
     animation-duration: 2.89016s; 
 
    } 
 

 
    /* Planet sizes */ 
 
    #earth { 
 
     font-size: 24em; 
 
    } 
 
    #moon { 
 
     font-size: 4em; 
 
    }

<div id="universe"> 
 
    <div id="galaxy"> 
 
    
 
    <div id="earth"></div> 
 

 
    <div id="moon" class="orbit"> 
 
     <div class="pos"> 
 
     <div class="moon"></div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>