Web前端遮罩的应用-等级评定

最新推荐文章于 2020-08-22 12:47:46 发布

SmartCoding

最新推荐文章于 2020-08-22 12:47:46 发布

阅读量637

点赞数

本文链接：https://blog.csdn.net/SmartCoding/article/details/41543583

版权

实现非完整颗星的评价效果

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
.stars {
    display: inline-block;
    color: #FDB338;
}
.text-icon {
    font-family: base_icon;
    display: inline-block;
    vertical-align: middle;
    font-style: normal;
}
.text-icon.icon-star:after {
    content: "★";
}
.text-icon.icon-star-gray {
    position: relative;
}

.text-icon.icon-star-gray<span style="color:#ff0000;">:after</span> {
	color: #E2E2E2;
	content:"★";
}

.text-icon.icon-star-half {
	position: absolute;
    left: 0px;
	<strong><span style="color:#ff0000;">width:0.1em;</span></strong>
    <span style="color:#ff0000;"><strong>overflow: hidden;</strong></span>
}
.text-icon.icon-star-half<strong><span style="color:#ff0000;">:after</span></strong>{

	content:"★";

}
</style>
</head>

<body>
<span class='stars'>
<i class="text-icon icon-star"></i>
<i class="text-icon icon-star"></i>
<i class="text-icon icon-star"></i>
<i class="text-icon icon-star"></i>
<i class="text-icon icon-star"></i>
<i class="text-icon icon-star-gray">
	<i class="text-icon icon-star-half" style="width:0.50em">
    </i>
</i>
</span>
</body>
</html>