css定位跟着进度条字,css进度条的文字根据进度变化实现方法

本文主要介绍了css 进度条的文字根据进度渐变的示例代码，介绍了进度条里面的文字需要根据进度的长度而变化，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

需求

1.进度条里面的文字需要根据进度的长度而变化

原理

用两个一模一样的样式的 p 重叠起来

效果

字体开始为 蓝色，跟随进度条变为 白色

代码

!function(e,t){function n(){t.body?t.body.style.fontSize=12*o+"px":t.addEventListener("DOMContentLoaded",n)}function d(){var e=i.clientWidth/10;i.style.fontSize=e+"px"}var i=t.documentElement,o=e.devicePixelRatio||1;if(n(),d(),e.addEventListener("resize",d),e.addEventListener("pageshow",function(e){e.persisted&&d()}),o>=2){var a=t.createElement("body"),s=t.createElement("p");s.style.border=".5px soli