实现思路
最外面是一个大圆(渐变色)内部里面绘制两个半圆,将渐变的圆遮住(为了看起来明显,左右两侧颜色不一样,设置为灰蓝)顺时针旋转右侧蓝色的半圆,下面渐变的圆会暴露出来,比如旋转 45 度(45/360 = 12.5%),再将蓝色的右半圆设为灰色,一个 12.5 的饼图就绘制出来了。尝试旋转更大的度数,旋转 180 度之后右半圆重合,再旋转,度数好像越来越小,不符合我们需求,应该将右侧的圆回梁静茹资料归原位,把其背景色设置成和底色一样的,顺时针旋转左侧的半圆,最后,最里面加上白色的小圆,放到正中间,用来显示百分数如图所示:
注意到的属性:
background-image, 用于为一个元素设置一个或者多个背景图像, 可以通过 linear-gradient 实现渐变色。clip, 定义了元素的哪一部分是可见的。clip 属性只适用于 position:absolute 的元素。下面代码是绘制 33%的圆
<div class="circle-bar"> <div class="circle-bar-left"></div> <div class="circle-bar-right"></div> <div class="mask"> <span class="percent">33%</span> </div></div>
.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 实现圆形渐变进度条效果的示例代码的文章就介绍到这了,更多相关css 渐变进度条内容请搜索www.887551.com以前的文章或继续浏览下面的漂洋过海来看你吉他谱相关文章,希望大家以后多多支持www.887551.com!
本文发布于:2023-04-03 20:11:36,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/8fcf9155f2f13a5b48beab386e7348da.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:css 实现圆形渐变进度条效果的示例代码.doc
本文 PDF 下载地址:css 实现圆形渐变进度条效果的示例代码.pdf
留言与评论(共有 0 条评论) |