作者:倒转流年1990 | 来源:互联网 | 2020-08-09 05:40
进度条在网页中经常会被用到,像是上传、下载的这些进程,都是进度条的形式显示出来的,接下来这篇文章就给大家分享一下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学习手册进一步了解。
以上就是css3如何实现进度条?css3中进度条的实现方法介绍的详细内容,更多请关注 第一PHP社区 其它相关文章!