css实现简易五角星星级

怪（乖）

于 2021-12-27 10:07:58 发布

阅读量995

点赞数

分类专栏： css记录文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_45429152/article/details/122165670

版权

本文介绍了如何使用CSS创建一个简单的五星评级系统。通过调整`star-rating-top`元素的`width`属性，可以实现从半星到五星的任意星级显示。例如，`width: 10%`表示半星，`width: 100%`则为满星。可以通过JS或者jQuery动态改变`width`值，如：`$('.star-rating-top').css('width', '100%')`，以实现动态星级显示。文章最后展示了效果示例。" 117058155,10559113,C语言生成1~100随机数及代码解析,"['C语言', '后端开发', '程序设计', '随机数', '算法']

摘要由CSDN通过智能技术生成

首先在html中写上如下代码：

                               <div class="col-md-5">
                                    <b>检测星级：</b>
                                    <div class="star-rating">
                                        <div class="star-rating-top" style="width:50%">
                                            <span></span>
                                            <span></span>
                                            <span></span>
                                            <span></span>
                                            <span></span>
                                        </div>
                                        <div class="star-rating-bottom">
                                            <span></span>