纯css实现三维柱状图悬浮销量统计效果-html代码-BFW代码库

纯css实现三维柱状图悬浮销量统计效果

代码语言：html

所属分类：悬停

代码描述：纯css实现三维柱状图悬浮销量统计效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
<style>


/* BASIC RESET */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,macbook,p,blockquote,fieldset,input{margin:0; padding:0;}

/* HTML ELEMENTS */
body { background: -moz-radial-gradient(#364D58,#000); background: -webkit-gradient(radial, center center,10,center center,1000, from(#364D58), to(#000)); color:#555; background-color:#151f23; }
h1 { font: bold 50px Helvetica, Arial, Sans-serif; text-align: center; color: #eee; text-shadow: 0px 2px 6px #333; }
h1 small{ font-size: 20px; text-transform:uppercase; letter-spacing: 14px; display: block; color: #ccc; margin-top:10px; }
h2 a { display: block; text-decoration: none; margin: 0 0 30px 0; font: italic 40px Georgia, Times, Serif;  text-align: center; color: #bfe1f1; text-shadow: 0px 2px 6px #333; }
h2 a:hover { color: #90bcd0; }

/* COMMON CLASSES */
.break { clear:both; }

/* WRAPPER */
#wrapper { width:800px; margin:40px auto; }

/* CONTENT */
#content { }
#content h2 { font: bold 30px Helvetica, Arial, Sans-serif; color:#eee; text-shadow: 0px 2px 6px #333; margin-left:400px; padding-top:20px; }

/* BAR CHART */
#bar { list-style:none;  }
#bar li { }

/* Last bottom should have a shadow */
#bar li div.bottom { -moz-box-shadow: 0 10px 10px hsla(0,0%,0%,.2); -webkit-b.........完整代码请登录后点击上方下载按钮下载查看