Con xoay hay còn gọi là spinner là một hiệu ứng không thể thiếu trong web hiện đại. Gần như bất cứ trang web nào cũng sử dụng hiệu ứng này, nhất là sau các thao tác đăng nhập hoặc đăng ký. Mục đích nhằm mang lại sự tương tác giữa web với người dùng tốt hơn. Trong bài viết này, Kiso sẽ hướng dẫn các bạn tạo ra con xoay chờ như hình bên dưới. Nào chúng ta cùng bắt đầu nhé.
1. Phần HTML
Để tạo một spinner đẹp thì phải có bố cục đẹp, việc dàn trang tốt sẽ thu hút nhiều người dùng hơn.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Spiner</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="spiner.css">
<script src="main.js"></script>
</head>
<body>
<div>
<div class="spiner"></div>
<div class="bar">
<span class="dot1"></span>
<span class="dot2"></span>
<span class="dot3"></span>
</div>
</div>
</body>
</html>Cách bố cục cũng khá đơn giản, chỉ gồm thẻ div và thẻ span và lồng nhau không quá nhiều lớp.
Một lưu ý nhỏ là ở đây chúng ta dùng thẻ span để biễu diễn cho dấm chấm động, chúng ta có thể thay thẻ span bằng thẻ khác như thẻ div. Kiso sẽ giải thích rõ ở phần sau.
Bài viết này được đăng tại [kiso.vn]
2. Phần CSS
Trước hãy cũng lướt qua toàn bộ code CSS.
body > div {
height: 500px;
width: 100%;
background-color: #002266;
text-align: center;
}
.spiner {
margin-top: 50px;
width: 100px;
height: 100px;
display: inline-block;
border: 10px solid white;
border-radius: 50%;
border-top: 10px solid #ff8000;
animation: spiner 1.5s linear infinite;
}
.bar {
margin-top: 50px;
display: inline-block;
width: 100%;
}
.bar > span {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #ff8000;
display: inline-block;
animation: dot 1.5s ease-in-out infinite both;
}
.bar span.dot1 {
animation-delay: -0.3s;
}
.bar span.dot2 {
animation-delay: -0.15s;
}
.bar span.dot3 {
animation-delay: 0s;
}
@keyframes spiner {
to {
transform: rotate(360deg);
}
}
@keyframes dot {
0%, 80%, 100% {
transform: scale(0);
}
40% {
transform: scale(1);
}
}Sau đây, Kiso sẽ hướng dẫn và giải thích từng bước thực hiện.
Bước 1: định dạng thẻ div chính
body > div {
height: 500px;
width: 100%;
background-color: #002266;
text-align: center;
}Ở đây, ta chú ý đến thuộc tính text-align: center việc gán giá trị này sẽ ảnh hưởng đến cách gán thuộc tính display của các thẻ con.
Bước 2: định dạng cho class spiner và bar
.spiner {
margin-top: 50px;
width: 100px;
height: 100px;
display: inline-block;
border: 10px solid white;
border-radius: 50%;
border-top: 10px solid #ff8000;
animation: spiner 1.5s linear infinite;
}
.bar {
margin-top: 50px;
display: inline-block;
width: 100%;
}Có một lưu ý là thuộc tính display: inline-block như kiso đề cập ở bước 1. Do thẻ div cha canh nội dung bằng text-align: center nên để tác dụng lên các thẻ con thì phải thiết lập thuộc tính display: inline-block cho các thẻ con tương ứng.
Bước 3: định dạng thẻ span
.bar > span {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #ff8000;
display: inline-block;
animation: dot 1.5s ease-in-out infinite both;
}
.bar span.dot1 {
animation-delay: -0.3s;
}
.bar span.dot2 {
animation-delay: -0.15s;
}
.bar span.dot3 {
animation-delay: 0s;
}Thẻ span là phần tạo nên hiện ứng dấu chấm động. Nên điều chắc chắn là cả 3 thẻ span đều dùng chung một loại hiệu ứng. Vấn đề là phải canh chính thời gian trễ sao cho hợp lý để hiệu ứng được mượt và tốc độ vừa phải.
Bước 4: định dạng hiệu ứng
@keyframes spiner {
to {
transform: rotate(360deg);
}
}
@keyframes dot {
0%, 80%, 100% {
transform: scale(0);
}
40% {
transform: scale(1);
}
}Sẽ có 2 loại hiệu ứng được tạo ra, spiner là cho vòng xoay, dot là dùng cho dấu chấm động.
Một lưu ý là việc thiết lập các giá trị phần trăm trong hiệu ứng dot có liên qua mật thiết với việc thiết lập thời gian trễ trong từng thẻ span.
3. Lời Kết
Qua bài viết này, kiso hy vọng giúp các bạn thêm kiến thức để tạo ra hiệu ứng đẹp. Đặc biệt hơn là làm cho trang web trở nên thân thiện hơn với người dùng.
Cảm ơn các bạn. Hẹn gặp lại trong các bài viết sau.
Danh sách file tải về
| Tên file tải về | Pass giải nén |
|---|---|
| Tải mã nguồn bài viết | kiso.vn hoặc gameportable.net |
Bài viết liên quan
[CSF-2] Một số thiết lập CSF, LFD
Hôm nay mình sẽ thực hiện một số thiết lập trên CSF Mở file config để sửa đổi một số tính năng dưới /etc/csf/csf.conf Nội dung chính1. Phần HTML2. Phần CSS3. Lời Kết1. Bảo vệ...
[CSF-1] Tăng bảo mật Server với ConfigServer Firewall (CSF)
Nội dung chính1. Phần HTML2. Phần CSS3. Lời Kết1. Khái niệm CSF: CSF (ConfigServer & Firewall) là một bộ ứng dụng hoạt động trên Linux như một firewall được phát hành miễn phí để tăng...
Sử dụng SSH Key với Gitlab và Github
Bài viết này mình sẽ hướng dẫn các bạn tạo ssh key cho Gitlab và Github SSH là gì? Secure Socket Shell là một giao thức mạng dùng để thiết lập kết nối mạng một...
Directory traversal vulnerabilities (phần 4)
Nội dung chính1. Phần HTML2. Phần CSS3. Lời KếtV. Phân tích và khai thác các lỗ hổng Directory traversal (tiếp) 5. Bypass lỗ hổng khi trang web sử dụng đường dẫn đầy đủ Xét đoạn...
Directory traversal vulnerabilities (phần 3)
Nội dung chính1. Phần HTML2. Phần CSS3. Lời KếtV. Phân tích và khai thác các lỗ hổng Directory traversal 1. Lỗ hổng xảy ra khi sử dụng các hàm đọc file và tin tưởng đầu...
Directory traversal vulnerabilities (phần 2)
Nội dung chính1. Phần HTML2. Phần CSS3. Lời KếtIII. Vì sao lỗ hổng Directory traversal xuất hiện? Với mỗi ngôn ngữ lập trình khác nhau, điểm xuất hiện các lỗ hổng Directory traversal cũng khác...