jquery+css实现立体质感自适应动态柱状图、环状进度条图表效果代码
代码语言:html
所属分类:图表
代码描述:jquery+css实现立体质感自适应动态柱状图、环状进度条图表效果代码
代码标签: jquery css 立体 质感 自适应 动态 柱状图 环状 进度条 图表
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet"> <style> .chartBarsWrap { padding-left: 40px; margin: 0 30px 0 20px; } .chartBars { position: relative; max-width: 600px; height: 300px; margin: 50px auto 100px; } .chartBars .bars { display: flex; justify-content: space-around; border-left: 1px solid #bbb; border-bottom: 1px solid #bbb; width: 100%; height: 100%; padding: 0; padding: 0 1%; margin: 0; } .chartBars .bars li { display: inline-block; flex: 0 1 24%; height: 100%; margin: 0; text-align: center; position: relative; font-size: 16px; } .chartBars .bars li .bar { width: 100%; background: #49E; position: absolute; font-size: 1.5em; color: #fff; padding-top: 18px; bottom: 0; height: 0; overflow: hidden; font-weight: bold; outline: 2px solid transparent; transition: 1.5s height cubic-bezier(0.6, 0.4, 0.4, 1.1); } .chartBars .bars li .bar:after { content: '%'; font-size: 22px !important; vertical-align: top; color: rgba(255, 255, 255, 0.8); margin-right: -8px; } .chartBars .bars li b { color: #eee; width: 100%; position: absolute; bottom: -2em; left: 0; text-align: center; } .chartBars .numbers { width: 50px; height: 100%; margin: 0; padding: 0; display: inline-block; position: absolute; left: -50px; } .chartBars .numbers li { text-align: right; padding-right: 1em; list-style: none; height: 59px; position: relative; font-size: 13px; bottom: 11px; right: -9px; color: #eee; } .chartBars .numbers li:after { content: "\00af"; position: relative; right: -5px; font-size: 20px; top: 7px; color: rgba(255, 255, 255, 0.34); } .chartBars .numbers li:first-of-type { height: 63px; margin-top: -1px; } .chartBars1 .bar { border-top-right-radius: 30px; } .chartBars2 { max-width: 350px; } .chartBars2 .bars { padding: 0; } .chartBars2 .bars li { flex: 0 1 25%; } .chartBars2 .bars li .bar { box-shadow: 0 0 20px #222; } .chartBars3 { background: rgba(255, 255, 255, 0.1); border-top: 1px solid #666; border-right: 1px solid #666; } .chartBars3 .bars { border-color: #666; padding: 0; } .chartBars3 .bars li .bar { border-top-right-radius: 3px; border-top-left-radius: 3px; font-size: 22px !important; } .chartBars3 .bars li .bar:after { font-size: 0.6em !important; } .chartBarsWrap.chartBarsHorizontal { flex-direction: column; padding-left: 70px; } .chartBarsWrap.chartBarsHorizontal .bars b { color: #eee; width: 100%; position: absolute; bottom: initial; top: 1em; left: -102%; text-align: right; } .chartBarsWrap.chartBarsHorizontal .chartBars { height: 200px; } .chartBarsWrap.chartBarsHorizontal .chartBars .bars { border: 0; } .chartBarsWrap.chartBarsHorizontal .chartBars .bars .bar { width: 0; padding-top: 10px; height: 100% !important; text-align: right; font-size: 1.5em; transition: 2s width cubic-bezier(0.6, 0.4, 0.4, 1.1); } .chartBarsWrap.chartBarsHorizontal .chartBars .bars .bar:after { font-size: 0.6em !important; margin-right: 20px; } .bars li .bar.greenBar { background-color: #6B8E23; background: radial-gradient(#99cb32, #6B8E23); } .bars li .bar.greenBarFlat { background-color: #6B8E23; } .bars li .bar.blueBar { background-color: #49E; background: radial-gradient(#8abff4, #49E); } .bars li .bar.blueBarFlat { background-color: #49E; } .bars li .bar.orangeBar { background-color: orange; background: radial-gradient(#ffc04d, #FFA500); } .bars li .bar.orangeBarFlat { background-color: orange; } .bars li .bar.purpleBar { background-color: #6e46af; background: radial-gradient(#9778c9, #6e46af); } .bars li .bar.purpleBarFlat { background-color: #6e46af; } .box-piesite { text-align: center; font-size: 22px; } .piesite { position: relative; width: 1em; height: 1em; font-size: 10em; cursor: default; } .piesite .percent { position: absolute; top: 1.1em; left: 0.1em; width: 100%; font-size: 0.3em; text-align: center; z-index: 2; } .piesite .percent .symbol { font-size: 0.5em; vertical-align: top; opacity: 0.5; } .piesite > #slice { position: absolute; width: 1em; height: 1em; clip: rect(0px, 1em, 1em, 0.5em); } .piesite > #slice.gt50 { clip: rect(auto, auto, auto, auto); } .piesite > #slice > .pie { position: absolute; border: 0.1em solid #444; width: 1em; height: 1em; clip: rect(0em, 0.5em, 1em, 0em); border-radius: 0.5em; } li.design .piesite > #slice > .pie { border-color: #49E; } li.usability .piesite > #slice > .pie { border-color: #FFA500; } li.creativity .piesite > #slice > .pie { border-color: #6B8E23; } .piesite > #slice > .pie.fill { transform: rotate(180deg) !important; } .piesite.fill > .percent { display: none; } .piesite:after { content: ''; display: block; position: absolute; top: 0.1em; left: 0.1em; width: 0.8em; height: 0.8em; background: #30303A; border-radius: 100%; z-index: 1; } .piesite:before { content: ''; display: block; position: absolute; width: 1em; height: 1em; border-radius: 0.5em; opacity: 0.5; z-index: 0; } .piesite:before { background: rgba(255, 255, 255, 0.1); } .box-piesite ul { padding: 0; } .box-piesite ul li { display: inline-block; margin: 10px 20px; } .chartBarsHorizontal .chartBars .bars { flex-direction: column; } @media screen and (min-width: 600px) { .bar:before { font-size: 2em !important; } .chartBars3 .bar:before { font-size: 1.5em !important; } } .tooltip > .tooltipContent { display: block; position: absolute; background: none repeat scroll 0 0 #222; color: #F0B015; font-family: 'Helvetica'; font-size: 0.8em; font-weight: normal; line-height: 1.5em; padding: 16px 15px; min-width: 200px; max-width: 500px; top: 0; left: 50%; transform: translate(-50%, -110%); margin-left: 0; opacity: 0; filter: alpha(opacity=0); text-align: center; z-index: 2; text-transform: none; transition: all 0.3s ease-in-out; } .tooltip:hover > .tooltipContent { opacity: 1; filter: alpha(opacity=100); z-index: 99; transform: translate(-50%, -130%); transition: all 0.2s ease; } .tooltip .tooltipContent:after { border-color: #222 rgba(0, 0, 0, 0); border-style: solid; border-width: 15px 15px 0; bottom: -15px; content: ""; display: block; left: 50%; transform: translate(-50%, 0); position: absolute; width: 0; } * { box-sizing: border-box; } body { background: #30303A; font-family: 'Quicksand', sans-serif; color: #ddd; } h1, h2, h3 { text-align: center; } h1 { margin: 100px auto 0; color: #F0B015; } h2 { margin: 20px auto 0; font-size: 1.2em; } p { margin: 5vw auto; padding: 0 5vw; line-height: 2em; max-width: 60em; } </style> </head> <body> <!-- partial:index.partial.html --> <h1>Animated Graphs</h1> <h2>Scroll Triggered, Responsive, Data-driven</h2> <p> </p> <div class="chartBarsWrap"> <div class="chartBars chartBars1"> <ul class="numbers"> <li><span>100%</span></li> <li><span>80%</span></li> <li><span>60%</span></li> <li><span>40%</span></li> <li><span>20%</span></li> <li><span>0%</span></li> </ul> <ul class="bars"> <li> <span class="tooltip"> <span class="tooltipContent">Very important info that you should read!</span> <div data-percentage="52" class="bar greenBar trigger"></div> </span> <b>Alpha</b> </li> <li> <span class="tooltip"> <span class="tooltipContent">This one is trending well.</span> <div data-percentage="83" class="bar blueBar trigger"></div> </span> <b>Beta</b> </li> <li> <span class="tooltip"> <span class="tooltipContent">I like cheese!</span> <div data-percentage="94" class="bar orangeBar trigger"></div> </span> <b>Gamma</b> </li> <li> <span class="tooltip"> <span class="tooltipContent">Monkey's are funny!</span> <div data-percentage="64" class="bar purpleBar trigger"></div> </span> <b>Delta</b> </li> </ul> </div> </div> <p>Bacon ipsum do lor amet porchetta jowl jerky short loin, tri-tip flank c ow. Strip steak meat ball picanha t-bone pork loin filet mignon, pancetta jerky kielba sa sirloin ball t ip hamburger turkey pork belly ham hock. Chicken swine tail s pa re ribs,pork loin tongue picanha strip steak ribeye pancetta bresaola landjaeger flank ham shank. Picanha t-bone meatball, corned beef tail tri-tip flank capicola alcatra spare ribs. Flank tail pork loin pork belly sirloin tri-tip.</p> <h3>Responsive? Yep.</h3> <div class="chartBarsWrap"> <div class="chartBars chartBars2"> <ul class="numbers"> <li><span>100%</span></li> <li><span>80%</span></li> <li><span>60%</span></li> <li><span>40%</span></li> <li><span>20%</span></li> <li><span>0%</span></li> </ul> <ul class="bars"> <li> <div data-percentage="92" class="bar greenBar trigger"></div><b>Alpha</b></li> <li> <div data-percentage="33" class="bar orangeBar trigger"></div><b>Beta</b></li> <li> <div data-percentage="64" class="bar blueBar trigger"></div><b>Gamma</b></li> <li> <div data-percentage="44" class="bar purpleBar trigger"></div> <b>Delta</b></li> </ul> </div> </div> <p>Bacon ipsum do lor amet porchetta jowl jerky short loin, tri-tip flank c ow. Strip steak meat ball picanha t-bone pork loin filet mignon, pancetta jerky kielba sa sirloin ball t ip hamburger turkey pork belly ham hock. Chicken swine tail s pa re ribs, .........完整代码请登录后点击上方下载按钮下载查看
网友评论0