日食のアニメーション
Coddyの「日食アニメーション | HTML/CSS プロジェクト」コースのレッスン 9/10。
チャレンジ
簡単CSSファイルで、@keyframesを使用してアニメーションを作成します：
- アニメーションの名前を "eclipse-animation" にします。
0%、50%、100%の3つのキーフレームセレクタを追加します。0% のキーフレームセレクタにCSSスタイルを追加します：
1. box-shadow を
noneに設定します。2. transform を
translate(-30px, 30px) scale(0.9)に設定します。50% のキーフレームセレクタにCSSスタイルを追加します：
1. transform を
translate(0px, 0px) scale(1.02)に設定します。2. box-shadow を
0 0 10px #f9f3f2, 0 0 80px 8px #C7938Bに設定します。3. background-color を
#efdbd8に設定します。100% のキーフレームセレクタにCSSスタイルを追加します：
1. transform を
translate(30px, -30px) scale(0.9)に設定します。2. box-shadow を
noneに設定します。
不明な点がある場合は、ヒントを参照してください。このステップの後、月が動くのが見えるはずです！
もし動かない場合は、ソリューションを確認してください…
自分で試してみよう
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Write HTML code here -->
<script src="script.js"></script>
</body>
</html>