css動(dòng)畫(huà)模擬太陽(yáng)地球月球運(yùn)動(dòng)軌跡示例

發(fā)布時(shí)間：2023-05-10 14:31:13 作者：佚名

這篇文章主要介紹了css動(dòng)畫(huà)模擬太陽(yáng)地球月球運(yùn)動(dòng)軌跡示例,調(diào)整旋轉(zhuǎn)中心有點(diǎn)困難，大家可以多嘗試，先實(shí)現(xiàn)動(dòng)畫(huà)效果，看動(dòng)畫(huà)效果慢慢調(diào)整中心,需要的朋友可以參考下

先來(lái)看看效果吧~

1.結(jié)構(gòu)分析

既然是用動(dòng)畫(huà)實(shí)現(xiàn)太陽(yáng)地球月球的軌跡，那必然是太陽(yáng)居中，地球圍繞太陽(yáng)轉(zhuǎn)，與此同時(shí)月球圍繞地球轉(zhuǎn)，如下圖（嘿嘿，湊合看吧），就應(yīng)該使用一個(gè)大盒子（div），作為背景的太空，然后是太陽(yáng)和地球，再把月亮嵌套進(jìn)地球里面。以下代碼使用漢語(yǔ)拼音來(lái)寫(xiě)類(lèi)名，方便區(qū)分。

<div>
        <div class="beijing">
            <div class="taiyang"></div>
            <div class="diqiu">
                <div class="yueqiu"></div>
            </div>
        </div>
 </div>

2.css樣式

然后先給背景，太陽(yáng)，地球，月亮四個(gè)盒子分別設(shè)置自己的樣式，將其設(shè)置為下面圖片顯示的情況(太陽(yáng)居于中心的紅色，黃色的是地球，而上面藍(lán)色的是月亮)，為其設(shè)置為圓形，背景顏色，和定位位置來(lái)達(dá)到這個(gè)效果，并且設(shè)置一下邊框來(lái)使以后的動(dòng)畫(huà)效果軌跡更清晰可見(jiàn)。具體參考以下代碼。

 .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.動(dòng)畫(huà)設(shè)置

首先我們要實(shí)現(xiàn)地球圍繞太陽(yáng)轉(zhuǎn)的效果，太陽(yáng)居中心不動(dòng)，地球的旋轉(zhuǎn)中心改成太陽(yáng)的位置，然后圍繞太陽(yáng)做旋轉(zhuǎn)動(dòng)畫(huà)（transform:rotate(？deg);）。使用transform-origin來(lái)調(diào)整旋轉(zhuǎn)的中心，具體位置調(diào)整參考css樣式內(nèi)代碼。

調(diào)整旋轉(zhuǎn)中心有點(diǎn)困難，大家可以多嘗試，先實(shí)現(xiàn)動(dòng)畫(huà)效果，看動(dòng)畫(huà)效果慢慢調(diào)整中心。

月球圍繞地球旋轉(zhuǎn)與上同理。

然后我們?yōu)槠湓O(shè)置鼠標(biāo)移入的事件效果，在鼠標(biāo)移入時(shí)候，地球就會(huì)圍繞太陽(yáng)轉(zhuǎn)，同時(shí)月球圍繞地球轉(zhuǎn)。記得設(shè)置過(guò)渡（ transition: 7s linear;）。

 
    .beijing:hover > .diqiu {
        transform:rotate(360deg);
        transition: 7s linear;
    }
    .beijing:hover .yueqiu{
        transform: rotate(360deg);
        transition: 7s linear;
    }

這段效果也可以使用css逐幀動(dòng)畫(huà)來(lái)寫(xiě)。

 @keyframes run{
        0%{
            transform:rotate(0deg);
        }
        100%{
            transform:rotate(360deg);
        }
    }

在css樣式地球和月球里面加上下面代碼引用動(dòng)畫(huà)效果：

        animation: run 6s  infinite;

有能力可以寫(xiě)出銀河系星系圍繞太陽(yáng)旋轉(zhuǎn)的動(dòng)畫(huà)，記得更改樣式，設(shè)置相應(yīng)的星星大小顏色背景，配合動(dòng)畫(huà)效果，就可以做出很漂亮的星空了。

到此這篇關(guān)于css動(dòng)畫(huà)模擬太陽(yáng)地球月球運(yùn)動(dòng)軌跡示例的文章就介紹到這了,更多相關(guān)css動(dòng)畫(huà)模擬地球公轉(zhuǎn)軌跡內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！