編寫行星繞太陽轉css是一種有趣的技術。我們可以利用CSS的變換屬性,創建生動逼真的行星旋轉效果。下面是一段示例代碼:
/* 太陽的樣式 */ #sun { width: 100px; height: 100px; border-radius: 50%; background-color: yellow; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* 行星的樣式 */ #planet { width: 30px; height: 30px; border-radius: 50%; background-color: blue; position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); animation: rotate 4s linear infinite; } /* 旋轉動畫 */ @keyframes rotate { from { transform: rotate(0deg) translateX(150px) rotate(0deg); } to { transform: rotate(360deg) translateX(150px) rotate(-360deg); } }
上述代碼創建了一個黃色的太陽和一個藍色的行星,行星繞太陽轉,它的大小和顏色可以按照需要進行改變。同時,我們可以調整動畫時長、旋轉半徑等參數,以實現不同的效果。以上示例只是一個基礎的演示,請大家自行嘗試編寫更復雜的動畫效果。
上一篇path to vue
下一篇jquery keys