HTML炫酷的地球特效是一個非常有趣的代碼,讓你可以在你的網頁上加入一個3D的地球同步旋轉的特效。以下是這個特效的代碼:
<!DOCTYPE html> <html> <head> <title>HTML炫酷的地球特效</title> <style> #earth{ position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px; background: url(https://i.imgur.com/uhiAidA.png) no-repeat center center; /*地球圖片鏈接*/ background-size: 50%; border-radius: 100%; animation: spin 10s linear infinite; } @keyframes spin{ 100% { transform: rotateY(360deg) rotateX(360deg); } } </style> </head> <body> <div id="earth"></div> </body> </html>這段代碼中的div元素被賦予一個id屬性為“earth”。CSS樣式中的“position: absolute”屬性使得div元素位于頁面的中心位置。同時,該元素被賦予了一定的寬度和高度,并且通過“margin: -100px 0 0 -100px;”屬性將它的位置居中。 在CSS樣式的background屬性中,我們指定了地球圖片的鏈接。此外,background-size被設置為50%以使圖片縮小為原來的一半。border-radius屬性通過將元素的圓角設置為100%來將它變成一個圓形元素。最后,我們使用animation屬性將該元素繞著Y軸和X軸旋轉。 通過這段簡單的代碼,你可以快速將一個漂亮的地球特效添加到您的HTML頁面上。