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

huangjinnan 发布于2019-08-29 13:28 / 1570人阅读

摘要：歌效果比较简单，先分析歌效果吧。第二个进度条效果其实就是一个小技巧而已，歌字体效果都出来了，地下在叠加一层背景色就了，这个背景色就是对应的颜色值，这里就是修改一下颜色值，就是下面这段代码了未完待续哦

先看两个效果：

相信这两个效果很多人都想要，哈哈，我看到很多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；

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

未完待续哦 :)

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112625.html

窗口进度条及其高级使用

摘要：效果优化一下因为这里的窗口滚动进度条没有过度效果吗虽然谷歌浏览器她会自动帮你优化一点过度的效果，但是我们还是自己写的和谐一点点，所以就加多一句的动画到这里我们的滚动进度条就基本上实现了，也可以做一个很不错的水平效果。我们大概实现的效果就像YouTube上面的红色进度条那样。但是YouTube上面那个进度条还是很坑爹的。文章后面再告诉你们为什么。首先窗口的滚动进度条窗口的滚动条非常...

objc94 2019-08-22 10:48 评论0 收藏0
css3实现圆形进度条

摘要：在开发微信小程序的时候，遇到圆形进度条的需求。但使用和实现进度条就很容易的避免了这方面的问题。如下图最下面的圆形是进度条的背景，在上面有和两个长方形，用来覆盖不要显示的进度条。在两个长方形的里面分别有一个半圆形用来显示进度。在开发微信小程序的时候，遇到圆形进度条的需求。使用canvas绘图比较麻烦： 1、为了实现在不同屏幕上面的适配，必须动态的计算进度条的大小； 2、在小程序...

leanote 2019-08-21 11:36 评论0 收藏0
css3实现圆形进度条

摘要：在开发微信小程序的时候，遇到圆形进度条的需求。但使用和实现进度条就很容易的避免了这方面的问题。如下图最下面的圆形是进度条的背景，在上面有和两个长方形，用来覆盖不要显示的进度条。在两个长方形的里面分别有一个半圆形用来显示进度。在开发微信小程序的时候，遇到圆形进度条的需求。使用canvas绘图比较麻烦： 1、为了实现在不同屏幕上面的适配，必须动态的计算进度条的大小； 2、在小程序...

enali 2019-08-29 12:12 评论0 收藏0
实现环形进度条（CSS3+jQuery/Vue）

摘要：整体思路是通过裁切产生两个半圆展示出静态的进度条，而后通过旋转角度的变化产生动态效果。而蓝色部分元素的颜色，是我们还未到达的进度。演示勤快的我去里写了一下这个是的实现这个是的实现环形进度条。参考文章利用和实现环形进度条整体思路是：通过裁切（clip）产生两个半圆展示出静态的进度条，而后通过旋转（rotate）角度的变化产生动态效果。先来回顾两个基础知识点（1）css的一个不常见的...

BWrong 2019-08-29 12:22 评论0 收藏0
实现环形进度条（CSS3+jQuery/Vue）

摘要：整体思路是通过裁切产生两个半圆展示出静态的进度条，而后通过旋转角度的变化产生动态效果。而蓝色部分元素的颜色，是我们还未到达的进度。演示勤快的我去里写了一下这个是的实现这个是的实现环形进度条。参考文章利用和实现环形进度条整体思路是：通过裁切（clip）产生两个半圆展示出静态的进度条，而后通过旋转（rotate）角度的变化产生动态效果。先来回顾两个基础知识点（1）css的一个不常见的...

lidashuang 2019-08-21 15:32 评论0 收藏0