如何用CSS制作酷炫的进度条和柱状图效果？

本文共计784个文字，预计阅读时间需要4分钟。

题目有点标新立异，先来个图嵌入一下内容。

怎么样，是不是有点心动了？完全用CSS+Div打造。

再看看，简单又漂亮的是不是也可以呢？

下面看看代码是怎么样的：

代码1:css.graph { width: 100%; height: 300px; background-color: #f0f0f0; position: relative;}

.graph::before { content: '2 posit'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; color: #333;}

题目有点标题党了，先来个图弥补一下。

怎么样，是不是有点心动了，完全CSS+Div打造。再看一下简单而又漂亮的

是不是也还可以呢？下面看下代码是怎样的

css：

代码 1.graph{
2position:relative;
3width:200px;
4border:1pxsolid#B1D632;
5padding:2px;
6margin-bottom:.5em;
7}
8.graph.bar{
9display:block;
10position:relative;
11background:#B1D632;
12text-align:center;
13color:#333;
14height:2em;
15line-height:2em;
16}
17.graph.barspan{position:absolute;left:1em;}

HTML：

代码 1<h3>简单进度条</h3>
2<divclass="graph">
3<strongclass="bar"style="width:54%;"><span>54%</span></strong>
4</div>
5<divclass="graph">
6<strongclass="bar"style="width:8%;"><span>8%</span></strong>
7</div>
8

只要改变bar的width就可以随意改变进度条的长度，简单易用吧。

再看上面复杂的代码又是怎么实现的

CSS：

代码 1/*复杂进度条*/
2dl{
3margin:0;
4padding:0;
5}
6dt{
7position:relative;
8clear:both;
9display:block;
10float:left;
11width:104px;
12height:20px;
13line-height:20px;
14margin-right:17px;
15font-size:.75em;
16text-align:right;
17}
18dd{
19position:relative;
20display:block;
21float:left;
22width:197px;
23height:20px;
24margin:0015px;
25background:url("g_colorbar.jpg");
26}
27*htmldd{float:none;}/*此处为IEhack*/
28
29dddiv{
30position:relative;
31background:url("g_colorbar2.jpg");
32height:20px;
33width:75%;
34text-align:right;
35}
36dddivstrong{
37position:absolute;
38right:-5px;
39top:-2px;
40display:block;
41background:url("g_marker.gif");
42height:24px;
43width:9px;
44text-align:left;
45text-indent:-9999px;
46overflow:hidden;
47}
48

HTML:

代码 1<h3>复杂进度条</h3>
2<dl>
3<dt>喜欢自由互联</dt>
4<dd>
5<divstyle="width:25%;"><strong>25%</strong></div>
6</dd>
7<dt>很喜欢</dt>
8<dd>
9<divstyle="width:55%;"><strong>55%</strong></div>
10</dd>
11<dt>超级喜欢</dt>
12<dd>
13<divstyle="width:75%;"><strong>75%</strong></div>
14</dd>
15</dl>
16

CSS中用到了几个图片在示例代码下载中有。使用方法同样简单。

再看一下柱状图的效果：

我觉得这个是最炫的（偷笑一个^_^）其实最主要的地方在图片上，代码就不贴了，有兴趣的请下载示例代码。

本文参考：

applestooranges.com/goodies/css-for-bar-graphs/

varhi.com/?p=2886