Simple five-star effect
thinking
1. There are many recommended methods to realize five stars. Here, only half stars are realized, mainly using font awsome icon library. Through the FA star (fillable star), FA star-o (unfilled hollow star) and FA star half o (half solid) in the library.
It is worth noting that if you directly use cdn to refer to font awsome, you may notice that different versions may be different, and the latest version may have different style names. It is better to directly use the version on the official website ! [insert picture description here] (https://img-blog.csdnimg.cn/20190319164532679. PNG? X-oss-process = image / watermark, type zmfuz3pozw5nagvpdgk, shadow_, text ahr0chm6ly9ibg9nlmnzg4ubmv0l3dlaxhpbl80mzynzc2ng =, size_, color ffffff, t_)
Part js
Mainly get 5 stars through js cycle, and set conditions to insert corresponding stars in the cycle
var cur = (1+Math.random()*4).toFixed(1);
console.log(cur);
var stars = "";
for(var i=0;i<5;i++){
var star = '';
if(cur>i) {
if(cur<(i+1)){
star = '<div class="rating-star" style="display:inline-block;font-size: 32px; color: #f1c40f;padding: 5px 10px;"><i class="fa fa-star-half-o" ></i></div>';
}else {
star = '<div class="rating-star" style="display:inline-block;font-size: 32px; color: #f1c40f;padding: 5px 10px;"><i class="fa fa-star" ></i></div>';
}
}else{
star = '<div class="rating-star" style="display:inline-block;font-size: 32px; color: #f1c40f;padding: 5px 10px;"><i class="fa fa-star-o" ></i></div>';
}
stars += star
}
$("body").append('<div class="rating-stars-container"><div class="rating-txt">Cool value</div>'+stars+'</div></div>');
Part css
<style>
.rating-stars-container{
animation:star-blink 1s infinite;
-webkit-animation:star-blink 1s infinite; /*Safari and Chrome*/
}
@keyframes star-blink{
0%{
opacity: 0;
}
50%{
opacity: 1.0;
}
100%{
opacity: 0;
}
}
@-webkit-keyframes star-blink{
0%{
opacity: 0;
}
50%{
opacity: 1.0;
}
100%{
opacity: 0;
}
}
.rating-stars-container .rating-star {
display: inline-block;
font-size: 32px;
color: #f1c40f;
cursor: pointer;
padding: 5px 10px;
}
.rating-txt{
line-height:2rem;
}
.rating-star i{
line-height:2rem;
}
</style>
Part html
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0"> <title>Stars</title> </head> <body>