CSS で地球の公転アニメーションを作成する

はじめに

このプロジェクトでは、太陽の周りを地球が公転するアニメーションを CSS で作成する方法を学びます。このプロジェクトを通じて、CSS アニメーションの概念と、それを活用して動的で視覚的に魅力的な Web エクスペリエンスを作り出す方法を理解することができます。

👀 プレビュー

🎯 タスク

このプロジェクトでは、以下のことを学びます。

• .earth-con 要素のアニメーションを設定する方法
• @keyframes を使って orbit アニメーションを作成し、地球が中心の周りを回転するようにする方法

🏆 達成目標

このプロジェクトを完了すると、以下のことができるようになります。

• 太陽の周りを地球が公転する CSS アニメーションを作成する
• CSS アニメーションの概念を理解し、動的で視覚的に魅力的な Web エクスペリエンスを作成するためにそれを適用する
• 複数の CSS プロパティを調整して、目的のアニメーション効果を達成する

プロジェクト構造のセットアップ

まずは実験環境を開きます。ディレクトリ構造は以下の通りです。

├── css
│   └── style.css
└── index.html

ここで：

• index.html はメインページです。
• css/style.css はコードを追加する必要がある CSS ファイルです。

WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。

次に、VM の上部にある「Web 8080」を開き、手動でページを更新すると、ブラウザに以下のような表示がされます。

アニメーションのセットアップ

このステップでは、css/style.css ファイル内の .earth-con 要素にアニメーションを追加する方法を学びます。

1. コードエディタで css/style.css ファイルを開き、コードの末尾までスクロールすると、orbit という @keyframes ルールが既に定義されているのがわかります。この @keyframes ルールはアニメーションシーケンスを定義しています。

2. CSS ファイル内で .earth-con クラスを見つけます。

3. .earth-con クラスの中に、以下の CSS プロパティを追加してアニメーションを定義します。

   animation: orbit 36.5s linear infinite;
   

   • animation-name: orbit
   • animation-duration: 36.5s
   • animation-timing-function: linear
   • animation-iteration-count: infinite

これにより、.earth-con 要素が画面の中心を中心に回転し、太陽の周りを地球が公転するようなアニメーションが実現されます。

4. style.css ファイルを保存します。
5. ブラウザに戻り、ページを更新します。以下のような表示がされます。

まとめ

おめでとうございます！このプロジェクトを完了しました。LabEx でさらに多くの実験を行い、スキルを向上させることができます。