一款纯CSS3制作五颗星星悬停滑动评分打分效果代码。
使用方法
在页面引入CSS样式
body { text-align: center; background-color: #34495e; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } h1 { color: #FFF; font-weight: 500; padding: 30px; text-shadow: 0 3px 3px #2b3c4e; } input { display: none; } label { cursor: pointer; font-size: 40px; color: yellow; display: block; width: 50px; height: 50px; line-height: 60px; text-align: center; float: left; -moz-transition: all 0.2s; -o-transition: all 0.2s; -webkit-transition: all 0.2s; transition: all 0.2s; text-shadow: 0 3px 3px #2b3c4e; } label:hover { font-size: 50px; color: #FFF; text-shadow: 0 0 5px #b9c9d8; } label:before { display: inline; width: auto; height: auto; line-height: normal; vertical-align: baseline; margin-top: 0; font-family: FontAwesome; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased; content: "\f005"; } input:checked + label ~ label:before { content: "\f006"; } #wrapper { display: inline-block; } #wrapper:hover label:before { content: "\f005"; } #wrapper:hover label:hover ~ label:before { content: "\f006"; }