为了账号安全,请及时绑定邮箱和手机立即绑定

非闭合环形渐变进度条如何实现?

非闭合环形渐变进度条如何实现?

UYOU 2018-09-04 13:30:41
如图:求给个思路!难道真的只能用D3来实现吗?
查看完整描述

1 回答

?
浮云间

TA贡献1829条经验 获得超4个赞

这里给个思路吧:

  • 先如下图,找出圆弧的圆心,然后做两张图(一张背景透明的轨道图,和一张背景透明的渐变颜色填充图,图形大致形状都如右图所示)

https://img1.sycdn.imooc.com//5bc69d1900018f8a05720268.jpg

  • 然后用代码画出如下布局

    • 对于DOM的处理,第一种是将轨道图直接做成长方形的背景,将渐变弧形设置为原型的背景

    • 第二种DOM处理方案是,长方形只用来做溢出遮盖(overflow: hidden),用两个圆形做渐变条和轨道

https://img1.sycdn.imooc.com//5bc69d26000149b002300207.jpg

  • 然后旋转渐变条的圆形就可以实现这个效果

  • 不过这个方案有个缺陷,就是轨道的边缘由于是长方形溢出隐藏的,所以无法保持圆角


查看完整回答
反对 回复 2018-10-17
  • 1 回答
  • 0 关注
  • 709 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号