css实现百分比投票结果柱状图显示效果代码
代码语言:html
所属分类:图表
代码描述:css实现百分比投票结果柱状图显示效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"><title>html chart</title> <style> html,body { padding: 0px; margin: 0px; font-family: monospace; height: 100%; } body { display: flex; } .container { background: #FFF; width: 400px; margin: auto; } .chart { position: relative; padding: 0.5em; background: #222; border-radius: 5px; font-size: 16px; } .chart * { box-sizing: border-box; } .chart:after { content: ''; position: absolute; left: 25%; top: 5%; -webkit-transform: translateX(100%); transform: translateX(100%); width: 3px; background: #FFF; height: 90%; border-radius: 2px; } .chart .part { display: flex; height: 3em; } .chart .part >.label { flex: 1; flex-basis: 25%; text-align: right; padding-right: 1em; margin: 0.5em 0; height: 2em; line-height: 2em; color: #FFF; font-weight: 600; } .chart .part .bar { flex: 3; flex-basis: 75%; position: relative; margin: 0.5em 0; } .chart .part .bar:after { content: ''; position: absolute; top: 0; left: 0; height: 100%; border-radius: 0 2px 2px 0; } .chart .part .bar.red:after { background: #f22; } .chart .part .bar.blue:after { background: #56a; } .chart .part .bar.green:after { background: #2a5; } .chart .part .bar .label { position: absolute; top: 50%; left: 0.5em; -webkit-transform: translateX(0%) translateY(-50%); transform: translateX(0%) translateY(-50%); z-index: 1; color: #FFF; font-weight: 600; } .chart .part.percent-1 .bar:after { width: 1%; } .chart .part.percent-2 .bar:after { width: 2%; } .chart .part.percent-3 .bar:after { width: 3%; } .chart .part.percent-4 .bar:after { width: 4%; } .chart .part.percent-5 .bar:after { width: 5%; } .chart .part.percent-6 .bar:after { width: 6%; } .chart .part.percent-7 .bar:after { width: 7%; } .chart .part.percent-8 .bar:after { width: 8%; } .chart .part.percent-9 .bar:after { width: 9%; } .chart .part.percent-10 .bar:after { width: 10%; } .chart .part.percent-11 .bar:after { width: 11%; } .chart .part.percent-12 .bar:after { width: 12%; } .chart .part.percent-13 .bar:after { width: 13%; } .chart .part.percent-14 .bar:after { width: 14%; } .chart .part.percent-15 .bar:after { width: 15%; } .chart .part.percent-16 .bar:after { width: 16%; } .chart .part.percent-17 .bar:after { width: 17%; } .chart .part.percent-18 .bar:after { width: 18%; } .chart .part.percent-19 .bar:after { width: 19%; } .chart .part.percent-20 .bar:after { width: 20%; } .chart .part.percent-21 .bar:after { width: 21%; } .chart .part.percent-22 .bar:after { width: 22%; } .chart .part.percent-23 .bar:after { width: 23%; } .chart .part.percent-24 .bar:after { width: 24%; } .chart .part.percent-25 .bar:after { width: 25%; } .chart .part.percent-26 .bar:after { width: 26%; } .chart .part.percent-27 .bar:after { width: 27%; } .chart .part.percent-28 .bar:after { width: 28%; } .chart .part.percent-29 .bar:after { width: 29%; } .chart .part.percent-30 .bar:after { width: 30%; } .chart .part.percent-31 .bar:after { width: 31%; } .chart .part.percent-32 .bar:after { width: 32%; } .chart .part.percent-33 .bar:after { width: 33%; } .chart .part.percent-34 .bar:after { width: 34%; } .chart .part.percent-35 .bar:after { width: 35%; } .chart .part.percent-36 .bar:after { width: 36%; } .chart .part.percent-37 .bar:after { width: 37%; } .chart .part.percent-38 .bar:after { width: 38%; } .chart .part.percent-39 .bar:after { width: 39%; } .chart .part.percent-40 .bar:after { width: 40%; } .chart .part.percent-41 .bar:after { width: 41%; } .chart .part.percent-42 .bar:after { width: 42%; } .chart .part.percent-43 .bar:after { width: 43%; } .chart .part.percent-44 .bar:after { width: 44%; } .chart .part.percent-45 .bar:after { width: 45%; } .chart .part.percent-46 .bar:after { width: 46%; } .chart .part.percent-47 .........完整代码请登录后点击上方下载按钮下载查看
网友评论0