星星評價是一個經典的評分方式，它通常用于評價電影、書籍、餐廳等等。而純CSS實現星星評價也是一種非常流行的方式。

/* CSS代碼片段 */
.star-rating {
font-size: 0;
white-space: nowrap;
display: inline-block;
width: 100px;
height: 20px;
overflow: hidden;
}
.star-rating__wrap {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
}
.star-rating__wrap:after {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
background-image: repeating-linear-gradient(to right, #ff9510, #ff9510 20px, #d1d1d1 0, #d1d1d1 40px);
background-size: 200% 100%;
background-position: 0;
transition: background-position 300ms;
}
.star-rating__wrap:hover:after {
background-position: -20px;
}
.star-rating__wrap:hover .star-rating__rate {
transition-delay: 100ms;
}
.star-rating__rate {
position: absolute;
top: 0;
left: 0;
z-index: 2;
height: 100%;
background: #ff9510;
transition: width 300ms, background-color 300ms 100ms;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
width: 0%;
}
.star-rating__rate.is--1 {
width: 0%;
}
.star-rating__rate.is--half {
width: 50%;
}
.star-rating__rate.is--1-5 {
width: 25%;
}
.star-rating__rate.is--2 {
width: 40%;
}
.star-rating__rate.is--2-5 {
width: 70%;
}
.star-rating__rate.is--3 {
width: 80%;
}
.star-rating__rate.is--3-5 {
width: 90%;
}
.star-rating__rate.is--4 {
width: 100%;
}

代碼中，我們首先定義了一個名為star-rating的類，它包括一個包裝器star-rating__wrap和一個評分器star-rating__rate。接著，我們使用CSS線性漸變重復在背景上繪制了一個星星圖案，這個圖案包含20個像素的黃色和灰色色塊，在用戶鼠標懸停在評分器上時，黃色色塊的背景圖案向左移動20個像素。

我們還為star-rating__rate類添加了一些不同的寬度，與不同的評分相對應。例如，如果評分是2.5，我們就使用.star-rating__rate.is--2-5賦予它相應的樣式。

通過結合這些CSS代碼，我們可以輕松地創建一個漂亮的、純CSS的星星評分器。