Làm thế nào để sử dụng CSS3 Hình động - núm vú

Các hành vi chuyển đổi khá cool, nhưng CSS3 hứa hẹn một hình thức hoạt hình thậm chí thú vị hơn được gọi là cơ chế hoạt hình (chờ đợi cho nó). Đây là hình ảnh động của một ô di chuyển quanh màn hình.

Đây là chiến lược cơ bản để xây dựng một hình ảnh động CSS:

1. Tạo tập hợp các khung hình chính.

   Hình động được dựa trên khái niệm về khung hình chính. Mỗi khung hình chính xác định trạng thái của một đối tượng, và trình duyệt cố gắng chuyển đổi suốt giữa các khung hình chính.

2. Cung cấp một tỷ lệ phần trăm cho mỗi khung hình chính.

   Khung hình chính bắt đầu bằng một phần trăm, cho biết nơi nào trong hoạt ảnh, khung hình chính sẽ xảy ra. Khung hình chính đầu tiên phải là 0% (phần đầu của hình ảnh động) và cuối cùng phải là 100% (kết thúc của hình hoạt hình). Bạn có thể chỉ ra bao nhiêu keyframes trung gian như bạn muốn.

3. Thêm một bảng kiểu nhỏ cho mỗi khung hình chính.

   Đặt bất kỳ kiểu bạn muốn sửa đổi trong một tờ kiểu dáng nhỏ. Tại vị trí được chỉ định trong dòng thời gian, một phần tử sau hoạt ảnh này sẽ hiển thị hành vi kiểu đã cho. Bạn có thể đặt bất kỳ thông tin kiểu nào bạn muốn ở đây.

4. Áp dụng hình ảnh động cho các phần tử của bạn.

   Quy tắc hoạt ảnh cho phép bạn áp dụng một khung hình chính cho một phần tử. Bạn có thể sử dụng lại các keyframes trong nhiều yếu tố khác nhau nếu bạn muốn.

5. Sửa đổi hình ảnh động.

   Bạn có thể áp dụng nhiều đặc điểm giống với hoạt ảnh khi bạn thực hiện chuyển đổi. Có một số thông số, nhưng các yếu tố được sử dụng phổ biến nhất là khung chính, thời gian và lặp lại.

Hãy xem mã cho hoạt hình. html để xem nó tất cả trong hành động:

hình ảnh động. html @keyframes anim {0% {left: 0px; top: 0px;} 25% {left: 100px; top: 0px;} 50% {left: 100px; trên cùng: 100px;} 75% {trái: 0px; trên cùng: 100px;} 100% {trái: 0px; top: 0px;}} @ -webkit-keyframe anim {0% {left: 0px; top: 0px;} 25% {left: 100px; top: 0px;} 50% {left: 100px; trên cùng: 100px;} 75% {trái: 0px; trên cùng: 100px;} 100% {trái: 0px; top: 0px;}} @ -moz-keyframes anim {0% {left: 0px; top: 0px;} 25% {left: 100px; top: 0px;} 50% {left: 100px; trên cùng: 100px;} 75% {trái: 0px; đầu trang: 100px;} 100% {trái: 0px; top: 0px;}} @ -o-keyframes anim {0% {left: 0px; top: 0px;} 25% {left: 100px; top: 0px;} 50% {left: 100px; trên cùng: 100px;} 75% {trái: 0px; trên cùng: 100px;} 100% {trái: 0px; top: 0px;}} #box {position: absolute; đường viền: 1px màu đen; -bộ phim hoạt hình: anim 5s vô hạn tuyến tính; -moz-hình ảnh động: anim 5s vô hạn tuyến tính; -o-animation: anim 5s vô hạn tuyến tính; Di chuyển hộp

Có một số điều cần lưu ý về ví dụ này:

• Tạo một bộ keyframe được gọi là Quy tắc @keyframes được sử dụng để tạo ra một trang- cấp nguồn có thể được sử dụng trong phần còn lại của CSS.Trong trường hợp này, nó được sử dụng để tạo ra một bộ khung hình chính.

• Xây dựng phiên bản dành cho trình duyệt cụ thể: Thật không may, cơ chế hoạt ảnh vẫn yêu cầu tiền tố cụ thể cho trình duyệt. Thông thường dễ nhất là nhắm mục tiêu một trình duyệt và sau đó sao chép cho các trình duyệt khác khi hành vi cơ bản đang hoạt động.

• Ví dụ này di chuyển một phần tử trong một hình vuông: Ví dụ cụ thể này, div sẽ di chuyển theo hình vuông. Khi bạn nhìn vào các khung hình chính, bạn sẽ thấy rằng một thay đổi đơn giản đối với vị trí trái và vị trí trên cùng của div được thực hiện trong suốt thời gian.

• Bắt đầu và kết thúc giống nhau: Nếu bạn định chạy ảnh liên tục này, bạn muốn điểm bắt đầu và kết thúc giống nhau.

• Áp dụng khung hình chính anim thành phần tử: Áp dụng khung hình ảnh khung hình ảnh động bằng cách sử dụng quy tắc hoạt ảnh.

• Cho biết độ dài của hình ảnh động: Các hoạt ảnh liên quan đến thay đổi theo thời gian, do đó, thẻ hoạt ảnh cũng yêu cầu một khoảng thời gian, được đo bằng giây hoặc giây mili giây.

• Xác định nới lỏng: Giảm bớt là cách hoạt hình hoạt động ở đầu và cuối của một phân đoạn hoạt ảnh. Quy tắc tuyến tính được sử dụng ở đây giữ hoạt ảnh ở tốc độ không đổi. Bạn cũng có thể sử dụng (các hành vi mặc định) dễ dàng-in-out để làm cho các yếu tố di chuyển ở một tỷ lệ khác nhau.

• Xác định số lần lặp lại: Bạn có thể chỉ định một số lần lặp lại hoạt ảnh. Nếu bạn để lại phần này, hoạt ảnh sẽ xảy ra chỉ một lần khi trang đầu tiên tải. Bạn có thể chỉ định vô hạn để làm cho các hình ảnh động lặp lại miễn là trang là trong bộ nhớ.

Lưu ý có nhiều tham số khác bạn có thể đặt, chẳng hạn như nới lỏng và trì hoãn. Những điều này có thể được thiết lập thông qua các quy tắc hoạt hình hoặc với các quy tắc cá nhân. Bây giờ, bạn có thể giữ các hoạt ảnh của bạn càng đơn giản càng tốt, ít nhất là cho đến khi các trình duyệt có thể quản lý hình ảnh động mà không có tiền tố của nhà cung cấp.