Tạo xếp hạng 5 vòng kết nối cố định bằng cách sử dụng CSS/HTML

Question

Tôi đang cố gắng tạo hệ thống xếp hạng 5 vòng kết nối bằng cách sử dụng CSS và HTML (xem hình ảnh bên dưới cho những gì tôi muốn nó), nhưng tôi không chắc chắn làm thế nào để đạt được điều này.

ý tưởng ban đầu của tôi là làm cho 5 vòng tròn và sau đó bằng cách nào đó sử dụng chúng như một mặt nạ cho một màu nền đó là chiều rộng đầy đủ tất cả 5 vòng tròn. Vì vậy, hình ảnh đầu tiên có chiều rộng 90% với màu nền là #4a494a, trong khi hình ảnh thứ hai có chiều rộng 60% và một lần nữa, màu nền là #4a494a.

Các vòng kết nối này được cố định nên không cần phải tương tác để vẽ chúng.

Có ai có ý tưởng nào về cách tôi có thể thực hiện việc này không?

Answer 1

Bạn có thể thực hiện việc này bằng cách sử dụng phần tử giả (.rating:after) được đặt ở trên cùng của div.rating. .rating có một số linear-gradient có background-size xác định số vòng tròn được lấp đầy và trong .rating:after có một số radial-gradient tạo năm vòng tròn hoạt động giống như mặt nạ).

Tôi đã sử dụng hoạt ảnh để hiển thị cách vòng tròn được lấp đầy như số background-size tăng. Bạn có thể đặt yêu cầu background-size bằng cách sử dụng JS (hoặc bất kỳ mã phụ trợ nào tạo phần tử xếp hạng) và sau đó thêm nó qua kiểu nội tuyến vào div.rating.

Sử dụng phương pháp này, ngay cả ở giữa các xếp hạng (hoặc xếp hạng của bất kỳ giá trị nào như 3,65, 2,25, 1,85 vv) có thể được xử lý một cách dễ dàng bằng cách tính toán yêu cầu background-size. Tôi đã thêm một vài mẫu trong bản trình diễn.

.rating { 
 
    position: relative; 
 
    height: 50px; 
 
    width: 250px; 
 
    background: linear-gradient(to right, black, black); 
 
    background-repeat: no-repeat; 
 
    background-position: 0px 0px; 
 
    background-size: 0px 100%; 
 
} 
 
.rating.auto-anim { 
 
    animation: fill-circle 5s ease infinite; 
 
} 
 
.rating:after { 
 
    position: absolute; 
 
    content: ''; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: radial-gradient(20px at center, transparent 7.5px, beige 9px); 
 
    background-position: 0px 0px; 
 
    background-size: 50px 100%; 
 
    border: 1px solid; 
 
} 
 
@keyframes fill-circle { 
 
    to { 
 
    background-size: 100% 100%; 
 
    } 
 
}

<div class='rating auto-anim'></div> 
 
<div class='rating' style="background-size: 50px 100%;"></div>  <!-- rating of 1 --> 
 
<div class='rating' style="background-size: 75px 100%;"></div>  <!-- rating of 1.5 --> 
 
<div class='rating' style="background-size: 121.25px 100%;"></div> <!-- rating of 2.25 --> 
 
<div class='rating' style="background-size: 228.75px 100%;"></div> <!-- rating of 4.75 --> 
 
<div class='rating' style="background-size: 177.25px 100%;"></div> <!-- rating of 3.65 --> 
 
<div class='rating' style="background-size: 80.25px 100%;"></div> <!-- rating of 1.85 --> 
 

 
<!-- 
 

 
Background Size Calculation Logic: Each circle is only 15px wide with 17.5px gap on either side 
 

 
1 rating = 50px (for 1 circle) 
 
1.5 rating = 50px (for 1 circle) + 17.5px (gap before 2nd circle on left) + 7.5px (.5 of 15px circle) 
 
2.25 rating = 100px (for 2 circles) + 17.5px (gap before 3rd circle on left) + 3.75px (.25 of 15px circle) 
 
4.75 rating = 200px (for 4 circles) + 17.5px (gap before 5th circle on left) + 11.25px (.75 of 20px circle) 
 
3.65 rating = 150px (for 3 circles) + 17.5px (gap before 4th circle on left) + 9.75px (.65 of 20px circle) 
 
1.85 rating = 50px (for 1 circle) + 17.5px (gap before 2nd circle on left) + 12.75px (.85 of 20px circle) 
 
-->

Answer 2

Nên có rất nhiều đoạn mã và mã số cho số này here bạn có thể tìm thấy những gì bạn đang tìm kiếm và nếu bạn muốn một chút phong cách, tôi sẽ nói dối bạn kiểm tra this. Từ ví dụ đầu tiên, xếp hạng được kiểm soát theo phần trăm chiều rộng style="width: 68%" trên mỗi div s.

Answer 3

Bạn có thể làm được điều này khá dễ dàng với các yếu tố psuedo: HTML

<ul> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
<li class="half"></li> 
</ul> 

CSS

ul { 
display:block; 
} 

li { 
display:inline-block; 
list-style: none; 
width:20px; 
height:20px; 
border-radius:50%; 
background-color:orange; 
overflow:hidden; 
position:relative; 
} 

li::after { 
    position:absolute; 
    content: ''; 
    background-color:rgba(0,0,0,.5); 
    display:block; 
    width:20px; 
    height:20px; 
    top:0; 
    left:0; 
} 


li.half::after { 
    left:-10px; 
} 

Fiddle https://jsfiddle.net/fz2qo82m/

Bạn dễ dàng điều chỉnh các lớp trên vòng tròn cuối cùng (hoặc vài cuối cùng, bạn có thể thêm một lớp none nếu đánh giá là dưới 4 vòng tròn)

Answer 4

Nếu bạn sử dụng một số css thông minh cùng với một số đầu vào radio bạn có thể đạt được điều này với css và html thuần túy, trong khi thậm chí giữ nó tương tác.Có một cái nhìn tại fiddle tôi thiết lập: https://jsfiddle.net/2rs79wsh/

#ratings { 
 
    font-size: 0; 
 
} 
 
#ratings * { 
 
    float: right; 
 
} 
 
#ratings input { 
 
    display: none; 
 
} 
 
#ratings label { 
 
    width: 20px; 
 
    height: 40px; 
 
    background-color: #ccc; 
 
    display: inline-block; 
 
} 
 
#ratings label:nth-of-type(even) { 
 
    border-top-left-radius: 20px; 
 
    border-bottom-left-radius: 20px; 
 
    margin-left: 10px; 
 
} 
 
#ratings label:nth-of-type(odd) { 
 
    border-top-right-radius: 20px; 
 
    border-bottom-right-radius: 20px; 
 
    margin-right: 10px; 
 
} 
 
#ratings input:checked ~ label { 
 
    background-color: red; 
 
}

<div id="ratings"> 
 
    <input type="radio" id="rating-10" name="rating" value="10"> 
 
    <label for="rating-10"></label> 
 
    ... 
 
    <input type="radio" id="rating-1" name="rating" value="1" checked=checked> 
 
    <label for="rating-1"></label> 
 
</div>

Các vòng tròn bạn thấy là các nhãn cho các đầu vào. Thứ tự được đảo ngược (bằng cách sử dụng phao bên phải), vì vậy bạn có thể sử dụng bộ chọn ~ để hiển thị trạng thái của tất cả các anh chị em đến sau khi được chọn. Các đài phát thanh đang có để lưu trữ nhà nước và thậm chí sẽ cho phép bạn gửi bất kỳ thay đổi trở lại bằng cách gửi này bên trong một hình thức. Mỗi vòng tròn bao gồm hai nhãn, do đó, tùy thuộc vào một nửa vòng tròn bạn nhấp vào, bạn sẽ nhận được điểm số khác. Các bộ chọn odd/even di chuyển hai nửa lại với nhau làm cho nó trông giống như một vòng tròn đơn.

Hãy hỏi xem có điều gì không rõ ràng không!

Answer 5

Điều này có thể được hoàn thành với số lượng CSS khá nhỏ và dễ dàng để có thể tạo hiệu ứng bạn cần.

.rating { 
 
    direction: rtl; 
 
    text-align: center; 
 
} 
 
.rating > span { 
 
    display: inline-block; 
 
    position: relative; 
 
    box-sizing: border-box; 
 
    width: 20px; 
 
    height: 20px; 
 
    border: 1px solid black; 
 
    border-radius: 10px; 
 
} 
 
.rating > span:hover, 
 
.rating > span:hover ~ span { 
 
    background: transparent; 
 
} 
 
.rating > span:hover:before, 
 
.rating > span:hover ~ span:before { 
 
    content: ""; 
 
    position: absolute; 
 
    left: -2px; 
 
    top: -2px; 
 
    background: gold; 
 
    width: 20px; 
 
    height: 20px; 
 
    border: 1px solid gold; 
 
    border-radius: 20px; 
 
}

<div class="rating"> 
 
    <span></span><span></span><span></span><span></span><span></span> 
 
</div>

Đây là một biến thể của Star Ratings phát triển bởi css-tricks.com. Click here to read more!