在html中怎么用圆形渐变,css怎么实现圆形渐变进度条效果

css怎么实现圆形渐变进度条效果

发布时间：2021-03-17 10:29:57

来源：亿速云

阅读：129

作者：小新

这篇文章给大家分享的是有关css怎么实现圆形渐变进度条效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

实现思路最外面是一个大圆(渐变色)

内部里面绘制两个半圆，将渐变的圆遮住(为了看起来明显，左右两侧颜色不一样,设置为灰蓝)

顺时针旋转右侧蓝色的半圆，下面渐变的圆会暴露出来，比如旋转 45 度(45/360 = 12.5%)，再将蓝色的右半圆设为灰色，一个 12.5 的饼图就绘制出来了。

尝试旋转更大的度数，旋转 180 度之后右半圆重合，再旋转，度数好像越来越小，不符合我们需求，应该将右侧的圆回归原位，把其背景色设置成和底色一样的，顺时针旋转左侧的半圆，

最后，最里面加上白色的小圆，放到正中间，用来显示百分数

如图所示：

注意到的属性：background-image，用于为一个元素设置一个或者多个背景图像，可以通过 linear-gradient 实现渐变色。

clip，定义了元素的哪一部分是可见的。clip 属性只适用于 position:absolute 的元素。

下面代码是绘制 33%的圆

33%

.circle-bar {

background-image: linear-gradient(#7affaf, #7a88ff);

width: 182px;

height: 182px;

position: relative;

}

.circle-bar-left {

background-color: #e9ecef;

width: 182px;

height: 182px;

clip: rect(0, 91px, auto, 0);

}

.circle-bar-right {

background-color: #e9ecef;

width: 182px;

height: 182px;

clip: rect(0, auto, auto, 91px);

transform: rotate(118.8deg);

}

.mask {

width: 140px;

height: 140px;

background-color: #fff;

text-align: center;

line-height: 0.2em;

color: rgba(0, 0, 0, 0.5);

position: absolute;

left: 21px;

top: 21px;

}

.mask > span {

display: block;

font-size: 44px;

line-height: 150px;

}

/*所有的后代都水平垂直居中，这样就是同心圆了*/

.circle-bar * {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

}

/*自身以及子元素都是圆*/

.circle-bar,

.circle-bar > * {

border-radius: 50%;

}

感谢各位的阅读！关于“css怎么实现圆形渐变进度条效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

在html中怎么用圆形渐变,css怎么实现圆形渐变进度条效果相关推荐

使用css渐变色。实现动态进度条效果
基本上现在的ui框架都有自己的进度条组件封装但是有的时候我们需要自己定制的时候还是比较麻烦比如下面的这个效果双色进度条贴合效果.可能有点业务会用到吧就是使用渐变色和动画的效果实现, 第 ...
HTML + CSS 实现矩形/圆形进度条效果 - SVG
本文记录通过 HTML + CSS + 部分原生 JS 使用 SVG 嵌入 HTML 文档的用法实现常见的圆形和矩形进度条效果,效果图如下:(实际运行效果是进度条从 0 过渡到一个目标值比如 100% ...
如何用CSS做倒计时/圆形进度条效果
前言:有时,我们会见一些圆形的进度条,随着进度条的推进,进行倒计时的变化. 若是只实现一个圆环的话,只用border和border-radius就能画出来. 但是这样的圆环不能动,产生进度条效果的重要 ...
肝了两宿才收集的17个超炫酷的 CSS 动画加载与进度条特效，绝对值得收藏！！！
文章目录一.圆形加载动画二.上下跳动的圆球加载动画三.3D立体加载动画四.饼图加载动画五.多色圆点波动效果的加载动画六.制作顺时针放大的圆圈加载动画七.制作小圆圈轮流放大的加载动画八. ...
.Net Framework4.5中Asp.net mvc使用Singal R轮训实现导入进度条功能
.Net Framework4.5中Asp.net mvc使用Singal R轮训实现导入进度条功能我的项目需求是:在.net4.5中用mvc5实现上传xml文件,后台实时导入数据库时传到前台进度, ...
圆形百分比进度条效果
一.前言最近有点懈怠啊,没怎么整理发布博客.今天写篇文章和大家分享一个常用的效果,圆形百分比进度条.前段时间我有个页面需要该效果,就在网上看了下,实现方式有好几种,我找了一种比较好实现的给大家一步步 ...
android绘制环形进度_Android使用Canvas绘制圆形进度条效果
前言 Android自定义控件经常会用到Canvas绘制2D图形,在优化自己自定义控件技能之前,必须熟练掌握Canvas绘图机制.本文从以下三个方面对Canvas绘图机制进行讲解: 画布Canvas ...
CSS 奇技淫巧Box-shadow实现圆环进度条
CSS 奇技淫巧Box-shadow实现圆环进度条文章目录 CSS 奇技淫巧Box-shadow实现圆环进度条一.Box-shadow圆环进度条二.效果预览三.原理刨析四.实际应用五.总结 ...
android自定义渐变色圆环,Android实现渐变圆环、圆形进度条效果
最近做了一个功能,里面涉及到了渐变圆形的需求.就是一个颜色可以渐变的圆环,最后实现的效果如下图: 左图是带渐变效果,右图是不带渐变效果.原理还是绘图,Canvas可以绘制的对象有:弧线(arcs).填 ...

在html中怎么用圆形渐变,css怎么实现圆形渐变进度条效果

在html中怎么用圆形渐变,css怎么实现圆形渐变进度条效果相关推荐

最新文章

热门文章