如何利用css3实现进度条效果及动态添加百分比-创新互联
这篇文章主要介绍了如何利用css3实现进度条效果及动态添加百分比，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
成都创新互联主要从事做网站、
网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务象州,10余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575
代码：
Document
*{margin: 0;padding: 0}
.box{width: 100px;height: 10px;border-radius: 10px;background: #999;margin: 100px auto;border: 1px solid #ff6780;}
.child{position: relative;height:100%;border-radius:inherit;}
.process-animate{background: #ff6780;position: absolute;left: 0;top: 0;bottom: 0;border-radius:inherit;
animation: process 1s linear forwards ;
}
@keyframes process
{
0%{
left:0;right:100%;
}
20%{
right:80%
}
40%{
right:60%;
}
60%{right:40%;}
80%{right:20%;}
100%{right:0;}
}
// child的百分比就是进度条的占比效果
