關于CSS3地球是否能夠轉動,這是一個非常有趣的問題。其實,我們可以通過一些魔術般的代碼,輕松實現這個效果。
/* 關鍵幀動畫 */ @keyframes earth-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* 地球樣式 */ .earth { width: 300px; height: 300px; background: url("https://cdn.pixabay.com/photo/2012/04/11/11/41/earth-28760_1280.png") no-repeat center; animation: earth-rotate 10s linear infinite; }
如上所示,我們通過使用CSS3的@keyframes關鍵幀動畫,定義了一個名為earth-rotate的動畫,讓地球沿著Z軸旋轉360度。接著,在地球的樣式中,我們指定了一個3D背景圖片,并將地球元素與動畫進行關聯。
最后,我們得到的效果是一個逼真的地球,帶有流暢而自然的旋轉角度。同時,我們也可以根據自己的需求,調整動畫的速度、方向和循環次數等參數,從而得到完美的動畫效果。
上一篇css led數字字體
下一篇css li 下邊框顏色