Video: [Web tĩnh] Bài 3: Các thuộc tính trong CSS 2025
Nói về các tính năng mới mạnh mẽ trong các bảng kiểu xếp tầng (CSS): Bằng cách ghép cặp: hover pseudo- class với thuộc tính chuyển tiếp CSS3, bạn có thể thêm các tính năng tương tác slick vào các đối tượng mà không cần sử dụng Flash, JavaScript hoặc jQuery!
Tài sản chuyển tiếp thực sự có bốn cài đặt, cần được viết bằng CSS theo thứ tự sau: thuộc tính, thời gian, chức năng thời gian, sự chậm trễ.
Danh sách sau đây mô tả các thiết lập:transition-property: Xác định thuộc tính CSS nào sẽ thay đổi, chẳng hạn như chiều rộng hoặc chiều rộng, như trong transition-property: width;.
-
Thời lượng chuyển đổi: Đặt giá trị tính bằng giây để quá trình chuyển đổi hoàn tất, như trong thời lượng chuyển đổi: 5 giây;.
-
chuyển đổi-thời gian-chức năng: Chỉ định các đường cong tốc độ của hiệu ứng. Các giá trị có thể được đặt thành tuyến tính, dễ dàng, dễ dàng, thoải mái, dễ dàng ra vào, hoặc không gian khối (n
-
, n , n >, n ), như trong ví dụ này: transition-timing-function: linear;, tương đương với khối lượng không-khối (0, 0, 1, 1). delay-transition: Xác định số giây sẽ trôi qua trước khi hiệu ứng bắt đầu, như trong delay-delay: 2s;. Trong ví dụ mã sau đây, sau một khoảng trễ 2 giây, hộp màu da cam sẽ thay đổi trơn tru trong 5 giây từ 100px đến 500px rộng khi khách truy cập di chuột qua vùng chứa:
div {width: 100px; chiều cao: 100px; màu nền: # F90; chuyển tiếp: chiều rộng 5s 2s tuyến tính; -moz-chuyển tiếp: chiều rộng 5s tuyến 2s; / * Firefox 4 * / -webkit-chuyển tiếp: chiều rộng 5s tuyến 2s; / * Safari và Chrome * / -o-chuyển tiếp: chiều rộng 5s 2s tuyến tính; / * Opera * /} div: hover {width: 500px;}
