css 进度条的文字根据进度渐变的示例代码

互联网   01-09 16:15:23   作者:兰茗翔   我要评论
这篇文章主要介绍了css 进度条的文字根据进度渐变的示例代码,介绍了进度条里面的文字需要根据进度的长度而变化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
本文介绍了css 进度条的文字根据进度渐变的示例代码,分享给大家,具体如下: 需求 1.进度条里面的文字需要根据进度的长度而变化 原理
用两个一模一样的样式的 div 重叠起来 效果
字体开始为 蓝色,跟随进度条变为 白色 代码
<!DOCTYPE html> <html lang="cmn-hans"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <script>!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("div");s.style.border=".5px solid transparent",a.appendChild(s),i.appendChild(a),1===s.offsetHeight&&i.classList.add("hairlines"),i.removeChild(a)}}(window,document);</script> <title>进度条渐变</title> <style type="text/css"> * { 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; } </style> <script> 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) } </script> </head> <body> <div class="box" onclick="process()"> <div class="process" id="process"> <span class="process-text">点击开始</span> </div> <span class="process-text">点击开始</span> </div> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
  1. Tag:css   进度条   文字   进度渐变  

相关文章

  1. css3实现文字扫光渐变动画效果的示例
    这篇文章主要介绍了css3实现文字扫光渐变动画效果的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-07
  2. CSS实现文字高光水波渐变的动态效果实例
    这篇文章介绍的是用CSS实现文字高光水波渐变的效果,实现后效果很漂亮,对大家日常开发很有用处,下面小编整理好分享给大家。有需要的可以参考。
    2016-08-29
  3. 一款纯css3实现的颜色渐变按钮的代码利发国际手机客户端
    今天给大家分享一款纯css3实现的颜色渐变按钮,这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变,清新淡雅,效果非常好看,需要的朋友可以参考下
    2014-11-12
  4. 使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
    使用CSS3 的背景渐变 -webkit-gradient ,用一个背景渐变的 DIV 代替图片。下面是实现效果示例,相比以上方案优点是不使用图片,减小请求量和流量
    2014-08-19
  5. CSS 网页文字渐变效果
    本文介绍的技术很经典,也算是一篇老文章了,相信很多人也都看过,之前神飞有注意到国内有些翻译,但是不全面,这里我就将其完整的翻译了一下。
    2009-08-03

最新评论

利发国际手机客户端