Nếu bạn đã từng sử dụng phần mềm chỉnh sửa video — cho dù đó là Windows Movie Maker hay Adobe Premiere Pro — thì rất có thể bạn đã quen thuộc với hiệu ứng chuyển tiếp video mờ dần và mờ dần. Chúng cực kỳ hiệu quả để tạo cảm giác đẹp và bóng bẩy, và không có lý do gì mà bạn không có được thứ đó trong kho vũ khí của mình khi lập trình ứng dụng web
Với việc phát hành CSS3, giờ đây bạn có thể tạo hoạt ảnh CSS gốc để tạo hoạt ảnh cho các thành phần HTML của mình
Một hoạt ảnh mà bạn có thể tạo bằng CSS là hoạt ảnh mờ dần, trong đó phần tử sẽ từ từ chuyển từ vô hình sang hiển thị
Đây là mã cho hoạt ảnh mờ dần CSS. Tôi sẽ giải thích mã dưới đây
.fade-in:hover {
animation-name: FadeIn;
animation-duration: 3s;
transition-timing-function: linear;
}
@keyframes FadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes FadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes FadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes FadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-ms-keyframes FadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Đầu tiên, một quy tắc CSS được áp dụng cho lớp giả fade-in:hover
để hoạt ảnh sẽ chạy khi người dùng di chuột qua phần tử có lớp
Hoạt ảnh mà chúng tôi muốn tạo là hoạt ảnh mờ dần và có thể tạo hoạt ảnh này bằng cách chuyển dần độ mờ của phần tử từ
Hover on me and see the animation
0 sang
Hover on me and see the animation
1Hoạt ảnh trong CSS được tạo bằng quy tắc
Hover on me and see the animation
2, vì vậy chúng tôi đặt quy tắc bên trong
Hover on me and see the animation
2 như sau
4 Khi hoạt ảnh bắt đầu ởHover on me and see the animation
5, hãy đặtHover on me and see the animation
6 thành 0Hover on me and see the animation
0 Khi hoạt ảnh kết thúc lúcHover on me and see the animation
1, hãy đặtHover on me and see the animation
6 thành mộtHover on me and see the animation
Các quy tắc trên là đủ để tạo hoạt ảnh mờ dần. Tiền tố phía trước các quy tắc khung hình chính ở trên cũng được thêm vào để hỗ trợ các trình duyệt cũ hơn
Tiếp theo, các quy tắc
Hover on me and see the animation
2 được áp dụng cho lớp
Hover on me and see the animation
4 bằng cách sử dụng thuộc tính
Hover on me and see the animation
5Thuộc tính
Hover on me and see the animation
5 chỉ định tên của quy tắc CSS
Hover on me and see the animation
2 mà bạn muốn áp dụng cho phần tử. tThuộc tính
Hover on me and see the animation
8 chỉ định thời lượng của hoạt ảnh tính bằng giây. Trong ví dụ trên, sẽ mất 3 giây để hoạt ảnh chuyển từ
Hover on me and see the animation
5 sang
Hover on me and see the animation
1Thuộc tính cuối cùng fade-in:hover
1 là kiểm soát tốc độ tăng tốc của hiệu ứng hoạt hình. Giá trị fade-in:hover
2 có nghĩa là hoạt ảnh sẽ được thực hiện ở tốc độ không đổi
Bạn có thể đặt các giá trị khác trong fade-in:hover
1, chẳng hạn như
fade-in:hover
4 - hoạt ảnh sẽ tăng tốc vào giữa quá trình chuyển đổi rồi chậm lạifade-in:hover
5 - hoạt hình bắt đầu chậm rồi tăng tốcfade-in:hover
5 - hoạt ảnh bắt đầu nhanh rồi chậm dần cho đến khi kết thúcfade-in:hover
7 - giống như sự dễ dàng nhưng với một giá trị chính xác khác
Nhưng nếu bạn không có bất kỳ sở thích nào, thì fade-in:hover
2 sẽ là một lựa chọn tốt vì hoạt ảnh sẽ có tốc độ chuyển tiếp không đổi
Bạn có thể thêm lớp
Hover on me and see the animation
4 vào bất kỳ phần tử HTML nào, bao gồm văn bản, danh sách, bảng và hình ảnhHãy kiểm tra hoạt ảnh mà chúng tôi đã tạo ở trên trong phần tử
Hover on me and see the animation
00. Tôi sẽ thêm màu nền và phần đệm để làm cho phần tử lớn hơn