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,
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0