css3个div如何评分

评分作为评价产品的一个重要指标，一直备受关注。而如何通过 CSS3 来实现评分功能呢？我们可以利用 CSS3 的一些新特性，很轻松地实现一个 5 个 div 的评分效果。 首先，我们需要 HTML 代码来定义这五个 div，代码如下：

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

这里我们使用了 class 属性来定义这五个 div。然后我们通过 CSS3 来为这五个 div 添加评分效果。

.rating {
display: inline-block;
font-size: 0;
width: 125px;
height: 25px;
position: relative;
}
.star {
display: inline-block;
width: 25px;
height: 25px;
position: relative;
background: url('star.png') no-repeat;
background-size: 100%;
cursor: pointer;
}
.star:hover:before, .star:hover ~ .star:before {
content: "\2605";
position: absolute;
color: #ffcc00;
}
.star:hover ~ .star {
background: none;
}

在上述代码中，我们首先利用 rating 类定义了父 div 的样式，使之块级元素变为行内块级元素，并设置了一些其他的样式。而对于子 div star，我们设置了宽度、高度、背景图片等等。在鼠标悬浮在某个 div 上时，我们通过伪元素 :before 给这个元素添加了一颗星星效果，hover ~ star 实现了将星星添加到所有的 div 上。 不难看出，使用 CSS3 来实现这个评分功能非常简单，只需要利用 CSS3 的新特性，加上一些巧妙的样式就可以实现。

查看更多关于css3个div如何评分的详细内容...