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" 的动画，该动画以 linear 方式运行，每隔 3.2s 重复一次，并处于 infinite 和 alternate 状态。

亲手试试

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- 在这里编写 HTML 代码 -->
        <script src="script.js"></script>
    </body>
</html>

日食动画 | HTML/CSS 项目中的所有课

1HTML

2CSS

moon 类伪元素

自己练习： Web 在线编辑器