欢迎光临
我们一直在努力

怎么用HTML5技术绘制动态柱形图,有源码最好.

怎么用HTML5技术绘制动态柱形图,有源码最好
<!doctypehtml>
<htmllang="en">
<head>
<metacharset="utf-8">
<title>Document</title>
<style>
body{overflow:hidden;}
.wrapper{
position:relative;
margin:1emauto;
padding:0;
width:13em;height:5em;
box-shadow:inset-1px-1px0black;
list-style:none;
background:linear-gradient(black2.5%,transparent1px),
linear-gradient(90deg,black2.5%,transparent1px);
background-size:1em1em;
font:2.5emVerdana,sans-serif;
}
.piece{
position:absolute;
right:0;bottom:0;
opacity:.85;
animation:ani4sinfinitelinearalternate;
}
.triangle{overflow:hidden;transform-origin:0100%;}
.piece:before{
position:absolute;
content:'';
}
.triangle:before{
width:inherit;height:inherit;
transform-origin:inherit;
}
.block{width:5em;height:1em;}
.block:before{height:1em;background:inherit;}
.triangle-big{
right:5em;
width:8em;height:3em;
transform:skewX(-69.444deg);/*-arctan(width/height)*/
animation-name:ani-triangle-big;
}
.triangle-big:before{
background:crimson;
transform:skewX(69.444deg);/*arctan(width/height)*/
}
.triangle-small{
bottom:3em;
width:5em;height:2em;
transform:skewX(-68.2deg);/*-arctan(width/height)*/
animation-name:ani-triangle-small;
}
.triangle-small:before{
background:mediumvioletred;
transform:skewX(68.2deg);/*arctan(width/height)*/
}
.block-high{
bottom:2em;
background:darkmagenta;
animation-name:ani-block-high;
}
.block-high:before{
top:100%;
width:2em;
}
.block-low{
background:darkviolet;
}
.block-low:before{
right:0;bottom:100%;
width:3em;
}

@keyframesani-triangle-big{
0%,25%{
right:5em;bottom:0;
transform:rotate(0deg)skewX(-69.444deg);
}
75%,100%{
right:0;bottom:2em;
transform:rotate(360deg)skewX(-69.444deg);
}
}
@keyframesani-triangle-small{
0%,25%{
right:0;bottom:3em;
transform:rotate(0deg)skewX(-68.2deg);
}
75%,100%{
right:8em;bottom:0;
transform:rotate(-360deg)skewX(-68.2deg);
}
}
@keyframesani-block-high{
0%,25%{right:0;bottom:2em;}
75%,100%{right:3em;bottom:1em;}
}
</style>
</head>
<body>
<ulclass='wrapper'>
<liclass='piecetriangletriangle-big'></li>
<liclass='piecetriangletriangle-small'></li>
<liclass='pieceblockblock-low'></li>
<liclass='pieceblockblock-high'></li>
</ul>
</body>
</html>

追问不行啊,运行出来成这种了

赞(0) 打赏
未经允许不得转载:乐白家电子游戏 » 怎么用HTML5技术绘制动态柱形图,有源码最好.
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

乐白家电子游戏

联系我们188-2609-4449