利用纯css实现五星好评带点击滑入交互

作者：管理员 2017-07-03 14:49:44 分类：HTML/CSS 阅读（3968） 0

可能平时我们写这种星星评级都是用插件或者js，但其实利用纯css也能写出五星好评哦

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.star-box {
display: table;
position: absolute;
left: 50%;
top: 50%;
}

.star-box label {
float: right;
color: #999;
}

.star-box label::after {
content: '★';
font-size: 28px;
padding: 5px;
display: inline-block;
line-height: 1;
}

.star-box input:checked~label,
.star-box label:hover~label,
.star-box label:hover {
color: red;
}
</style>
</head>

<body>
<div class="star-box">
<input type="radio" name="star" id="star5" hidden />
<label for="star5"></label>

<input type="radio" name="star" id="star4" hidden />
<label for="star4"></label>

<input type="radio" name="star" id="star3" hidden />
<label for="star3"></label>

<input type="radio" name="star" id="star2" hidden />
<label for="star2"></label>

<input type="radio" name="star" id="star1" hidden />
<label for="star1"></label>
</div>
</body>

</html>

在线一览

后记

因为原生的小星星角度比较尖锐，可能如果用图片去弄的话效果更佳柔和。

本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com

赞(1) 打赏

标签：

CSS 五角星

上一篇：爱情是以物质为基础奢侈的精神享受

下一篇：jQuery判断当前事件触发元素是不是自己？

利用纯css实现五星好评带点击滑入交互

后记

相关推荐

共 0 条评论关于"利用纯css实现五星好评带点击滑入交互"

点击取消