プロジェクト in CSS Skill Tree

CSS を使った地球の公転アニメーションの作成

初級

このプロジェクトでは、CSS アニメーションを使って地球の太陽周りの公転をシミュレートする方法を学びます。このプロジェクトは、CSS アニメーションの概念を理解し、動的で視覚的に魅力的な Web 体験を作成するためにそれらを適用する方法を学ぶのに役立ちます。

CSS

💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください

はじめに

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

👀 プレビュー

地球が太陽の周りを公転するアニメーション

🎯 タスク

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

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

🏆 達成目標

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

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

講師

labby

Labby

Labby is the LabEx teacher.