css3 实现一个k歌效果和一个进度条的效果

先看两个效果：
图片描述

图片描述

相信这两个效果很多人都想要，哈哈，我看到很多app，下载进度就是这样的，虽然平淡，但是很有用，只有你遇到了，才知道为什么有用了。

下面就简单分析一下实现原理。

首先，用到的css3特性有：
css3线性渐变linear-gradient，和-webkit-background-clip，-webkit-text-fill-color，这三个特性。

k歌效果比较简单，先分析k歌效果吧。

1，一个渐变的背景色

 background-image: linear-gradient(to right, orange, green);

图片描述
2,渐变背景的变形

 background-image: linear-gradient(to right, orange 50%, green 0%);

图片描述

然后就发现，调整这个50%,就可以随意调整渐变色的分界线了。

好，核心代码已完成。剩下的就是把这个渐变的背景色填充到文字上面
3，填充字体颜色


background-image: linear-gradient(to right, orange 50%, green 0%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

图片描述

就是这么简单。

第二个进度条效果：
其实就是一个小技巧而已，k歌字体效果都出来了，地下在叠加一层背景色就ok了，这个背景色就是50%对应的颜色值，这里就是green；

修改一下颜色值，就是下面这段代码了：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>progress</title>
    <style>
    .progress {
        position: relative;
    }

    .progress-bg {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        background-color: red;
        z-index: 0;
    }

    .progress-inner {
        position: relative;
        z-index: 1;
        font-size: 40px;
        text-align: center;
        background-image: linear-gradient(to right, #000 0%, red 0%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-align: center;
    }
    </style>
</head>

<body>
    <div class="progress">
        <div class="progress-bg"></div>
        <div class="progress-inner">50%</div>
    </div>
    <script>
    (function() {
        var progress = 50;
        var bg = document.querySelector('.progress-bg');
        var inner = document.querySelector('.progress-inner');
        bg.style.width = progress + '%';
        inner.style.backgroundImage = 'linear-gradient(to right, #fff ' + progress + '%, red 0%)';
    })();
    </script>
</body>

</html>

css3 实现一个k歌效果和一个进度条的效果

jsoncode

引用和评论

svg实现渐变百分比组件

CSS团队协作规范

前端开发工具

CSS 现在终于支持高度 auto 过渡动画了

纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

CSS 实现带tooltip的slider

盘点CSS文本两端对齐的N种方式