css動畫模擬太陽地球月球運(yùn)動軌跡示例
我要評論先來看看效果吧~
1.結(jié)構(gòu)分析
既然是用動畫實(shí)現(xiàn)太陽地球月球的軌跡，那必然是太陽居中，地球圍繞太陽轉(zhuǎn)，與此同時月球圍繞地球轉(zhuǎn)，如下圖（嘿嘿，湊合看吧），就應(yīng)該使用一個大盒子（div），作為背景的太空，然后是太陽和地球，再把月亮嵌套進(jìn)地球里面。以下代碼使用漢語拼音來寫類名，方便區(qū)分。
<div>
<div class="beijing">
<div class="taiyang"></div>
<div class="diqiu">
<div class="yueqiu"></div>
</div>
</div>
</div>
2.css樣式
然后先給背景，太陽，地球，月亮四個盒子分別設(shè)置自己的樣式，將其設(shè)置為下面圖片顯示的情況(太陽居于中心的紅色，黃色的是地球，而上面藍(lán)色的是月亮)，為其設(shè)置為圓形，背景顏色，和定位位置來達(dá)到這個效果，并且設(shè)置一下邊框來使以后的動畫效果軌跡更清晰可見。具體參考以下代碼。
.beijing {
background-color: #93b5cf;
margin: 0, auto;
height: 400px;
width: 400px;
border: 1px black solid;
border-radius: 50%;
position: absolute;
left: 50%;
margin-left: -200px;
top: 100px;
/* background-image: url(./picture/xu.gif) */
}
.taiyang {
background-color: red;
height: 40px;
width: 40px;
border-radius: 50%;
/* border: 1px black solid; */
position: absolute;
left: 50%;
margin-left: -20px;
top: 50%;
margin-top: -20px;
}
.diqiu {
background-color: yellow;
height: 20px;
width: 20px;
border-radius: 50%;
position: absolute;
left: 50%;
margin-left: -10px;
margin-top: -10.5px;
transform-origin: 10px 210.5px;
}
.yueqiu {
background-color: rgb(47, 0, 255);
height: 10px;
width: 10px;
border-radius: 50%;
position: absolute;
left:50%;
margin-left: -5px;
margin-top: -10px;
transform-origin: 5px 20px;
}
3.動畫設(shè)置
首先我們要實(shí)現(xiàn)地球圍繞太陽轉(zhuǎn)的效果，太陽居中心不動，地球的旋轉(zhuǎn)中心改成太陽的位置，然后圍繞太陽做旋轉(zhuǎn)動畫（transform:rotate(？deg);）。使用transform-origin來調(diào)整旋轉(zhuǎn)的中心，具體位置調(diào)整參考css樣式內(nèi)代碼。
調(diào)整旋轉(zhuǎn)中心有點(diǎn)困難，大家可以多嘗試，先實(shí)現(xiàn)動畫效果，看動畫效果慢慢調(diào)整中心。
月球圍繞地球旋轉(zhuǎn)與上同理。
然后我們?yōu)槠湓O(shè)置鼠標(biāo)移入的事件效果，在鼠標(biāo)移入時候，地球就會圍繞太陽轉(zhuǎn)，同時月球圍繞地球轉(zhuǎn)。記得設(shè)置過渡（ transition: 7s linear;）。
.beijing:hover > .diqiu {
transform:rotate(360deg);
transition: 7s linear;
}
.beijing:hover .yueqiu{
transform: rotate(360deg);
transition: 7s linear;
}
這段效果也可以使用css逐幀動畫來寫。
@keyframes run{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
在css樣式地球和月球里面加上下面代碼引用動畫效果：
animation: run 6s infinite;
有能力可以寫出銀河系星系圍繞太陽旋轉(zhuǎn)的動畫，記得更改樣式，設(shè)置相應(yīng)的星星大小顏色背景，配合動畫效果，就可以做出很漂亮的星空了。
到此這篇關(guān)于css動畫模擬太陽地球月球運(yùn)動軌跡示例的文章就介紹到這了,更多相關(guān)css動畫模擬地球公轉(zhuǎn)軌跡內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了CSS實(shí)現(xiàn)奔跑的北極熊動畫,css動畫還是很有趣的，本文就用動畫實(shí)現(xiàn)一個奔跑的北極熊,感興趣的小伙伴一起來看看吧,需要的朋友可以參考下2023-05-10
css3鼠標(biāo)滑過實(shí)現(xiàn)動畫線條邊框
現(xiàn)如今網(wǎng)頁越來越趨近于動畫，相信大家平時瀏覽網(wǎng)頁或多或少都能看到一些動畫效果，今天我們做一個通過 css3 鼠標(biāo)滑過實(shí)現(xiàn)動畫線條邊框，下面一起看看吧2023-02-22
CSS3 Tab動畫實(shí)例之背景切換動態(tài)效果
這篇文章主要介紹了CSS3 Tab動畫實(shí)例之背景切換動態(tài)效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-08-20- 這篇文章主要介紹了CSS3常見動畫的實(shí)現(xiàn)方式,幫助大家更好的理解和學(xué)習(xí)使用CSS3制作特效，感興趣的朋友可以了解下2021-04-14
這篇文章主要介紹了css3實(shí)現(xiàn)的加載動畫效果，幫助大家更好的利用css3制作網(wǎng)頁，感興趣的朋友可以了解下2021-04-07
css3實(shí)現(xiàn)的天氣圖標(biāo)動畫效果
這篇文章主要介紹了css3實(shí)現(xiàn)的天氣圖標(biāo)動畫效果，幫助大家更好的利用css3制作網(wǎng)頁，感興趣的朋友可以了解下2021-04-06
CSS3通過var()和calc()函數(shù)實(shí)現(xiàn)動畫特效
這篇文章主要介紹了CSS3通過var()和calc()函數(shù)實(shí)現(xiàn)動畫特效,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-03-29
CSS3過渡旋轉(zhuǎn)透視2d3d動畫等效果的實(shí)例代碼
這篇文章主要介紹了CSS3過渡旋轉(zhuǎn)透視2d3d動畫等效果的實(shí)例代碼,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-03-18
純CSS3實(shí)現(xiàn)圓圈動態(tài)發(fā)光特效動畫的示例代碼
這篇文章主要介紹了純CSS3實(shí)現(xiàn)圓圈動態(tài)發(fā)光特效動畫的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編2021-03-08
css3動畫鼠標(biāo)放上圖片逐漸變大鼠標(biāo)離開圖片逐漸縮小效果
這篇文章主要介紹了css3動畫鼠標(biāo)放上圖片逐漸變大鼠標(biāo)離開圖片逐漸縮小,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-27
