Hoạt hình
Giới thiệu: Trang này sẽ đề cập đến các hoạt ảnh trong CSS! Ảnh động trong CSS là gì? Hoạt ảnh là khi một đối tượng thực hiện một chuyển động hoặc thay đổi thuộc tính theo thời gian. Trong CSS, điều này có thể được thực hiện thông qua nhiều thuộc tính khác nhau. Những hoạt ảnh này có thể hữu ích để thêm toàn bộ phạm vi tương tác cho người dùng đang xem trang web của bạn hoặc để có được tình cảm và sự thu hút từ người dùng.
Cấu trúc: hoạt ảnh:{hoạt hình} {thời gian}; -webkit-animation:{animation} {time}; /* Safari và Chrome */ @keyframes {name} { từ {background:red;} đến {background: yellow;} } @-webkit-keyframes {name} /* Safari và Chrome */ { from {background:red; } đến {background:màu vàng;} }
Ví dụ:Thuộc tính hoạt ảnh có thể có: @keyframes – Chỉ định hoạt ảnh. animation – Thuộc tính viết tắt cho tất cả các thuộc tính animation, ngoại trừ thuộc tính animation-play-state. animation-name – Chỉ định tên của hoạt ảnh @keyframes. animation-duration – Chỉ định số giây hoặc mili giây mà hoạt ảnh cần để hoàn thành một chu kỳ. animation-timing-function – Mô tả cách hoạt ảnh sẽ diễn ra trong một chu kỳ trong khoảng thời gian của nó. animation-delay – Chỉ định thời điểm hoạt ảnh sẽ bắt đầu. animation-iteration-count – Chỉ định số lần hoạt ảnh được phát. animation-direction – Chỉ định xem hoạt ảnh có nên phát ngược theo các chu kỳ thay thế hay không. Mặc định là “bình thường”. animation-play-state – Chỉ định xem hoạt ảnh đang chạy hay bị tạm dừng.
Liên kết CSS với phần tử HTML: Để liên kết CSS của bạn với phần tử HTML (văn bản, div, v.v.), bạn cần phải quyết định xem mình muốn sử dụng lớp hay id, bạn cũng sẽ cần một tên duy nhất. Khi bạn đã có những thứ đó, hãy chuyển đến phần tử của bạn trong HTML và thêm…… vào các thuộc tính của phần tử đó nếu bạn chọn một lớp, hoặc…nếu bạn chọn một id. Đảm bảo bạn thay thế ‘myClass’ và/hoặc ‘myID’ bằng tên duy nhất của bạn. Sau đó, trong CSS, bạn sẽ muốn bao bọc các thuộc tính của mình bằng…nếu bạn chọn một lớp học, hoặc…(Bạn có thể xóa dòng bắt đầu bằng // nếu muốn). Đây là một ví dụ…Bằng cách đặt các truy vấn phản hồi ở cuối trang, chúng tôi đảm bảo rằng mọi thuộc tính chúng tôi đã đặt trước các truy vấn đều bị ghi đè.