這期我們來一起探討如何用線條勾勒出一個簡單的地球儀。廢話不多說動手！！！
想要用線條勾勒出一個簡單的地球儀，首先我們就得想到如何形成一個線條。這邊我分享一下我的方法（用邊框）
然后使用border-radius這個屬性，讓一個正方形的邊框變成一個圓形這樣的話，我們就可以進行下一步動作了。
注意：這邊的容器不要設置背景顏色就讓他單獨形成一個圓形。效果圖如下：
這邊你會看打這個球形為什么會和平常看到的不一樣，這個問題問的非常好。因為我給他加了旋轉屬性rotate。
首先我們要先通過transform-style: preserve-3d;這個屬性讓div變成一個3d舞台然后在設置transform：rotateX（）屬性和transform：rotateY（）屬性來實現他的翻轉。
我這邊是這樣設置的：
接下來我們就要思考一個問題了，實現一個地球儀要多少個這樣的線條，沒錯就是18條。經度需要9條，緯度需要9條。當然你也可以設置6條這邊就看你個人愛好。
先設置9條繞着X軸旋轉的，然后在設置9條繞着Y軸旋轉的。這樣就以來地球儀基本就做好了如圖：
是不是感覺有點字小帥就和我一樣。然后接下來我們就要實現讓他自動轉起來。
首先我們需要制定一個關鍵幀。這邊我是這樣制定的：
要用到@keyframes 這個屬性后面接的是這個關鍵幀的名稱（zhuan）0%的意思是開始狀態，然后100%是結束狀態。我寫的意思就是讓這個球繞着Z軸轉一圈。就猶如地球儀轉一圈一樣。
然后我們做到這里幾乎就完成了制作了完成了，現在就差最后一步了，就是調用這個關鍵幀。用到animation這個屬性。
animation屬性它的屬性值就比較多了 不過常用的就是幾種，上述的是合並寫法，屬性值用空格隔開。
第一個值就是調用的關鍵幀的名稱了，然后呢第二個值就是 完成這個關鍵幀所需要的時間（我這邊設置的是十秒），第三個值就是這個動畫執行的類型linear也是常用到的類型，指的是勻速。
然后最后一個值的意思是infinite無限循環。好了做到這里就做完了。點擊運行你會發現。
就是這樣沒錯，不過你得腦補他是在繞着Z軸轉動的。希望你能理解!
這一期就和大家分享這么點了，下期再見！！