CSS怎样实现最后带文字的横向进度条？

发布时间：2023-09-19 11:08:00 所属栏目：语言来源：

导读：对于实现进度条的效果相信大家应该都不陌生，小编之前也给大家介绍过，本文给大家用CSS实现最后带文字的横向进度条，实现效果如下，这种类型的进度条可以用户对比的场景下，那么具体怎样做呢？下面我们一起来看下实现

对于实现进度条的效果相信大家应该都不陌生，小编之前也给大家介绍过，本文给大家用CSS实现最后带文字的横向进度条，实现效果如下，这种类型的进度条可以用户对比的场景下，那么具体怎样做呢？下面我们一起来看下实现思路及代码。

解决思路
在 div 标签中添加一个 relative 定位，然后使用绝对定位 absolute 在最右侧

<div class="content">
<div class="bar first" style="width:100%">
<span>688</span>
</div>
<div class="bar second" style="width:50%">
<span>688</span>
</div>
<div class="bar third" style="width:80%">
<span>688</span>
</div>
</div>

自己的解决办法

.bar {
height: 12px;
margin-top: 1px;
position: relative;
&.first {
background-image: linear-gradient(90deg, #ecf848 0%, #f9eab9 99%);
}
&.second {
background-image: linear-gradient(90deg, #f5b549 0%, #f9d6b9 100%);
}
&.third {
background-image: linear-gradient(90deg, #f57849 0%, #f9c7b9 100%);
}
span{
position: absolute;
right: 0;
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
}
}

按照上面的写法，只能是 span 标签的最右侧和父标签div 的最右侧重叠，无法实现目标。解决办法，计算 span标签的值，然后right 设置为计算的长度

考虑到上述实现需要依赖于js,而且过于麻烦，想想有没有办法只通过CSS实现目标呢？

解决办法一： left: 100%;
.bar {
height: 12px;
margin-top: 1px;
position: relative;
&.first {
background-image: linear-gradient(90deg, #ecf848 0%, #f9eab9 99%);
}
&.second {
background-image: linear-gradient(90deg, #f5b549 0%, #f9d6b9 100%);
}
&.third {
background-image: linear-gradient(90deg, #f57849 0%, #f9c7b9 100%);
}
span{
position: absolute;
left: calc(100% + 8px);
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
}
}
left 参照的宽度是父容器的宽度

解决办法二： right:0; transform: translate(100%, 0)
.bar {
height: 12px;
margin-top: 1px;
position: relative;
&.first {
background-image: linear-gradient(90deg, #ecf848 0%, #f9eab9 99%);
}
&.second {
background-image: linear-gradient(90deg, #f5b549 0%, #f9d6b9 100%);
}
&.third {
background-image: linear-gradient(90deg, #f57849 0%, #f9c7b9 100%);
}
span{
position: absolute;
right:0;
transform: translate(100%, 0);
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
}
}
transform: translate 参照的宽度是自身内容的宽度

关于用CSS实现最后带文字的横向进度条的方法就介绍到这，上述两种方法都有一定的借鉴价值，感兴趣的朋友可以参考学习，希望能对大家有帮助。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!