Bài đăng này giải thích phương pháp thiết lập quá trình chuyển đổi với sự trợ giúp của CSS “ trưng bày ' Và ' độ mờ đục ' Của cải.
Làm cách nào để chuyển đổi Thuộc tính “hiển thị” và “độ mờ” của CSS?
Để chuyển đổi CSS “ trưng bày ' Và ' độ mờ đục ” thuộc tính, trước tiên, hãy tạo một vùng chứa div với “ Ban đầu, hãy tạo một vùng chứa div với sự trợ giúp của “ Tiếp theo, truy cập vùng chứa div bằng cách sử dụng tên lớp “ vật dụng chính ” và đặt “ trưng bày ' tài sản: Ở đây, giá trị của “ trưng bày ” thuộc tính được đặt là “ khối ” vì chiếm toàn bộ chiều rộng màn hình. Tiếp theo, áp dụng các thuộc tính CSS sau trên vùng chứa div đã truy cập: Trong đoạn mã đã nêu ở trên: đầu ra Bây giờ, hãy truy cập vùng chứa div dọc theo “ :bay lượn ” bộ chọn giả được sử dụng để chọn các phần tử khi chúng ta di chuột qua chúng: Sau đó, đặt “ độ mờ đục ” của phần tử được chọn là “ 1 ” để loại bỏ tính minh bạch. đầu ra Đó là tất cả về cách đặt các thuộc tính 'hiển thị' và 'độ mờ' của CSS chuyển tiếp. Để đặt các thuộc tính 'hiển thị' và 'độ mờ' của quá trình chuyển đổi, trước tiên, hãy tạo một vùng chứa div bằng cách sử dụng phần tử
Bước 1: Tạo Vùng chứa “div”
< lớp div = 'vật dụng chính' > >
Bước 2: Đặt Thuộc tính “hiển thị”
.vật dụng chính {
trưng bày : khối ;
}
Bước 3: Thêm hình nền
chiều cao : 400px ;
chiều rộng : 400px ;
hình nền : url ( hoa-xuan-hoa.jpg ) ;
độ mờ đục : 0,1 ;
chuyển tiếp : độ mờ đục 2s dễ dàng ra vào ;
lề : 30px 50px ;
}
Bước 4: Áp dụng Bộ chọn giả “:hover”
độ mờ đục : 1 ;
}
Phần kết luận