moonクラス

Coddyの「日食アニメーション | HTML/CSS プロジェクト」コースのレッスン 7/10。

チャレンジ

簡単

CSSファイルで、moonクラスをターゲットにします：

moonクラスのwidthとheightを220pxに設定します。
border-radiusを50%に設定します。
moonクラスのpositionをrelativeに設定します。
background-imageをlinear-gradient(30deg, #13223f, #0e1a30)に設定します。

これで月が表示されるはずです！

自分で試してみよう

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>

日食アニメーション | HTML/CSS プロジェクトのすべてのレッスン

1HTML

何を作る？コードのセットアップ月のコンテナ

2CSS

moonクラス