CSS是一種用于網頁設計的樣式表語言，它可以幫助我們實現各種炫酷的效果。其中一種效果就是繞著太陽轉的效果，下面我們來看一下如何使用CSS實現這種效果。

.sun {
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: yellow;
}
.earth {
position: absolute;
left: 50%;
top: 0;
width: 50px;
height: 50px;
transform-origin: center 200%;
animation: rotate 10s linear infinite;
border-radius: 50%;
background: blue;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

首先，我們需要創建一個太陽和地球的HTML結構，使用absolute定位。太陽使用一個黃色的圓形，地球使用一個藍色的圓形。太陽需要居中顯示，可以使用定位和寬高來控制。

接下來，我們需要為地球添加動畫，讓它繞著太陽轉。這里使用CSS3的動畫來實現，設置動畫名稱為rotate，動畫時長為10秒，動畫速度為linear，動畫重復次數為無限循環。我們還需要設置地球的transform-origin屬性，以圓心為基準點，向下偏移2倍它的半徑，這樣地球就可以按照橢圓軌跡繞著太陽旋轉了。

最后，我們還需要定義rotate動畫，使地球繞著太陽旋轉。這里我們使用transform: rotate()屬性來實現，將地球轉動360度，即一周。當地球完成一周的旋轉后，又會從頭開始旋轉，實現了無限循環。

通過以上代碼，我們就可以實現一個繞著太陽轉的效果了。這種效果在網頁中可以增加趣味性和視覺效果，讓用戶對網頁更加感興趣。