編寫行星繞太陽轉(zhuǎn)css是一種有趣的技術(shù)。我們可以利用CSS的變換屬性,創(chuàng)建生動逼真的行星旋轉(zhuǎn)效果。下面是一段示例代碼:
/* 太陽的樣式 */ #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; } /* 旋轉(zhuǎn)動畫 */ @keyframes rotate { from { transform: rotate(0deg) translateX(150px) rotate(0deg); } to { transform: rotate(360deg) translateX(150px) rotate(-360deg); } }
上述代碼創(chuàng)建了一個黃色的太陽和一個藍(lán)色的行星,行星繞太陽轉(zhuǎn),它的大小和顏色可以按照需要進(jìn)行改變。同時,我們可以調(diào)整動畫時長、旋轉(zhuǎn)半徑等參數(shù),以實現(xiàn)不同的效果。以上示例只是一個基礎(chǔ)的演示,請大家自行嘗試編寫更復(fù)雜的動畫效果。
上一篇path to vue
下一篇jquery keys