moonクラスの疑似要素
Coddyの「日食アニメーション | HTML/CSS プロジェクト」コースのレッスン 8/10。
チャレンジ
簡単CSSファイルで、moonクラスをターゲットにし、::before疑似要素を使用します。
- この要素の
contentを""（空の文字列）に設定します。 background-colorをrgba(0, 0, 0, 0)に設定します。border-radiusを50%に設定します。z-indexを-1に設定します。widthとheightを100%に設定します。positionをabsoluteに設定し、displayをblockに設定します。"eclipse-animation"という名前のアニメーションを追加します。これは3.2sごとに、linear、infinite、およびalternateの状態で実行されるようにします。
自分で試してみよう
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Write HTML code here -->
<script src="script.js"></script>
</body>
</html>