利用CSS實(shí)現(xiàn)日地月公轉(zhuǎn)動(dòng)畫效果

發(fā)布時(shí)間：2021-09-15 10:51:19 來源：億速云閱讀：132 作者：chen 欄目：web開發(fā)

本篇內(nèi)容主要講解“利用CSS實(shí)現(xiàn)日地月公轉(zhuǎn)動(dòng)畫效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“利用CSS實(shí)現(xiàn)日地月公轉(zhuǎn)動(dòng)畫效果”吧!

HTML

重點(diǎn)是CSS，HTML放上三個(gè) div 就ok了。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>Mancuoj</title>
        <link
            href="simulation.css"
            rel="stylesheet"
        />
    </head>

    <body>
        <h2>Mancuoj</h2>
        <figure>
            <div></div>
            <div>
                <div></div>
            </div>
        </figure>
    </body>
</html>

背景和文字

導(dǎo)入我最喜歡的 Lobster 字體，然后設(shè)為白色，字體細(xì)一點(diǎn)。

@import url("https://fonts.googleapis.com/css2?family=Lobster&display=swap");

h2 {
    color: white;
    font-size: 60px;
    font-family: Lobster, monospace;
    font-weight: 100;
}

背景隨便找了一個(gè)偏黑紫色，然后把畫的內(nèi)容設(shè)置到中間。

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2f3141;
}

.container {
    font-size: 10px;
    width: 40em;
    height: 40em;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

日地月動(dòng)畫

眾所周知：地球繞著太陽(yáng)轉(zhuǎn)，月球繞著地球轉(zhuǎn)。

我們畫的是公轉(zhuǎn)，太陽(yáng)就直接畫出來再加個(gè)陰影高光，月亮地球轉(zhuǎn)就可以了。

最重要的其實(shí)是配色（文章末尾有推薦網(wǎng)站），我實(shí)驗(yàn)好長(zhǎng)時(shí)間的配色，最終用了三個(gè)漸變色來表示日地月。

日: linear-gradient(#fcd670, #f2784b);
地: linear-gradient(#19b5fe, #7befb2);
月: linear-gradient(#8d6e63, #ffe0b2);

CSS 應(yīng)該難不到大家，隨便看看吧。

軌道用到了 border，用銀色線條當(dāng)作公轉(zhuǎn)的軌跡。

動(dòng)畫用到了自帶的 animation ，每次旋轉(zhuǎn)一周。

.sun {
    position: absolute;
    width: 10em;
    height: 10em;
    background: linear-gradient(#fcd670, #f2784b);
    border-radius: 50%;
    box-shadow: 0 0 8px 8px rgba(242, 120, 75, 0.2);
}

.earth {
    --diameter: 30;
    --duration: 36.5;
}

.moon {
    --diameter: 8;
    --duration: 2.7;
    top: 0.3em;
    right: 0.3em;
}

.earth,
.moon {
    position: absolute;
    width: calc(var(--diameter) * 1em);
    height: calc(var(--diameter) * 1em);
    border-width: 0.1em;
    border-style: solid solid none none;
    border-color: silver transparent transparent transparent;
    border-radius: 50%;
    animation: orbit linear infinite;
    animation-duration: calc(var(--duration) * 1s);
}

@keyframes orbit {
    to {
        transform: rotate(1turn);
    }
}

.earth::before {
    --diameter: 3;
    --color: linear-gradient(#19b5fe, #7befb2);
    --top: 2.8;
    --right: 2.8;
}

.moon::before {
    --diameter: 1.2;
    --color: linear-gradient(#8d6e63, #ffe0b2);
    --top: 0.8;
    --right: 0.2;
}

.earth::before,
.moon::before {
    content: "";
    position: absolute;
    width: calc(var(--diameter) * 1em);
    height: calc(var(--diameter) * 1em);
    background: var(--color);
    border-radius: 50%;
    top: calc(var(--top) * 1em);
    right: calc(var(--right) * 1em);
}

到此，相信大家對(duì)“利用CSS實(shí)現(xiàn)日地月公轉(zhuǎn)動(dòng)畫效果”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

利用CSS實(shí)現(xiàn)日地月公轉(zhuǎn)動(dòng)畫效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽