先看两个效果：相信很多人都想要这两个效果，哈哈，我看过很多app，下载进度是这样的，虽然平淡，但是非常好用，亲身体验过才知道为什么好用。下面简单分析一下实现原理。首先，用到的css3特性有：css3线性渐变linear-gradient，以及-webkit-background-clip，-webkit-text-fill-color，这三个特性。卡拉OK的效果比较简单，我们先来分析一下卡拉OK的效果。1、渐变背景色background-image:linear-gradient(toright,orange,green);2、渐变背景的变形background-image:linear-gradient(toright,orange50%,green0%);然后我发现通过调整这个50%，可以随意调整渐变色的分割线。OK，核心代码完成。剩下的就是把这个渐变的背景色填充到文字的顶部3、填充字体颜色background-image:linear-gradient(toright,orange50%,green0%);-webkit-background-clip:文本；-webkit-文本填充颜色：透明；就这么简单。第二个进度条效果：其实就是一个小技巧。卡拉OK字体效果出来了。在地下加一层底色就可以了。这个底色是50%对应的颜色值，这里是绿色；修改颜色值为如下代码：
