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

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

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供高邑網(wǎng)站建設(shè)、高邑做網(wǎng)站、高邑網(wǎng)站設(shè)計(jì)、高邑網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、高邑企業(yè)網(wǎng)站模板建站服務(wù)，10余年高邑做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

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)畫

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

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

最重要的其實(shí)是配色（文章末尾有推薦網(wǎng)站），我實(shí)驗(yàn)好長時(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);
}

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

網(wǎng)站名稱：利用CSS實(shí)現(xiàn)日地月公轉(zhuǎn)動(dòng)畫效果
瀏覽地址：http://www.rwnh.cn/article6/psjcog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、網(wǎng)站營銷、軟件開發(fā)、服務(wù)器托管、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

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