如何使用纯HTML ＋ CSS的方式来实现星级评价

最新推荐文章于 2023-10-11 16:33:28 发布

夜流歌

最新推荐文章于 2023-10-11 16:33:28 发布

阅读量1.5k

点赞数 1

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

本文链接：https://blog.youkuaiyun.com/kiva12138/article/details/110654475

版权

本文介绍如何利用纯CSS和HTML实现滑动的星级评价功能，类似淘宝和多看阅读网的评价系统。通过定义多个标签，设置原始背景图片，利用CSS hover选择器和~选择符改变背景图片，完成星级评价的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在上课的过程之中老师布置了一个非常有意思的问题：
如何使用纯CSS结合HTML实现一个滑动的星级评价的功能？
比如淘宝的星级评价，某某读书网的星级评价等。

素材与目标
这边采用的素材来自于多看阅读网，一方面是因为其素材图片比较完整，另一方面是因为其效果比较简单，只需要使用CSS和HTML就可以实现。

具体图片如下所示：
素材图片（来自多看网）
原理
我们的实现大致可以分为如下几步：

定义多个标签，每个标签对应一个星级评价，同时另外增加一个标签作为背景展示的标签；
首先定义标签的原始背景图片，也就是没有星星的状态；
然后对于每个标签定义CSS的hover选择器，并且使用~选择符来选择作为背景展示的图片，并改变其背景图片，从而实现背景的改变；
其他问题：注意图片像素的大小于切图的准确度。

具体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Stars</title>
</head>
<body>
    <div class="stars">
        <span id="star1" class="star"></span>
        <span id=

最低0.47元/天解锁文章