最近，我學習了如何使用CSS3實現地球軌跡動畫。這種動畫可以讓地球看起來像是在宇宙中旋轉，十分炫酷。

/* CSS代碼開始 */
@keyframes orbit {
from {transform: rotateZ(0)}
to {transform: rotateZ(360deg)}
}
.earth {
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background: url(earth.jpg);
animation: orbit 10s linear infinite;
}
.sun {
position: absolute;
width: 400px;
height: 400px;
border-radius: 50%;
background: url(sun.jpg);
box-shadow: 0 0 100px 30px orange;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* CSS代碼結束 */

首先，我們需要使用@keyframes來定義一個名為orbit的關鍵幀動畫。這個動畫將把地球從0度旋轉到360度。接下來，我們需要創建一個類名為.earth的元素，它將包含地球的圖片和動畫效果。設置它的position為absolute，width和height為200px，border-radius為50%，background為地球圖片。然后我們將這個元素應用我們剛才定義的orbit動畫，并設置循環播放和線性變化。最后，我們需要再創建一個代表太陽的類名為.sun的元素。設置它的position為absolute，width和height為400px，border-radius也為50%。然后設置它的background為太陽圖片，box-shadow為橙色，top和left為50%，以及transform為translate(-50%,-50%)。這將讓它居中顯示在屏幕上。

這樣我們就完成了地球軌跡動畫的實現。當我們在瀏覽器中查看它時，我們將在太陽的中心看到地球不斷旋轉。