vue实现一个星级打分效果_网页常见特效制作1：星级打分效果

当我们在网上购物、点外卖等之后，都会有一个要求用户评分的步骤，常用的就是五星打分的效果，如下图：

那么怎样实现这个效果呢？

本篇文章将从零开始实现该效果。

使用工具

Jquery.js：Jquery是常用的javascript库，极大的简化了javascript开发。

素材：

(该图片来自于网上)。

开发步骤

搭建页面

新建index.html文件并引入jquery，新建index.js文件，代码如下：

评分效果

• 
• 
• 
• 
• 

对页面添加css，当星星处于激活状态时，我们给li标签添加一个active类，默认状态是灰色的,css代码如下：

.score-container{

position: relative;

<