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>未完待续哦 :)
相关推荐
CaiKanXP 2020-06-13
MaureenChen 2019-12-02
zuncle 2019-11-17
wwwxuewen 2019-11-03
Haines 2019-10-23
huakaiwuxing 2019-06-29
沉着前进 2018-02-15
libowen0 2019-06-27
Phoebe的学习天地 2019-06-27
yaodilu 2019-06-27
realitycss 2019-06-27
葉無聞 2019-06-26
wcssdu 2019-06-25
wangnantjobj 2019-06-20
前端外刊评论 2017-12-08