CSS3 行星是指使用 CSS3 技術模擬出類似行星軌跡和星球運動的動畫效果。這種效果常常被應用到游戲或者科學類的網站中,能夠使整個網站看起來更加生動有趣。
要創建 CSS3 行星,需要先創建一個 div 容器。然后使用偽元素 :before 和 :after 來模擬出兩個不同大小的圓形。接著使用 CSS3 的 transform: translateX() 和 translateY() 將圓形元素移動到正確的位置,并且盒模型的 width 和 height 屬性去調整大小,形成不同大小的行星。最后通過 animation 動畫屬性來連接圓形元素形成行星運動的效果。
.star { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; border-radius: 50%; background: #CCCCCC; } .star:before { content: ''; position: absolute; top: -50%; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: #FFFFFF; transform: translateX(-50%) translateY(-50%); } .star:after { content: ''; position: absolute; top: 50%; left: 50%; width: 2px; height: 2px; border-radius: 50%; background: #FFFFFF; transform: translateX(-50%) translateY(-50%); animation: star-rotate 3s linear infinite; } @keyframes star-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
使用上述代碼可以創建一個簡單的 CSS3 行星。通過繼續調整參數,你可以創建更加復雜的行星,例如添加多個圓形元素,調整每個圓形的大小和位置等。
上一篇css3 視頻聲音