Bài viết này sẽ cung cấp:
- Phương pháp 1: Hiệu ứng mờ dần Sử dụng Thuộc tính hoạt hình CSS
- Phương pháp 2: Hiệu ứng mờ dần Sử dụng Thuộc tính chuyển đổi CSS
Phương pháp 1: Hiệu ứng mờ dần bằng thuộc tính CSS “animation”
Để thiết kế một trang HTML đơn giản, hãy thêm phần tử sau vào đó:
- thêm “ ” phần tử cùng với phần tử “ Phong cách ' thuộc tính. Thuộc tính “kiểu” chứa các thuộc tính tạo kiểu của phần tử.
- Áp dụng ' màu ” trong thuộc tính kiểu để xác định màu văn bản của phần tử.
- Sau đó, sử dụng “ ” để thêm một số văn bản hoặc một đoạn văn đơn giản.
Dưới đây là mã HTML:
< h2 Phong cách = 'màu: rgb(84, 8, 191)' >
Trang web hướng dẫn Linuxhint
< / h2 >
< P > hiệu ứng mờ dần khi tải trang < / P >
Trang HTML được tạo thành công:
Trong phần CSS, để áp dụng hiệu ứng mờ dần trên trang, hãy chọn “ hoạt hình ” Thuộc tính CSS sẽ được sử dụng trên “ ” phần tử của trang HTML.
Yếu tố “cơ thể” phong cách
cơ thể người {hình ảnh động: fadeInPage dễ dàng 3 giây;
hoạt hình-lặp lại-đếm: một ;
}
“
” được áp dụng với các thuộc tính CSS sau:- “ hoạt hình ” là thuộc tính tốc ký đặt hoạt ảnh bằng cách chỉ định nhiều giá trị. Tại đây, tên hoạt ảnh, chức năng thời gian hoạt ảnh và thời lượng hoạt ảnh được xác định.
- “ hoạt hình-lặp lại-đếm ” xác định số lần hoạt ảnh sẽ lặp lại.
Áp dụng quy tắc “@keyframes” trên “hoạt ảnh”
@keyframes fadeInPage {0 % {
độ mờ đục: 0 ;
}
100 % {
độ mờ đục: một ;
}
}
Để xác định “ @keyframes ” cho hoạt ảnh, hãy đề cập đến tên hoạt ảnh sau từ khóa @keyframes. Sửa đổi hành vi hoạt hình như sau:
- Tại ' 0% ” hoạt hình, “ độ mờ đục ” thuộc tính được gán giá trị 0. Điều đó có nghĩa là khi hoạt ảnh bắt đầu, hình ảnh trong suốt.
- Tại ' 100% ” hoạt ảnh, độ mờ được đặt thành “ một ”, dùng để chỉ một màu đồng nhất.
đầu ra
Hãy chuyển sang phương pháp thứ hai để áp dụng hiệu ứng Làm mờ dần khi tải trang.
Phương pháp 2: Hiệu ứng mờ dần bằng thuộc tính CSS “transition”
Thêm một “ đang tải ” thuộc tính trong “ ' yếu tố. Sự kiện này được kích hoạt khi tải trang. Khi tải, độ mờ của phần tử nội dung được đặt thành “ một ”, liên quan đến một màu đơn sắc:
< cơ thể người đang tải = 'document.body.style.opacity='1'' >Trong ví dụ này, CSS “ chuyển tiếp ” thuộc tính được sử dụng để thêm hiệu ứng mờ dần:
cơ thể người {độ mờ đục: 0 ;
quá trình chuyển đổi: độ mờ 6s;
}
Sau đây là lời giải thích về các thuộc tính nêu trên:
- “ độ mờ đục ” thuộc tính xác định độ trong suốt của các phần tử.
- Sử dụng CSS “ chuyển tiếp ”, thay đổi dần giá trị của các thuộc tính trong một thời gian xác định.
đầu ra
Chúng tôi đã hướng dẫn bạn các phương pháp sử dụng CSS để tạo hiệu ứng mờ dần khi tải trang.
Phần kết luận
Một số thuộc tính CSS có thể được sử dụng để áp dụng hiệu ứng mờ dần trên các phần tử HTML. Cụ thể hơn, “ hoạt hình ”, “ độ mờ đục ', và ' chuyển tiếp ” thuộc tính có thể được sử dụng để chỉ định các hiệu ứng động trên các trang hoặc thành phần. Các hình ảnh động được điều chỉnh bằng cách sử dụng “ @keyframe ' quy tắc. Bài viết này đã giải thích các phương pháp thêm hiệu ứng mờ dần khi tải trang bằng CSS.