Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS

Cách xậy dựng một biểu đồ hình bán vành khuyên với CSS

by
Read Time:7 minsLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Mặc dù HTML5 Canvas và SVG có thể là các giải pháp khéo léo hơn để xây dựng các biểu đồ, nhưng trong hướng dẫn này chúng ta sẽ tìm hiểu cách xây dựng biểu đồ hình bán vành khuyên rất riêng của chúng ta bằng CSS thuần tuý.

Để có được một ý tưởng về những gì chúng ta sẽ tạo ra, hãy nhìn vào bản demo trên CodePen dưới đây:

Mã HTML

Chúng ta bắt đầu với một số mã đánh dấu html rất cơ bản; một danh sách không theo thứ tự đơn giản với một thành phần span bên trong mỗi phần tử trong danh sách:

Thêm các style (phong cách) vào danh sách

Với mã HTML đã sẵn sàng, đầu tiên chúng ta áp dụng một số style cơ bản vào danh sách:

Sau đó, chúng ta sẽ gáng cho mỗi cái một phần tử giả ::after::before, và định kiểu chúng:

Chú ý đến các style cho phần tử giả ::before. Điều này tạo cho chúng ta một nữa hình tròn.

pseudo elementspseudo elementspseudo elements
Các phần tử giả

Đến đây, các luật nói trên cho chúng ta kết quả này:

Thêm style vào các phần tử của danh sách

Bây giờ hãy thảo luận về các style của các phần tử trong danh sách.

Định vị trí

Liên quan đến vị trí của các phần tử, chúng ta làm như sau:

  • Đặt chúng ngay bên dưới cha của chúng và
  • cho chúng các style thích hợp để tạo một nữa hình tròn đảo ngược.

Hơn nữa, một vài điều cần chú ý ở đây:

  • Các phần tử trong danh sách được đặt vị trí tuyệt đối, vì vậy chúng ta có thể thiết lập thuộc tính z-index của chúng.
  • Chúng ta sửa đổi giá trị mặc định của thuộc tính transform-origin (ví dụ transform-origin: 50% 50%) của các phần tử trong danh sách. Đặc biệt, chúng ta thiết lập transform-origin: 50% 0. Bằng cách này, khi chúng ta hoạt hình (xoay) các phần tử, thì góc trên ở giữa của chúng sẽ trở thành điểm giữa của phép xoay.

Dưới đây là các style CSS liên quan:

Hãy nhìn những gì chúng ta đã xây dựng cho đến thời điểm này:

các span và phần tử trong danh sách

Hiện tại, chỉ có một phần tử trong danh sách là nhìn thấy được là cái màu xanh lá (có z-index: 4;) những cái khác nằm ở dưới nó.

Các chuyển động

Trước khi chúng ta bao quá các bước để hoạt hình các phần tử trong danh sách của chúng ta, chúng ta hãy lưu ý tỷ lệ phần trăm mong muốn cho mỗi phần tử (ví dụ: bao nhiêu phần mà mỗi cái sẽ bao lấy). Hãy xem xét bảng sau đây:

Ngôn ngữ Phần trăm
CSS 12
HTML 32
PHP 34
Python 22

Tiếp theo, chúng ta tính toán bao nhiêu độ mà chúng ta phải hoạt hình (xoay) mỗi phần tử. Để tìm ra con số chính xác bao nhiêu độ cho mỗi phần tử, chúng ta nhân tỷ lệ phần trăm của nó với 180° (không phải 360° bởi vì chúng ta đang sử dụng một biểu đồ bán vành khuyên):

Ngôn ngữ Phần trăm
Số độ
CSS 12 12/100 * 180 = 21.6
HTML 32
32/100 * 180 = 57.6
PHP 34 34/100 * 180 = 61.2
Python 22 22/100 * 180 = 39.6

Đến thời điểm hiện tại chúng ta đã sẵn sàng thiết lập các hoạt hình. Trước tiên, chúng ta định nghĩa một số style hoạt hình được chia sẻ trên tất cả các phần tử, bằng cách thêm một số luật vào .chart-skills li:

Sau đó, chúng ta định nghĩa các style hoạt hình độc đáo:

Lưu ý rằng chúng ta thêm một độ trễ vào tất cả các phần tử trừ cái đầu tiên. Bằng cách này, chúng ta tạo ra các hoạt hình đẹp một cách tuần tự. Ví dụ, khi hoạt hình của phần tử đầu tiên kết thúc, các phần tử thứ hai xuất hiện, và cứ như vậy.

Bước tiếp theo là xác định các hoạt hình thực sự:

Trước khi tiếp tục, chúng ta sẽ xem ngắn gọn các hoạt hình làm việc như thế nào:

Phần tử đầu tiên đi từ transform: none tới transform: rotate(21.6deg).

Phần tử thứ hai đi từ transform: rotate(21.6deg) (bắt đầu từ vị trí cuối cùng của phần tử đầu tiên) tới transform: rotate(79.2deg) (57.6deg + 21.6deg).

Phần tử thứ ba đi từ transform: rotate(79.2deg) (bắt đầu từ vị trí cuối cùng của phần tử thứ 2) tới transform: rotate(140.4deg) (61.2deg + 79.2deg).

Phần tử thứ tư đi từ transform: rotate(140.4deg) (bắt đầu từ vị trí cuối cùng của phần tử thứ 3) tới transform: rotate(180deg) (140.4deg + 39.6deg).

Ẩn!

Cuối cùng nhưng không kém phần quan trọng, để ẩn nửa dưới của biểu đồ, chúng ta phải thêm các luật sau:

Thuộc tính overflow: hidden đảm bảo rằng chỉ có nửa trên hình tròn (một cái được tạo với phần tử giả ::before) là nhìn thấy được. Tuỳ ý bạn có thể loại loại bỏ thuộc tính đó nếu bạn muốn thử vị trí ban đầu của các phần tử trong danh sách.

Các thuộc tính transform-style: preserve-3d và backface-visibility: hidden ngăn chặn hiệu ứng bị lắc có thể xảy ra trong các trình duyệt khác nhau trong quá trình hoạt hình. Nếu vấn đề này vẫn còn tồn tại trong trình duyệt của bạn, bạn có thể muốn thử các giải pháp này.

Biểu đồ đã gần như sẵn sàng! Tất cả những gì còn lại là trang trí các nhãn biểu đồ, chúng ta sẽ làm trong phần tiếp theo.

Dưới đây là demo trên CodePen biểu diễn diện mạo hiện tại của biểu đồ:

Thêm các style cho các nhãn

Trong phần này, chúng ta sẽ style các nhãn của biểu đồ.

Định vị trí

Liên quan đến vị trí của chúng, chúng ta làm như sau:

  • Cho chúng position: absolute và sử dụng các thuộc tính topleft để thiết lập vị trí mong muốn của chúng.
  • Sử dụng các giá trị âm để xoay chúng. Tất nhiên, đây không phải là các giá trị ngẫu nhiên. Trong thực tế, những cái này được trích xuất từ frame cuối cùng của phần tử cha. Ví dụ, frame cuối cùng của phần tử thứ hai gồm có transform: rotate(79.2deg) và do đó nhãn liên quan của nó sẽ có transform: rotate(-79.2deg).

Dưới đây là những style CSS tương ứng:

Các hoạt hình

Bây giờ chúng ta đã định vị trí các nhãn, đến lúc để hoạt hình chúng. Hai điều cần phải chú ý ở đây:

  • Mặc định, tất cả các nhãn ẩn và bắt đầu có thể nhìn thấy khi phần tử cha của chúng đang được hoạt hình.
  • Tương tự như các phần tử cha, chúng ta sử dụng thuộc tính animation-delay để tạo ra các hoạt hình theo tuần tự. Ngoài ra, chúng ta thêm thuộc tính backface-visibility: hidden để đảm bảo rằng không có bất kỳ hiệu ứng nào bị lắc do quá trình hoạt hình.

Các luật CSS làm việc với hoạt hình của các nhãn biểu đồ được chỉ ra bên dưới:

Dưới đây là biểu đồ cuối cùng:

Trình duyệt hỗ trợ & các vấn đề

Nhìn chung, bản demo hoạt động tốt trong tất cả các trình duyệt. Tôi chỉ muốn thảo luận về hai vấn đề nhỏ liên quan đến thuộc tính border-radius.

Đầu tiên, nếu chúng ta đã áp dụng các màu sắc khác nhau cho các phần tử của chúng ta, thì biểu đồ có thể giống như thế này:

Chú ý ví dụ các góc trên và dưới cùng của phần tử thứ ba. Có hai đường màu đỏ tạo ra từ màu viền của phần tử thứ tư. Chúng ta có thể nhìn thấy những đường đó vì phần tử thứ tư có một border sẫm màu hơn so với cái thứ ba. Mặc dù đây là một vấn đề nhỏ, tốt hơn là lưu ý nó để chọn các màu sắc phù hợp cho các biểu đồ của chính bạn.

Thứ hai, trong Safari các biểu đồ xuất hiện như sau:

Nhìn vào những khoảng trống nhỏ xuất hiện ở các phần tử thứ hai và thứ ba. Nếu bạn biết bất kỳ thứ gì đối với vấn đề này, hãy cho chúng tôi biết ở trong bình luận bên dưới!

Kết luận

Trong bài hướng dẫn này, chúng ta đã đi qua tiến trình tạo một biểu đồ hình bán vành khuyên bằng CSS thuần tuý. Một lần nữa, như đã đề cập trong phần giới thiệu, có một số giải pháp triển vọng mạnh mẽ hơn (ví dụ HTML5 Canvas và SVG) ở ngoài kia để tạo những thứ như thế này. Tuy nhiên, nếu bạn muốn xây dựng thứ gì đó đơn giản và nhẹ nhàng, và tận hưởng một thách thức nho nhỏ, thì CSS là một lựa chọn!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.