帝王谷资源网 Design By www.wdxyy.com
实现思路
- 最外面是一个大圆(渐变色)
- 内部里面绘制两个半圆,将渐变的圆遮住(为了看起来明显,左右两侧颜色不一样,设置为灰蓝)
- 顺时针旋转右侧蓝色的半圆,下面渐变的圆会暴露出来,比如旋转 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%; }
帝王谷资源网 Design By www.wdxyy.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
暂无评论...
更新日志
2024年07月05日
2024年07月05日
- dnf巴卡尼单人和多人区别
- 群星《大热唱片DSD》APE+CUE
- 草蜢2012《软硬草蜢》3CD[WAV+CUE整轨]
- 雨林唱片发烧大碟-陈果《明知故犯HQCD》[WAV+CUE]
- 群星.2024-狐妖小红娘月红篇电视剧原声带【恒星引力】【FLAC分轨】
- 许美静.1998-好美静【上华】【WAV+CUE】
- 谭咏麟.1996-独一无二【宝丽金】【WAV+CUE】
- dnf平民怎么弄宠物
- dnf弓箭手职业
- dnf强化基础精通适合哪些职业
- V.A中国管弦乐纪念名盘《乡之音》FLAC
- [雨果]赵鹏《赵鹏·LPCD45》LPCD45[WAV+CUE]
- 群星《八大女声》发烧天后精华版[WAV+CUE]
- 非卖品《2021成都国际音响纪念CD》[WAV+CUE][706M]
- 童安格《挚爱珍藏版》 1:1母盘直刻版[WAV分轨][492M]