Hoạt ảnh mờ dần Trong CSS
Một phương pháp khác là sử dụng API Web Animations của JS kết hợp với CSS Show Ví dụ
Phương pháp 1. Sử dụng thuộc tính hoạt hình CSS. Hoạt ảnh CSS được xác định bằng 2 khung hình chính. Một cái có độ mờ được đặt thành 0, cái còn lại có độ mờ được đặt thành 1. Khi loại hoạt ảnh được đặt thành dễ dàng, hoạt ảnh sẽ mờ dần trong trang. Thuộc tính này được áp dụng cho thẻ body. Bất cứ khi nào trang tải, hoạt ảnh này sẽ phát và trang sẽ xuất hiện mờ dần trong. Thời gian mờ dần có thể được đặt trong thuộc tính hoạt ảnh cú pháp
0 1 2 3
1
1 1Ví dụ
_______64____65____66
0
02 3
1
02 9
1
23____66
27 animation-iteration-count: 1; 6 29 30animation: fadeInAnimation ease 3s 6
27animation: fadeInAnimation ease 3s 6
23____66
đầu ra Phương pháp 2. Sử dụng thuộc tính chuyển đổi và đặt độ mờ thành 1 khi phần thân được tải. Trong phương pháp này, phần thân có thể được đặt thành độ mờ 0 ban đầu và thuộc tính chuyển đổi được sử dụng để tạo hiệu ứng động cho thuộc tính này bất cứ khi nào nó được thay đổi. Khi trang được tải, độ mờ được đặt thành 1 bằng cách sử dụng sự kiện tải. Do thuộc tính chuyển đổi, việc thay đổi độ mờ bây giờ sẽ xuất hiện mờ dần trong trang. Thời gian mờ dần có thể được đặt trong thuộc tính chuyển tiếp cú pháp
_______535 1Ví dụ
_______64____65____66 2
2
2
23 80 29 82animation: fadeInAnimation ease 3s 6
27 animation-iteration-count: 1; 6 29 30animation: fadeInAnimation ease 3s 6
27animation: fadeInAnimation ease 3s 6
23____66 2
đầu ra CSS là nền tảng của các trang web, được sử dụng để phát triển trang web bằng cách tạo kiểu trang web và ứng dụng web. Bạn có thể học CSS từ đầu bằng cách làm theo Hướng dẫn CSS và Ví dụ về CSS này |