中秋節のギフトとして、CSS の太陽、地球、月の革命アニメーション効果を共有してください。-CSSチュートリアル-php.cn

中秋節のギフトとして、CSS の太陽、地球、月の革命アニメーション効果を共有してください。

青灯夜游

リリース： 2021-09-23 09:50:14

転載

2564 人が閲覧しました

もうすぐ中秋節です。この記事では、純粋な CSS で実現した太陽、地球、月の革命のアニメーション効果を共有します。開いて学びに来てください。

中秋節のギフトとして、CSS の太陽、地球、月の革命アニメーション効果を共有してください。

ナゲッツのこの中秋節イベントに向けて、私は 2 日間真剣に考え、ついにナゲッツで誰もやったことのないことを思いつきました (おそらくまだ終わっていない) さあ、私も知りません) - HTML CSS を使用して、太陽、地球、月の公転をシミュレートします。 [関連する推奨事項: "css ビデオチュートリアル "]

太陽、地球、月が一直線上にあるため、中秋節の月は大きくて丸いことは誰もが知っています。中央には太陽と月が地球の反対側にあり、この日の月相は満月です。この段落は中秋節に関連するので読み飛ばしていただいても構いません。

しかし、私はフロントエンドをまったく学んだことがなかったので、この 2 日間で flexbox と grid を学び直しました。結果はかなり良いものであると言えます。良いです（私の美学に問題がなければ）。

この配色がとても気に入っています。あなたにも気に入っていただければ幸いです。

ソースコードを CodePen に置きます。リンク Sun Earth Moon (codepen.io)

HTML

##ポイントはCSSで、HTMLにdivを3つ入れればOKです。

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

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

ログイン後にコピー

背景とテキスト

お気に入りの Lobster フォントをインポートし、白に設定してフォントを少し細くします。

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

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

ログイン後にコピー

暗い紫色の背景をランダムに見つけて、絵の内容を中央に設定しました。

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;
}

ログイン後にコピー

太陽、地球、月のアニメーション

誰もが知っているように、地球は太陽の周りを回転し、月は地球の周りを回転します。。

私たちが描いているのは革命なので、太陽を直接描いて影とハイライトを追加するだけで、月と地球が回転します。

実は一番重要なのはカラーマッチングです(記事の最後におすすめのサイトを載せています) 長い間カラーマッチングを試した結果、最終的に太陽、地球を3色のグラデーションで表現することができました。そして月。

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

ログイン後にコピー

CSS は誰にとっても難しいものではありません。ちょっと見てみてください。

トラックはボーダーを使用し、銀色のラインを回転軌道として使用します。

アニメーションは独自のアニメーションを使用しており、毎回 1 円回転します。

.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);
}

ログイン後にコピー

まとめ

イベントに参加するのは簡単ではありませんが、それでもフロントエンドはとても楽しいです。

色を見つけることができるいくつかの Web サイトをお勧めします: