Menu
CoddyTech
Bắt đầu học

Hoạt ảnh nhật thực

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

challenge icon

Thử thách

Dễ

Trong tệp CSS, hãy tạo hoạt ảnh bằng @keyframes:

  1. Đặt tên hoạt ảnh là "eclipse-animation".
  2. Thêm ba bộ chọn keyframe là 0% , 50% và 100%.

  3. Thêm các kiểu CSS vào bộ chọn keyframe 0%:

    1. Đặt box-shadow thành none.

    2. Đặt transform thành translate(-30px, 30px) scale(0.9).

  4. Thêm các kiểu CSS vào bộ chọn keyframe 50%:

    1. Đặt transform thành translate(0px, 0px) scale(1.02).

    2. Đặt box-shadow thành 0 0 10px #f9f3f2, 0 0 80px 8px #C7938B.

    3. Đặt background-color thành #efdbd8.

  5. Thêm các kiểu CSS vào bộ chọn keyframe 100%:

    1. Đặt transform thành translate(30px, -30px) scale(0.9).

    2. Đặt box-shadow thành none.

Nếu chưa chắc chắn, hãy xem gợi ý. Sau bước này, bạn sẽ thấy mặt trăng chuyển động!

Nếu mặt trăng không chuyển động, hãy xem lời giải…

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 codeKhung chứa Mặt TrăngBài học dự án

2CSS

Thẻ toàn cụcBài học dự ánThẻ htmlBài học dự ánThẻ bodyBài học dự ánLớp moonBài học dự ánPhần tử giả của lớp moonBài học dự ánHoạt ảnh nhật thựcBài học dự ánTính thích ứngBài học dự án

Tự luyện tập: Playground Web