日食动画

Coddy 日食动画 | HTML/CSS 项目课程的第 9 课，共 10 课。

挑战

简单

在 CSS 文件中，使用 @keyframes 创建动画：

将动画命名为 "eclipse-animation"。
添加三个关键帧选择器：0%、50% 和 100%。
在 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>
        <!-- 在这里编写 HTML 代码 -->
        <script src="script.js"></script>
    </body>
</html>

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

1HTML

2CSS

日食动画

自己练习： Web 在线编辑器