欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > css3案例分享 >

Css3如何实现进度条?Css3中进度条的实现方法介绍

发布时间:2019-05-24  编辑:杨雨个人博客网站   点击:   

进度条在网页中经常会被用到,像是上传、下载的这些进程,都是进度条的形式显示出来的,接下来这篇文章就给大家分享一下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中进度条的实例代码:

<div class="progress">
    <!--进度条-->
    <div class="loader-container"></div>
</div>
<!--Css3 实现。 animation 动画控制--> 
    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进度条实现效果如下:

2345截图20181019135749.png

以上就是本篇文章的全部内容了,关于上述用到的各种Css3的属性大家可以参考Css3学习手册进一步了解。 本文地址:http://itbyc.com/web/css3/20531.html
转载请注明出处。

分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1