CSS3行星公轉是一項非常酷炫的技術,它可以讓我們在網頁上創建出逼真的太陽系、宇宙等效果。下面我們一起來學習如何利用CSS3來實現行星的公轉。
/*設置太陽*/ .sun { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin-top: -50px; margin-left: -50px; border-radius: 50%; background-color: yellow; box-shadow: 0 0 30px red; } /*設置行星*/ .planet { position: absolute; top: 10%; left: 50%; width: 20px; height: 20px; border-radius: 50%; background-color: blue; box-shadow: 0 0 5px rgba(0, 0, 255, 0.5); transform-origin: center center; animation: orbit 8s infinite linear; } @keyframes orbit { from { transform: rotate(0deg) translateX(100px) rotate(0deg); } to { transform: rotate(360deg) translateX(100px) rotate(-360deg); } }
上面的代碼中,我們首先設置了太陽的樣式,然后設置行星的樣式。我們通過設置行星的位置、大小、形狀、背景色等來模擬真實的行星。值得注意的是,我們還設置了一個動畫效果——公轉,這是通過給行星添加“orbit”動畫來實現的。通過設置“animation”屬性,我們可以實現行星圍繞太陽的不斷公轉。
好了,到這里我們就學會了如何利用CSS3來實現行星的公轉效果,希望大家喜歡。