ホームページ > 記事 > ウェブフロントエンド > 中秋節のギフトとして、CSS の太陽、地球、月の革命アニメーション効果を共有してください。
中秋節のギフトとして、CSS の太陽、地球、月の革命アニメーション効果を共有してください。
- 青灯夜游転載
- 2021-09-15 10:31:002391ブラウズ
もうすぐ中秋節です。この記事では、純粋な 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 サイトをお勧めします:
- #パレット | フラット UI カラー 280 色の厳選された色をコピーして貼り付けることができます # マテリアル デザインの色、カラー パレット | マテリアル UI
- #元のアドレス: https :// juejin.cn/post/7006507905050492935
著者: Mancuojをご覧ください。 ！プログラミング関連の知識については、
プログラミング入門
以上が中秋節のギフトとして、CSS の太陽、地球、月の革命アニメーション効果を共有してください。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。