对于实现进度条的效果相信大家应该都不陌生，小编之前也给大家介绍过，本文给大家用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实现最后带文字的横向进度条的方法就介绍到这，上述两种方法都有一定的借鉴价值，感兴趣的朋友可以参考学习，希望能对大家有帮助，想要了解更多实现进度条效果的内容，大家可以关注其它的相关文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• CSS盒子模型元素的宽高怎么算，外边距塌陷怎样解决

   我们通常设置的宽度和高度，是指盒子模型中内容（content）的宽度和高度。元素的高度，还要加上上下padding和上下border,元素整个盒子的高度还要加上上下margin；宽度类似计算。注意：父子元素包含情况下的计算，父亲元素会把儿子元素的整个盒子（包括margin）的大小作为内容。外边距塌陷(margincollapse)，块元素的top与bottom外边距有时

• CSS实现图片一秒后效果的方法是什么

  在css中，可以给图片元素添加“图片元素{animation:名称 时间}@keyframes 名称{0%{opacity:1;}99%{opacity:1;}100%{opacity:0;}}”样式，实现图片出现一秒后消失效果。

• Bootstrap中用什么方法实现图片上传、展示和保存

  这篇文章主要介绍了Bootstrap File Input文件上传组件,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

• HTML项目中table在android端显示的实现代码是什么

  開始都是用Html.fromHtml(source)。来显示html的可是你会发现，对于style。table等等一系列的标签它都没有解析的仅仅好换一个思路。用webview去做在xml中增加<WebView      android: 

• CSS与HTML如何结合，都有哪些方法

  这篇文章主要介绍了css和html的四种结合方式,需要的朋友可以参考下