CSS3 行星旋轉是一種非常炫酷的效果,可以為網站增添不少視覺上的樂趣。
實現行星旋轉效果的方法很簡單,只需要利用 CSS3 中的 transform 屬性就可以了。首先需要定義一個行星的 div,然后在 CSS 中添加如下樣式:
.planet { width: 60px; height: 60px; border-radius: 50%; background-color: #FFD700; position: absolute; top: 50%; left: 50%; margin-top: -30px; margin-left: -30px; animation: rotateInfinite 10s linear infinite; } @keyframes rotateInfinite { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
上述代碼中,我們通過 transform: rotate() 屬性定義了行星的旋轉方向和速度。通過 animation 屬性,我們為行星添加了一個無限循環的旋轉動畫,可以讓行星一直旋轉下去。
此外,我們還必須設置行星的位置,這里利用了 position 和 margin 屬性來實現居中定位。最終效果如下:
除了單獨一個行星的旋轉,我們還可以通過嵌套多個行星元素,實現更加復雜的行星系統旋轉。