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歌效果和一个进度条的效果相关推荐

CSS3超酷网页Loading加载进度条动画效果
在jQuery之家上发现的一款css3效果. CSS3 animation超酷网页Loading加载进度条动画效果 >>查看演示 > ...
python 视频播放拖动_视频画中画效果，拖动进度条可以seek到相应视频帧显示
在视频开发中,我们常常看到这样的效果,拖动进度条时,或是在进度条上方或是在屏幕中间,显示拖动进度条位置时刻的某一帧画面. 这个需求,如果是你,你会如何做? 通常一个需求,不仅要考虑实现,还有考虑一些是 ...
android发光进度条,Android ProgressBar 进度条荧光效果
这段时间做项目,产品需求,进度条要做一个荧光效果,类似于Android4.0 浏览器中进度条那种样子.刚开始,百思不得其姐啊,还以为是用sharp文件或者canvas直接画出来的.后来一怒之下,把系统 ...
Vml+Dhtml:制作一个应用渐变颜色效果不错的进度条
//原作:风云舞,载自: http://www.lshdic.com/bbs <HTML xmlns:v> <HEAD> <META http-equiv='Conten ...
css3实现加载进度条的效果(二)
css3实现光效加载的进度条,下面来看实现方法! <div class="progress-bar orange shine"><span id="bl ...
实现一个简单的文件上传进度条
新手入门web 文件上传完成取得的进展没有进度条只能用文字不好看必须是一个进度条没有艺术互联网很进度条需要图片有多种帧的他看上去好麻烦让自己的单纯很简单我没想到这么复杂 ...
用emWin的2D绘图函数画一个带圆形端点的环形进度条
先上效果图,首先是顺时针转: 然后是逆时针转: 大概讲一下思路吧,首先讲一下顺时针是怎么弄的,很简单. 画圆弧函数GUI_DrawArc有起始角度a0和终止角度a1两个参数,且a0必须小于a1否则无法 ...
用css3和jquery实现的渐变的动态进度条
进度条是网站中常见的一种,今天经过研究外国一个网站的例子,试着用css3来实现进度条: html代码如下: <div class="progress-bar blue stripes& ...
html5 video如何添加进度条_教你制作独一无二的进度条视频效果
VLOG开头经常都会看到进度条,爱心/星星/emoji表情都可以做成进度加载的效果.这究竟是怎么做出来的呢?今天喵酱为大家带来3种方法,轻松制作进度条效果.认真地一步一步查看,保证你也能学会!先来看看 ...

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

css3 实现一个k歌效果和一个进度条的效果相关推荐

最新文章

热门文章