Nêu cách tạo ảnh động biểu tượng chờ sau khi đã tạo được hình tròn bằng các nét

Trâm Bảo Hỏi từ APP VIETJACK

đã hỏi trong Lớp 11 Tin học

· 19:49 03/05/2025

Trả Lời (+5 điểm)

Hỏi chi tiết

Quảng cáo

2 câu trả lời 175

Sang Phạm

7 tháng trước

Bước 1: Tạo cấu trúc HTML
Đầu tiên, bạn tạo một div có class là "loader" để chứa hình tròn chờ:

html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Biểu tượng Chờ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="loader"></div>
</body>
</html>

Bước 2: Tạo hình tròn và hiệu ứng quay với CSS
Trong file CSS, bạn tạo các kiểu dáng cho vòng tròn, sau đó thêm hiệu ứng quay cho hình tròn để tạo hiệu ứng chờ.

css
CopyEdit
/* Căn chỉnh hình tròn vào giữa trang */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}

/* Kiểu dáng cho biểu tượng chờ */
.loader {
border: 8px solid #f3f3f3; /* Màu nền */
border-top: 8px solid #3498db; /* Màu sắc cho phần vẽ xoay */
border-radius: 50%; /* Tạo hình tròn */
width: 50px; /* Đường kính */
height: 50px; /* Đường kính */
animation: spin 1s linear infinite; /* Hiệu ứng quay vô tận */
}

/* Hiệu ứng quay cho hình tròn */
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

Giải thích:
CSS cho .loader:

border tạo ra một vòng tròn với các đoạn viền (ở đây là viền màu xám cho phần nền và màu xanh dương cho phần vẽ xoay).
border-radius: 50% làm cho hình trở thành hình tròn.
animation: spin 1s linear infinite tạo hiệu ứng quay, với tên spin và thời gian quay là 1 giây, quay liên tục (infinite).
@keyframes spin:

Đây là quy trình xác định cách vòng tròn sẽ quay. Ở thời điểm 0% (bắt đầu), vòng tròn có góc quay 0 độ. Đến 100%, vòng tròn quay hết 360 độ.

...Xem thêm

0 bình luận

Đăng nhập để hỏi chi tiết

ххəwyв

7 tháng trước

1. Chia hình tròn thành nhiều phần → kiểu chia 12 đoạn như đồng hồ.
2. Dùng vòng lặp (for hoặc while) → để chạy animation.
3. Trong vòng lặp:

Xoá màn hình (cleardevice hay clrscr).
Vẽ lại hình tròn, highlight đoạn cần nổi bật (hoặc xoá 1 đoạn cho hiệu ứng xoay).
Dùng delay() để giữ khung hình, tránh chạy quá nhanh.

4. Lặp liên tục → tạo cảm giác xoay/loading.

0 bình luận

Đăng nhập để hỏi chi tiết

Quảng cáo

Bạn muốn hỏi bài tập?