Bài viết này trình bày quá trình thêm hoạt ảnh và chuyển tiếp nhiều bước.
Làm cách nào để sử dụng Hoạt ảnh và chuyển tiếp nhiều bước?
Để tạo hoạt ảnh nhiều bước, một loạt khung hình chính được tạo. Nó chỉ định một loạt các thay đổi sẽ được áp dụng cho phần tử HTML đã chọn. Mỗi khung hình chính đại diện cho một trạng thái khác nhau của hoạt ảnh và trình duyệt sẽ chuyển đổi phần tử giữa các trạng thái này một cách trơn tru. Trong khi chuyển tiếp, hãy chỉ định sự thay đổi suôn sẻ của các thuộc tính CSS trong một khoảng thời gian xác định bởi các tương tác của người dùng hoặc thay đổi trạng thái.
Hãy để chúng tôi đi qua một ví dụ thực tế để hiểu rõ hơn:
Ví dụ 1: Áp dụng Hoạt hình Nhiều Bước
Trong ví dụ này, một hoạt ảnh nhiều bước sẽ áp dụng cho phần tử HTML đã chọn. Ghé thăm cuộc biểu tình dưới đây:
< phong cách >
.animationVí dụ {
chiều rộng: 130px;
chiều cao: 130px;
màu nền: rừng xanh;
vị trí: tương đối;
hoạt hình: moveAnimate 4s dễ dàng vô hạn;
}
< / phong cách >
< thân hình >
< div lớp học = 'ví dụ hoạt hình' >< / div >
< / thân hình >
Trong đoạn mã trên:
- Đầu tiên, lớp có tên là “ hoạt hìnhVí dụ ” được chọn bên trong “
' nhãn. - Tiếp theo, các giá trị của “ 130px ” được gán cho “ chiều cao ' Và ' chiều rộng ' của cải.
- Ngoài ra, hãy đặt “ rừng xanh ' Và ' liên quan đến ” như một giá trị cho “ màu nền ' Và ' chức vụ ” thuộc tính để tăng cường trực quan hóa.
- Sau đó, sử dụng “ hoạt hình ” thuộc tính và đặt nó bằng “ moveAnimate 4s vô cùng dễ dàng ” để áp dụng hình ảnh động.
- Giá trị bao gồm bốn phần, phần đầu tiên là hoạt ảnh tên tùy chỉnh, phần thứ hai là khoảng thời gian để hoàn thành, phần thứ ba là loại hoạt ảnh và phần thứ tư là giới hạn số lần hoạt ảnh này sẽ được áp dụng.
- Cuối cùng, hãy tạo một phần tử HTML và gán “ hoạt hìnhVí dụ ” đẳng cấp cho nó.
Bây giờ, hãy sử dụng “ khung hình chính ” quy tắc để xác định tùy chỉnh “ di chuyểnAnimate ” hoạt hình:
@ di chuyển các khung hình chính {0 % {
bên trái: 0 ;
màu nền: xanh dương;
}
năm mươi % {
trái: 200px;
màu nền: rừng xanh;
chuyển đổi: xoay ( 180 độ ) ;
}
100 % {
bên trái: 0 ;
màu nền: xanh dương;
}
}
Trong khối mã trên:
- Đầu tiên ' @keyframes ” khối được tạo cùng với tên của hoạt ảnh tùy chỉnh sẽ được xác định.
- Tiếp theo, tạo một khối có tên “ 0% ” áp dụng các kiểu CSS khi bắt đầu hoạt ảnh. Và sử dụng “ màu nền ' Và ' bên trái ” Thuộc tính CSS.
- Bây giờ, hãy tạo một khối có tên và “ năm mươi% ” để tạo kiểu ở giữa hoạt ảnh. Nó cung cấp các giá trị của “ 200px ”, “ rừng xanh ' Và ' xoay (180 độ) ” vào thuộc tính “left”, “background-color” và “transform”. Điều này cho phép phần tử được chọn xoay trái 200px.
Sau khi biên dịch khối mã trên:
Kết quả hiển thị hoạt ảnh nhiều bước đã được áp dụng cho phần tử HTML đã chọn.
Ví dụ 2: Áp dụng chuyển đổi nhiều bước
Để áp dụng quá trình chuyển đổi nhiều bước, bộ chọn CSS có thể được sử dụng cùng với “ chuyển tiếp ' tài sản. Truy cập mã dưới đây:
.phai màu {
độ mờ: 1;
quá trình chuyển đổi: độ mờ 1s;
}
.fade:hover {
độ mờ: 0;
}
<
/ phong cách>
<
cơ thể>
< P lớp học = 'phai màu' > Di chuột qua tôi để xem quá trình chuyển đổi. < / P >
< / thân hình >
Giải thích về đoạn mã trên:
- Đầu tiên, tùy chỉnh “ phai màu ” lớp được chọn và giá trị 1 được cung cấp cho “ độ mờ đục ' tài sản. Ngoài ra, hãy đặt giá trị của “ độ mờ 1s ” đến “ chuyển tiếp ” Thuộc tính CSS. Điều này đặt hoặc loại bỏ độ mờ trong khoảng thời gian là “ 1 giây ”.
- Tiếp theo, phần “ :bay lượn ” bộ chọn được gán cho “ phai màu ' lớp học. Trong đó, giá trị của “ 0 ” được đặt thành thuộc tính độ mờ.
- Cuối cùng, phần tử HTML được tạo bên trong “ thẻ ” và lớp của “ phai màu ” được đính kèm với nó.
Sau khi kết thúc giai đoạn biên dịch, trang web xuất hiện như sau:
GIF hiển thị rằng quá trình chuyển đổi mờ dần tùy chỉnh đã được áp dụng cho thành phần HTML đã chọn.
Phần kết luận
Hoạt hình và chuyển tiếp gồm nhiều bước mang lại sức sống cho các trang web HTML bằng cách thêm các hiệu ứng chuyển động và hình ảnh. Đối với hoạt hình, nút “ khung hình chính ” được sử dụng cùng với phần trăm thời lượng như “ 0% ” là bắt đầu,” năm mươi% ” là giữa, và “ 100% ” là thời lượng hoạt hình kết thúc. Đối với quá trình chuyển đổi, bộ chọn CSS có thể được sử dụng cùng với “ chuyển tiếp ' lớp học. Bài viết này đã chứng minh quá trình sử dụng hoạt ảnh và chuyển tiếp nhiều bước.