纯css绘制甜甜圈图表效果
代码语言:html
所属分类:图表
代码描述:纯css绘制甜甜圈图表效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *, *::after { box-sizing: border-box; } :root { --donut-size: 300px; --donut-border-width: 20px; } .donut { border-radius: 50%; height: var(--donut-size); margin: 40px; position: relative; width: var(--donut-size); } .donut__label { left: 50%; line-height: 1.5; position: absolute; text-align: center; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 80%; } .donut__label__heading { font-size: 24px; font-weight: 600; } .donut__label__sub { color: #666666; font-size: 14px; letter-spacing: 0.05em; } .donut__slice { height: 100%; position: absolute; width: 100%; } .donut__slice::after { border: var(--donut-border-width) solid rgba(0, 0, 0, 0); border-radius: 50%; content: ''; height: 100%; left: 0; position: absolute; top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); width: 100%; } .donut__slice__first { --first-start: 0; } .donut__slice__first::aft.........完整代码请登录后点击上方下载按钮下载查看
网友评论0