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

插件特效

2026-07-26 04:38 4 次浏览 • 0 次下载 1.3KB

插件描述：自己写的利用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>';