html ccs3太陽系行星運轉動畫

2022-03-15 07:27:34 字數 4854 閱讀 3013

做乙個太陽系八大行星的運轉動畫，不包括行星的衛星，所有行星圍繞太陽公轉，行星採用純色，暫時沒有自轉。

效果靜態圖：

動畫中包括：太陽及各行星，執行軌道，行星公轉動畫。

先畫好草圖，設計好大小和位置，根據公轉週期計算好動畫執行的時間。

html的結構:

乙個class為solarsys的div，作為太陽系容器元素，該div的position為relative。

行星軌道和行星都用div，position為absolute。

容器用relative和內部元素採用absolute的定位方式，比較簡單的能實現效果，缺點就是大小是固定的。

<


div 


class


="solarsys"


>


<


div 


class


='sun'


>


div>


<


div 


class


='mercuryorbit'


>


div>


<


div 


class


='mercury'


>


div>


<


div 


class


='venusorbit'


>


div>


<


div 


class


='venus'


>


div>


<


div 


class


='earthorbit'


>


div>


<


div 


class


='earth'


>


div>


<


div 


class


='marsorbit'


>


div>


<


div 


class


='mars'


>


div>


<


div 


class


='jupiterorbit'


>


div>


<


div 


class


='jupiter'


>


div>


<


div 


class


='saturnorbit'


>


div>


<


div 


class


='saturn'


>


div>


<


div 


class


='uranusorbit'


>


div>


<


div 


class


='uranus'


>


div>


<


div 


class


='neptuneorbit'


>


div>


<


div 


class


='neptune'


>


div>


div>
太陽系容器div的css：定寬，定高，relative定位，頁面內劇中對齊。

.solarsys
太陽div的css：按照設計的大小和位置，設定寬高，left，top。

設定顏色。

通過把boder-radius生成50%，把乙個正方形變成圓形。

通過box-shadow的4層顏色設定實現太陽光暈。

.sun
行星軌道div的css：假設是水星軌道。

按照設計的大小和位置，設定寬高，left，top。

背景色透明。

通過把boder-radius生成50%，把乙個正方形變成圓形。

boder的型別設成虛線。

boder的顏色設成灰色。

寬度設1。

.mercuryorbit
行星div的css：假設是水星。

按照設計的大小和位置，設定寬高，left，top。

設定顏色。

通過把boder-radius生成50%，把乙個正方形變成圓形。

將transfrom-origin設定成當前div的左上角相對於整個太陽系容器的中心點的橫向和縱向的偏移量。加上旋轉動畫後就是圍繞著中心點旋轉效果。 

做乙個animation，引用rotate關鍵幀動畫，線性永久執行，這裡的執行時長是根據行星的公轉週期計算出來。

.mercury
rotate關鍵幀動畫：逆時針旋轉。

@keyframes rotate 


}
基本結構完成。

僅在chrome中測試過。

全部**：

<


html


>


<


head


>


<


style


>


.solarsys


/*太陽


*/.sun 


/*水星


*/.mercury 


/*水星軌道


*/.mercuryorbit 


/*金星


*/.venus 


/*金星軌道


*/.venusorbit 


/*地球


*/.earth 


/*地球軌道


*/.earthorbit 


/*火星


*/.mars 


/*火星軌道


*/.marsorbit 


/*木星


*/.jupiter 


/*木星軌道


*/.jupiterorbit 


/*土星


*/.saturn 


/*土星軌道


*/.saturnorbit 


/*天王星


*/.uranus 


/*天王星軌道


*/.uranusorbit 


/*海王星


*/.neptune 


/*海王星軌道


*/.neptuneorbit 


@keyframes rotate 


}    


style


>


head


>


<


body


>


<


div 


class


="solarsys"


>


<


div 


class


='sun'


>


div>


<


div 


class


='mercuryorbit'


>


div>


<


div 


class


='mercury'


>


div>


<


div 


class


='venusorbit'


>


div>


<


div 


class


='venus'


>


div>


<


div 


class


='earthorbit'


>


div>


<


div 


class


='earth'


>


div>


<


div 


class


='marsorbit'


>


div>


<


div 


class


='mars'


>


div>


<


div 


class


='jupiterorbit'


>


div>


<


div 


class


='jupiter'


>


div>


<


div 


class


='saturnorbit'


>


div>


<


div 


class


='saturn'


>


div>


<


div 


class


='uranusorbit'


>


div>


<


div 


class


='uranus'


>


div>


<


div 


class


='neptuneorbit'


>


div>


<


div 


class


='neptune'


>


div>


div>


body


>


html


>

html ccs3實現的太陽系行星

太陽 sun 水星 mercury 水星軌道 mercuryorbit 金星 venus 金星軌道 venusorbit 地球 earth 地球軌道 earthorbit 火星 mars 火星軌道 marsorbit 木星 jupiter 木星軌道 jupiterorbit 土星 saturn 土星...

CSS 繪製太陽系行星執行軌跡

doctype html en utf 8 css3 動畫 title div.ex1 keyframes myfirst to webkit keyframes myfirst to div.ex2 keyframes myfirst2 25 50 100 webkit keyframes myf...

利用CSS模擬太陽系運轉

display flex 屬性規定元素應該生成的框的型別。justify content center align items center position relative 屬性指定乙個元素 靜態的，相對的，絕對或固定 的定位方法的型別。值 生成相對定位的元素，相對於其正常位置進行定位。path...