利用css3动画动态渲染多条数据

 查看演示  website  立即下载

更新时间：2020-04-19 21:36:29

直接用浏览器打开运行即可看到效果；

秉承着插件拿来就用的原则，我一直是喂食到嘴边！

其中柱状图的文字可以通过以下样式调整位置

.skill2 li em:first-child {
       position: absolute;
       top: -15px;
       left: 0;
   }
.skill2 li em:last-child {
       position: absolute;
       top: -15px;
       right: 0;
}

第一步构建动态thml（构建的html可以自行增减）

_html += '<li>';
_html += '<em>'+listdata[i]['data1']+'</em>';
_html += '<div ><span ></span></div>';
_html += '<em>'+listdata[i]['data2']+'%</em>';
_html += '</li>';

PREVIOUS:
NEXT:
移动端拍照截图
jQuery web网页录音