Trong loạt bài này chúng ta sẽ đi khám phá việc tạo ra danh sách biểu tượng này chỉ với HTML / CSS, hứa hẹn nhiều điều thú vị mà bạn có thể áp dụng để làm những việc liên quan khác.
1. Dựng HTML cho list các icon trên facebook
Trong video này, chúng tôi sẽ tiến hành khởi tạo thư mục dự án cũng như cấu trúc html cho các biểu tượng danh sách để khớp
Tôi không đặt mã trong này vì bạn muốn viết cho mình là dễ dàng hơn để truy cập hơn bản sao và dán
2. Liên kết hình ảnh tìm kiếm biểu tượng danh sách facebook
Trong video này, chúng tôi sẽ tìm kiếm nguyên liệu thô như biểu tượng hình ảnh và tìm hiểu nó.
03 Tạo một nút giống như facebook
Trong video này, chúng tôi sẽ khởi tạo nút như tệp và xem các hình ảnh CSS sprice
04 Tạo danh sách hộp danh sách facebook
Trong video này chúng tôi sẽ tạo một danh sách hộp của biểu tượng facebook, điểm tựa cho các biểu tượng đóng góp rất quan trọng cho hiện tại ẩn.
05 Tìm danh sách biểu tượng facebook và đơn giản hóa biểu tượng
Trong video này chúng tôi sẽ xác định vị trí biểu tượng của facebook cũng như thuộc tính di chuột cho nó đơn giản.
Trong video này chúng ta sẽ tiếp cận CSS3 cho các hiệu ứng, được sử dụng khác nhau trong các chuyển động thường xuyên trong CSS.
06 Khởi tạo nhãn và căn giữa nó cho mỗi biểu tượng facebook
Một lần nữa, vấn đề là tập trung vào tài liệu, có nhiều cách, đây là một trong số ít cách để được khá ngắn và nhanh đến trung tâm.
07 P2 Đặt biểu tượng facebook của bạn trong CSS SPRITE
Trong video này, chúng tôi học các kỹ thuật CSS Sprite để đặt các biểu tượng cảm xúc facebook vào vị trí.
CSS Sprite là gì? Hãy tưởng tượng bạn có một cái bàn, bạn cắt một lỗ vừa đủ để nhìn thấy dưới bàn qua lỗ.
Phần còn lại là bạn phải kéo bảng với hình ảnh vào lỗ phải.
08 Tìm hiểu về phong trào biểu tượng facebook
Trong video này, chúng tôi sẽ tìm hiểu về sự chuyển động của các biểu tượng thông qua thuộc tính khối-bezier
09 P1 Tốc độ biểu tượng facebook hiện tại chỉ có CSS
Trong video này, chúng tôi đi tới mục tùy chỉnh để biết tốc độ khi biểu tượng hiển thị
TIN LIÊN QUAN:
Video này sẽ chia sẻ với bạn quyền truy cập vào mã nguồn để theo dõi dễ dàng cũng như thuận tiện hơn cho bạn sau.
Chúc các bạn thành công
0 nhận xét:
Đăng nhận xét