细说css3的动画（3）统计条形图demo
纯css3手工绘制动画形式的统计条形图demo，代码我已经做成动态的了，如下：
<html>
<head>
<title>example</title>
<style>
/*外层模型*/
.example .border {
margin:30px auto;
padding-left:30px;
padding-top:30px;
padding-bottom:30px;
width:300px;
height:200px;
border: 1px solid black;
}
/*纵坐标箭头*/
.arrow_lmk {
transform:translate(-6px,-380px);
width:1px;
border-style: solid;
border-top-width: 0;
border-right-width: 6px;
border-bottom-width: 10px;
border-left-width: 6px;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: #000000;
border-left-color: transparent;
}
/*横坐标箭头*/
.arrow_bmk {
transform:translate(260px,-34px);
width:1px;
border-style: solid;
border-top-width: 6px;
border-right-width: 0;
border-bottom-width: 6px;
border-left-width: 10px;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: #000000;
}
/*x轴标尺文字最外层盒子*/
.example .border .cartogram_bmk {
text-align:center;
width:265px;
}
/*x轴标尺单个盒子*/
.example .border .cartogram_bmk .cartogram_bmk_sub {
cursor:pointer;
margin-top:4px;
padding-top:4px;
display:inline-block;
width:26px;
height:20px;
font-size:10px;
border-radius: 1em;
}
/*y轴标尺文字最外层盒子*/
.example .border .cartogram_lmk {
text-align:center;
transform:translate(-26px,-195px);
width:26px;
height:150px;
}
/*y轴标尺单个盒子*/
.example .border .cartogram_lmk .cartogram_lmk_sub {
width:100%;
height:25%;
font-size:10px;
color:#000000;
border-bottom:1px solid #000000;
}
.example .border .cartogram_lmk .cartogram_lmk_sub:first-of-type {
border-top:1px solid #000000;
}
/*最外层坐标线盒子*/
.example .border .cartogram {
text-align:center;
/*横纵坐标线长度*/
width:260px;
height:180px;
border-bottom:1px solid #000000;
border-left:1px solid #000000;
}
/*每个统计条形图的盒子*/
.example .border .cartogram .cartogram_sub {
/*每个条形大小*/
width:26px;
height:150px;
/*条形图上下移动*/
transform:translateY(30px);
/*横向排列显示*/
display:inline-block;
text-align:center;
}
.example .border .cartogram .cartogram_sub:not(:last-of-type),.example .border .cartogram_bmk .cartogram_bmk_sub:not(:last-of-type) {
/*每个统计条间隔*/
margin-right:4px;
}
/*animation自动画*/
.example .border .cartogram .cartogram_sub_animation {
width:100%;
height:100%;
position: relative;
overflow: hidden;
}
.example .border .cartogram .cartogram_sub_animation:before {
content:"";
position: absolute;
right: 0;
bottom: 0;
top:50%;
background: #2098D1;
width: 80%;
border-radius: .8em .8em 0 0;
animation-duration: 1s;
animation-timing-function: ease;
animation-iteration-count: 1;
animation-fill-mode:forwards;
cursor:pointer;
}
/* 下标阴影动画 */
.example .border .cartogram_bmk .cartogram_bmk_sub {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.example .border .cartogram_bmk .cartogram_bmk_sub:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 0;
background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
/* W3C */
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform, opacity;
transition-property: transform, opacity;
}
.example .border .cartogram_bmk .cartogram_bmk_sub:hover, .example .border .cartogram_bmk .cartogram_bmk_sub:focus, .example .border .cartogram_bmk .cartogram_bmk_sub:active {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
/* move the element up by 5px */
}
.example .border .cartogram_bmk .cartogram_bmk_sub:hover:before, .example .border .cartogram_bmk .cartogram_bmk_sub:focus:before, .example .border .cartogram_bmk .cartogram_bmk_sub:active:before {
opacity: 1;
-webkit-transform: translateY(5px);
transform: translateY(5px);
/* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}
/* 统计条加宽动画 */
.example .border .cartogram .cartogram_sub_animation:before {
border-width:2px;
border-style:solid;
border-color: #FFFFFF #FFFFFF transparent #FFFFFF;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-property: border;
transition-property: border;
}
.example .border .cartogram .cartogram_sub_animation:hover:before {
border-color: #FFFFFF #FFFFFF transparent #FFFFFF;
}
</style>
</head>
<body>
<div class="text"></div>
<style>
</style>
<div class="example">
<div class="border">
<div class="cartogram"></div>
<div class="cartogram_bmk"></div>
<div class="arrow_bmk"></div>
<div class="cartogram_lmk"></div>
<div class="arrow_lmk"></div>
</div>
</div>
<script>
//创建图标dom
var example = function() {};
example.prototype = {
createDiv : function(cnt_x,cnt_y,cls) {
for(i=0;i<cnt_x;i++){
//创建统计条dom
var n = document.createElement('div');
n.setAttribute('class',cls+'_sub '+cls+'_sub_'+(i+1));
document.getElementsByClassName(cls)[0].appendChild(n);
var n1 = document.createElement('div');
n1.setAttribute('class',cls+'_sub_animation '+cls+'_sub_animation_'+(i+1));
n.appendChild(n1);
//创建x轴标尺dom
var m = document.createElement('div');
m.setAttribute('class',cls+'_bmk_sub '+cls+'_bmk_sub_'+(i+1));
document.getElementsByClassName(cls+"_bmk")[0].appendChild(m);
}
for(i=0;i<cnt_y;i++){
//创建y轴标尺dom
var m = document.createElement('div');
m.setAttribute('class',cls+'_lmk_sub '+cls+'_lmk_sub_'+(i+1));
document.getElementsByClassName(cls+"_lmk")[0].appendChild(m);
}
},
//创建伪类样式
setCssVal : function(t) {
s=document.createElement('style');
s.innerText=t;
document.body.appendChild(s);
},
//添加伪类样式key-to-value
addCssVal : function(styleid,selector,key,value) {
s=document.getElementById(styleid);
if(!s){
s=document.createElement('style');
s.setAttribute('id',styleid);
}
s.innerText+=selector+"{"+key+":"+value+";}";
document.body.appendChild(s);
},
//添加伪类样式string
addCssValText : function(styleid,text) {
s=document.getElementById(styleid);
if(!s){
s=document.createElement('style');
s.setAttribute('id',styleid);
}
s.innerText+=text;
document.body.appendChild(s);
}
}
var aaa = new example();
aaa.createDiv(8,4,'cartogram');
var data = {"anim1":0.2,"anim2":0.4,"anim3":0.7,"anim4":0.3,"anim5":0.8,"anim6":0.53,"anim7":0.66,"anim8":0.45};
var color = {"anim1":"#FF9797","anim2":"#DCB5FF","anim3":"#ACD6FF","anim4":"#BBFFBB","anim5":"#FFFFAA","anim6":"#FFBB77","anim7":"#CF9E9E","anim8":"#CDCD9A"};
var word = {"anim1":"a","anim2":"b","anim3":"c","anim4":"d","anim5":"e","anim6":"f","anim7":"g","anim8":"h"};
var style = "";
for(i=1;i<=8;i++){
style += ".example .border .cartogram .cartogram_sub_animation_"+i+":before {";
/*图形添加数字*/
style += "content:'"+(100-data["anim"+i]*100)+"';"
style += "font-size:10px;"
/*animation自动画 */
style += "animation-name: _cartogram_"+i+";"
style += "}";
style += "@keyframes _cartogram_"+i+"{from{top:50%;}to{top:"+data["anim"+i]*100+"%}}";
/*x轴标尺背景颜色 */
style += ".example .border .cartogram_bmk .cartogram_bmk_sub_"+i+" {";
style += "background-color:"+color["anim"+i]+";}";
/*x轴标尺添加文字 */
document.getElementsByClassName('cartogram_bmk_sub')[i-1].innerText = word['anim'+i];
/*y轴标尺添加文字 */
if(i<=4){
document.getElementsByClassName('cartogram_lmk_sub')[i-1].innerText = (100-25*(i-1))+"%";
}
/*hover动画*/
style += ".example .border .cartogram .cartogram_sub_animation_"+i+":hover:before {";
style += "border-color: "+color["anim"+i]+" "+color["anim"+i]+" transparent "+color["anim"+i]+";}";
}
aaa.addCssValText("anmi-color-top",style);
</script>
</body>
</html>
补充一句，关于动态修改伪类的样式，我一直查不到有什么更方便的办法，所以只能另创建一个<style>的dom节点，然后通过id找到它，并用innerText往这个节点写入或重写样式，不过还挺好用的，如果有什么新的方法希望兄弟们不吝赐教哈~~
