easy-pie-chart实现进度条饼图效果代码
代码语言:html
所属分类:进度条
代码描述:easy-pie-chart实现进度条饼图效果代码
代码标签: easy-pie-chart 进度条 饼图
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { font: 12px/1.4 'Helvetica','Arial', sans-serif; color: #a1a7a6; background: #e0e3db; } .panel { position: relative; background: #fff; width: 300px; margin: 40px auto; text-align: center; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15); } .chart { display: inline-block; width: 110px; margin: 40px auto 20px; padding: 0 10px; } .easyPieChart { position: relative; text-align: center; } .easyPieChart canvas { position: absolute; top: 0; left: 0; } .percentage, .label { margin-bottom: 0.5em; text-align: center; font-weight: 100; } .percentage { font-size: 17px; } sup { top: -0.2em; margin-left: 1px; } .ctrl { position: absolute; right: 10px; top: 5px; color: #c4cdcc; word-spacing: 5px; } .ctrl span { cursor: pointer; -moz-transition: color 0.5s ease-in-out; -o-transition: color 0.5s ease-in-out; -webkit-transition: color 0.5s ease-in-out; transition: color 0.5s ease-in-out; } .ctrl span:hover { color: #000; } .meta { margin: auto; max-width: 280px; border-top: 1px solid rgba(155, 155, 155, 0..........完整代码请登录后点击上方下载按钮下载查看
网友评论0