純粋な CSS3_html/css_WEB-ITnose を使用して日食アニメーションを実装する

日食の現象は、地球と太陽の間に月が入る、つまり月が太陽を遮ることです。

したがって、日食を作成するには、2 つのオブジェクトが必要です。1 つは月を表し、もう 1 つは太陽を表します。

<div class="eclipse sun"></div><div class="eclipse moon"></div>

日食のプロセス全体を 3 つの段階に分けます: 1. ゆっくりと移動する 2. 短期間の滞在 3. ゆっくりと移動する。

この期間中、相互に関連する 3 つのアニメーションが生成されます。

1 つ目は、月の X 座標 (左または右の属性値) を変更することで、月の位置を移動します (太陽と月の両方が絶対位置に設定されていることに注意してください)。

次に、太陽は徐々にハロー ライト効果を示します。これを実現するにはボックス シャドウを使用します。

これと同期する最後のことは、ページ全体の背景を暗くすることです。これは比較的単純で、本文の背景色を変更するだけです。
残っているのは、上記の段階のキーフレームの CSS ルールを記述することです。

自分で試してみることもできます。

by iefreer