这次给大家带来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 solid transparent",a.appendChild(s),i.appendChild(a),1===s.offsetHeight&&i.classList.add("hairlines"),i.removeChild(a)}}(window,document); 进度条渐变 * { box-sizing: border-box; } .box{ position: fixed; left: 50%; transform: translate(-50%); width: 320px; height: 44px; background-color: white; color: #00a0e9; border: 1px solid #00a0e9; } .process{ position: absolute; height: 100%; width: 0; background: #00a0e9; color: white; overflow: hidden; z-index: 10; } .process-text{ position: absolute; left: 160px; top: 50%; font-size: 12px; transform: translate(-50%, -50%); white-space: nowrap; } function process() { var t = 1; var max = 320; var progress = document.getElementById("process"); var process_texts = document.getElementsByClassName("process-text"); var interval = setInterval(function () { if (t == max) { clearInterval(interval); for (var i in process_texts){ process_texts[i].innerHTML = '完成' } } else { progress.style.width = t + "px"; for (var i in process_texts){ process_texts[i].innerHTML = '进度' + (t / max * 100).toFixed(2) + "%" } t++; } }, 10) }
点击开始
点击开始
相信看了本文案例你已经掌握了方法，更多精彩请关注创想鸟其它相关文章！
推荐阅读：
怎么用CSS设置记录用户密码
重绘与重排如何使用
以上就是css的进度条文字根据进度渐变的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1609234.html
微信扫一扫 
支付宝扫一扫 
