Vị trí:trang chủ > Mã hiệu ứng đặc biệt JS > Hoạt ảnh CSS3

Thiết kế menu vật liệu nút có thể mở rộng CSS3 Material Design

2020-06-25 116Số ô xem
Đây là một hiệu ứng nút menu mở theo phong cách thiết kế material design. Có bảy hiệu ứng khác nhau trong hiệu ứng đặc biệt này. Trong mỗi hiệu ứng, một nhóm các nút menu chính có thể được mở bằng cách nhấp vào nút menu chính. Các hiệu ứng hoạt hình của các menu phụ mở khác nhau là khác nhau. Hiệu ứng đầu tiên là khi bạn nhấp vào nút menu chính, nút menu chính sẽ di chuyển sang bên trái, và nút menu chính sẽ xuất hiện lần lượt cùng với nút menu chính di chuyển. Hiệu ứng thứ hai là sau khi nhấp vào nút menu chính, một lớp mặt nạ hình tròn sẽ xuất hiện, và bốn nút menu phụ sẽ xuất hiện ở các vị trí trên, dưới, trái và phải của lớp mặt nạ hình tròn. Tác dụng thứ ba là sau khi nhấp vào nút menu chính, nút menu phụ sẽ xuất hiện phía trên nút menu chính từ dưới lên trên. Hiệu ứng thứ tư là sau khi nhấp vào nút menu chính, nút menu phụ sẽ trượt ở hai bên của nút menu chính. Tác dụng thứ năm là sau khi nhấp vào nút menu chính, nút menu phụ sẽ bật lên từ vị trí của nút menu chính và lần lượt xuất hiện. Hiệu ứng thứ sáu là sau khi nhấp vào nút menu chính, các nút menu phụ sẽ xuất hiện ở cả hai bên của nút menu chính, sau đó xoay 360 độ xung quanh nút menu chính. Tác dụng thứ bảy là bấm vào nút menu chính, bốn nút menu phụ lần lượt xuất hiện, xung quanh nút menu chính