需求
页面加载之后显示一个进度条。现在有个需求，当进度条走到大概图片中的位置的时候，里面文字的颜色变成白色。
实际不一定是图片显示的47%的位置，希望判断的是到达文本开始就变色变成白色。
思路
这个样式咋一看无从下手，经过探究可以发现可以用两层文字实现，白色的那层文字是放在蓝色进度条的容器中，当达到一定宽度后才开始展现。这个要从html结构上下手，蓝色进度条容器设置超出隐藏。
第二点就是这两层文字都要通过定位居中到这个条的中间，用绝对定位来实现。
这是不考虑用js的最好方法
https://codepen.io/AlexZ33/pen/BapaOJL
涉及具体需求，则蓝色进度条process的宽度应该是动态设置的，不过这个在框架辅助下就简单多了。
需求
页面加载之后显示一个进度条。现在有个需求，当进度条走到大概图片中的位置的时候，里面文字的颜色变成白色。
实际不一定是图片显示的47%的位置，希望判断的是到达文本开始就变色变成白色。
思路
这个样式咋一看无从下手，经过探究可以发现可以用两层文字实现，白色的那层文字是放在蓝色进度条的容器中，当达到一定宽度后才开始展现。这个要从html结构上下手，蓝色进度条容器设置超出隐藏。
第二点就是这两层文字都要通过定位居中到这个条的中间，用绝对定位来实现。
这是不考虑用js的最好方法
https://codepen.io/AlexZ33/pen/BapaOJL
涉及具体需求，则蓝色进度条process的宽度应该是动态设置的，不过这个在框架辅助下就简单多了。