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

所属分类：UI,其他-图表,动画效果

14327 157 查看评论 (1)

分享到微信朋友圈

查看演示立即下载

插件描述：自己写的利用css3动态渲染横向柱状图，样式优美，可定制型超强，随便玩儿

更新时间：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>';

移动端拍照截图

jQuery web网页录音