Phần tử giả của lớp moon

Bài học 8 trên 10 trong khóa học Dự án HTML/CSS: hoạt ảnh nhật thực của Coddy.

Thử thách

Dễ

Trong tệp CSS, nhắm đến lớp moon và dùng phần tử giả ::before,

Đặt nội dung của phần tử này thành "" (chuỗi rỗng).
Đặt màu nền thành rgba(0, 0, 0, 0).
Đặt bán kính đường viền thành 50%.
Đặt chỉ số z thành -1.
Đặt chiều rộng và chiều cao thành 100%.
Đặt vị trí thành absolute và đặt cách hiển thị thành block.
Thêm hoạt ảnh có tên "eclipse-animation", chạy mỗi 3.2s theo trạng thái linear, infinite và alternate .

Tự làm thử

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Viết code HTML ở đây -->
        <script src="script.js"></script>
    </body>
</html>

Tất cả bài học trong Dự án HTML/CSS: hoạt ảnh nhật thực

1HTML

Bạn sẽ tạo gì?Thiết lập code Khung chứa Mặt Trăng

2CSS

Phần tử giả của lớp moon Bài học dự án

Hoạt ảnh nhật thực

Tính thích ứng

Tự luyện tập: Playground Web