Hướng dẫn timeline animation css - dòng thời gian hoạt ảnh css
Timeline đã trở thành một tính năng phổ biến trong nhiều thiết kế web và người dùng thấy chúng rất hấp dẫn. Tuy nhiên, việc thực hiện timeline này không phải là dễ dàng vì khách hàng luôn yêu cầu một cái gì đó độc đáo cho trang web của họ. Show Nhưng bạn không cần phải bắt đầu mọi thứ bằng đầu nếu bạn đã có một nền tảng cơ bản. Vì vậy, trong bài viết này, mình sẽ hướng dẫn các bạn các bước để tạo dòng thời gian ngang có thể tùy chỉnh bằng CSS thuần. Bước 1: Tạo cấu trúc cơ bảnMình sẽ bắt đầu mọi thứ bằng cách tạo cấu trúc cơ bản của timeline. Đầu tiên, mình sẽ thiết kế 1 đường ở giữa và sau đó sắp xếp Ngày và Sự kiện bên trong các container box. Sau đó, mình sẽ kết hợp nhiều container box để tạo thành luồng sự kiện. Bạn sẽ có thể tạo cấu trúc cơ bản như trong sơ đồ bằng cách sử dụng đoạn mã dưới đây.
Bước 2: Điều chỉnh Chiều cao và Chiều rộngBây giờ, mình sẽ tạo một trình bao bọc cho dòng thời gian để sửa chiều cao và chiều rộng của nó. Theo ví dụ dưới đây, trình bao bọc dòng thời gian có chiều cao 300px và nó sẽ chiếm toàn bộ chiều rộng của màn hình. Bằng cách đặt lề: tự động dòng thời gian sẽ được căn giữa theo chiều ngang.
Bước 3: Vẽ đường giữaỞ bước thứ ba, mình sẽ thêm các style vào đường giữa. 0 sẽ chiếm toàn bộ chiều rộng của 1 và nó sẽ có chiều cao là 5px. Nó được đặt ở vị trí chính xác giữa 1 bằng cách đặt 3 và transform: translateY(-50%).
Bước 4: Định vị ngàyBây giờ, hãy xác định vị trí của các ngày trong dòng thời gian! Đầu tiên, mình sẽ chia dòng thời gian thành nhiều phần. Mình đã đặt chiều rộng của các box là 17% để có thể chia dòng thời gian thành sáu phần - ngoài ra, thuộc tính 5 là để sắp xếp các phần tử theo chiều ngang.
Class 8 được đặt ở giữa dòng thời gian bằng cách sử dụng 3 và 2. 3 được đặt thành 100% để tạo ra 1 đường tròn xung quanh ngày. Ngày được đặt bên trong thẻ 4 với văn bản được căn giữa.
gần được rồi Bước 5: Tạo kiểu cho các box eventTiếp theo, mình sẽ tạo kiểu cho các 9 với chiều rộng 180px và màu nền được đặt thành 6. 3 sẽ được đặt thành 5px để có được các góc tròn.box-content được đặt cách -77px từ bên trái của box để căn chỉnh với ngày tháng một cách chính xác. Lề được đặt thành 0 và màu phông chữ thành màu trắng cho các đoạn bên trong box-content;
Mình nghĩ sẽ tốt hơn nếu di chuyển các box sang hai bên của middle-line. Vì vậy, mình đã di chuyển 9 của 9 xuống 65% từ phần trên cùng của phần tử box.Bây giờ mình sẽ thêm 1 hình tam giác ở dưới và trên của 9 bằng cách dùng 1 . 2 và 3 sẽ căn chỉnh nội dung vào chính giữa 9.
Bạn có thể chưa thấy bất kỳ thay đổi nào trong các event box. Nhưng chúng ta gần như ở đó! Mình tô màu đường viền có liên quan và đặt 1 selector cách xa -20px từ trên cùng hoặc dưới cùng của box-content tùy thuộc vào vị trí của nó.
Bingo! Chúng ta đã thiết kế một dòng thời gian ngang từ đầu bằng cách sử dụng CSS thuần. Tóm lược Bài viết này là một hướng dẫn toàn diện và thực hành về cách phát triển dòng thời gian bằng cách sử dụng CSS thuần túy. Mình đã theo một cách tiếp cận theo chiều ngang vì bạn có thể không tìm thấy chúng nhiều trên web. Ngoài các bước trên, chúng ta có thể mang lại nhiều bổ sung hơn cho dòng thời gian, chẳng hạn như cuộn ngang, bằng cách thêm một chút JavaScript. Bạn cũng có thể cố gắng làm cho nó thành responsive, nhưng mình sẽ không khuyên bạn nên làm như vậy vì nó sẽ phá vỡ dòng thời gian. Mình tin rằng bạn sẽ tìm thấy với sự trợ giúp của hướng dẫn này. Hẹn gặp lại các bạn trong một bài viết hay khác! |