css3实现进度条的方法
小编给大家分享一下css3实现进度条的方法,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!
专注于为中小企业提供成都做网站、成都网站建设、成都外贸网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业扶绥免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上千企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
以前如果要实现一个进度条的效果,是需要利用javascript实现的,然而CSS3的出现,让我们现在能够在div里执行动画,添加梯度和彩色元素,下面我们就来具体看一看css3实现进度条的方法。
我们可以利用css3中animation动画控制来实现进度条的效果,下面来简单看一下animation的相关内容
语法:animation: name duration timing-function delay iteration-count direction;
参数:
animation-name:规定需要绑定到选择器的 keyframe 名称。。
animation-duration:规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function:规定动画的速度曲线。
animation-delay:规定在动画开始之前的延迟。
animation-iteration-count:规定动画应该播放的次数。
animation-direction:规定是否应该轮流反向播放动画。
接着我们来看一个简单css3中进度条的实例代码:
html,body{ margin: 0; height: 100%; width: 100%; overflow: hidden; } .loader-container { height: 100%; width: 55%; background: -webkit-linear-gradient(left,#f8dc4b,#d95a3d); border-radius:7px; box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.2); animation: loader 1s linear; } .progress{ width: 70%; height: 15px; border-radius:7px; margin-left: 15%; margin-top: 30%; background: -webkit-linear-gradient(left,#e4e3e4,#e4e5e4); } @keyframes loader { 0% { width: 0%; } 100% { width: 55%; } }
css3进度条实现效果如下:
看完了这篇文章,相信你对css3实现进度条的方法有了一定的了解,想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
文章名称:css3实现进度条的方法
当前URL:http://scyanting.com/article/isgpph.html