使用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>