【HTML+CSS】教你切图篇5-星星评分纯CSS实现

最新推荐文章于 2024-03-15 15:20:37 发布

原创最新推荐文章于 2024-03-15 15:20:37 发布 · 1w 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

切图专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何使用HTML和CSS来创建一个星星评分系统，通过控制黄色星星的宽度模拟评分变化，减少了对JavaScript的依赖。教程提供了HTML标签结构和CSS样式代码示例，强调了两张图片在实现过程中对齐的重要性。

俗话说得好，前端切图玩的就是心机，有时候多动脑子想一想，就能避免写很多的js脚本，何乐而不为，废话少说，这次实现的的东西长下面这样：

这里写图片描述

原材料也很简单，就是两张图片，看看：

这里写图片描述

实现原理也是非常简单滴，把灰色星星作为背景，然后在上面叠加黄色星星，通过控制黄色星星的宽度，实现评分变化，是不是很简单？先来看看HTML标签：

<div class="star-eval">
    <span class="stars-bg">
        <!-- 宽度由实际数据自行计算 如4.2/5*100% -->
        <i class="star-active" style="width: 20%"></i>
    </span>
    <span class="right-txt"><b>4.2</b>分</span>
</div>

CSS样式：

.stars-bg{
    position: relative;
    display: inline-block;
    height: 19px;
    width: 157px;
    background: url(../images/evaluate.jpg) 0 0;
}
.star-active{
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    height: 100%;
    background: url(../images/evaluate.jpg) 0 -24px;
}