前端.如何让进度条样式动起来

最新推荐文章于 2024-07-19 15:32:49 发布

请叫我院士

最新推荐文章于 2024-07-19 15:32:49 发布

阅读量1.8k

点赞数

分类专栏：前端文章标签： css3 前端

本文链接：https://blog.csdn.net/qq_31515611/article/details/53073352

版权

前端专栏收录该内容

11 篇文章 1 订阅

订阅专栏

之前已经写过进度条的原理，是以自定义渐变为核心，

这样的进度条已经很美观了，但如果能让它动起来，那就更棒了~
所以奋斗了两个晚上，作为一只前端咸鱼把看了下之前没有接触过的CSS3，用捉鸡的智商理解之后
分享一下自己的理解，欢迎讨论欢迎指错，咸鱼不胜感激。

咸鱼看的让进度条动起来的方法，是通过CSS3的animation实现的，个人认为这是最简便的方法之一。
先介绍animation

animation基本用法是：

animation: name keeping-time animate-function delay times iteration final;

第一个参数：name (animation-name)：

动画的名字，即设定动画过程的名字，CSS3采用“关键帧 keyframes”来定义动画，方式形如：

@-webkit-keyframes name{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
 }

前缀-webkit-表示webkit内核浏览器（Chrome、Safari和变心的opera），以上代码定义了一个动画，名叫name，效果是使透明度从0变化到1,0%~100%为整个过程，当然也可以定义多段如：0%~20~50%~100%。

第二个参数：keeping-time (animation-duration)：

整个动画的持续时间，必须带上时间单位，s或者ms均可；

第三个参数：animate-function (animation-timing-function)：

运动方式（动画方式）的贝赛尔曲线，可取值为：ease、ease-in、ease-out、linear、ease-in-out、cubic-bezier(num1,num2,num3,num4)。

第四个参数：delay (animation-delay)：
动画延迟执行的时间，单位也是s或者ms，值得注意的是，即使延迟时间为0，也必须加上时间单位，如果写成直接写成0，在Chrome和Safari(webkit)下是没问题的，但是在FF(gecko)下无效。

第五个参数：times (animation-iteration-count)：
动画循环执行的次数，无单位，infinite为无限循环。

第六个参数：iteration (animation-direction)：
如果动画循环，循环的方式是：alternate(偶数次向前播放，奇数次向后播放)、normal(每次都向前播放)。

第七个参数：final (animation-fill-mode)：
动画的最后（达到100%）时的状态，取值有：backward（回到初始状态）、forwards（停在最终状态）、none、both。
每个参数也可以单独写，最后用的时候记得加浏览器前缀：

.classname{
    -webkit-animation:name 6s linear 0ms infinite normal forwards;
    -moz-animation:name 6s linear 0ms infinite normal forwards;
    -o-animation:name 6s linear 0ms infinite normal forwards;
    animation:name 6s linear 0ms infinite normal forwards;
}

将不带前缀的写在最后面好处是等到animation被所有浏览器认可，可以摈弃前缀的时候可以覆盖前面的样式。

核心animation看完理解之后，加个动画就不难了。
源码

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>linear-gradient</title>  
    <style type="text/css">  
    *{margin:0;padding:0;font-family:"微软雅黑";}  
    .progress-bar
   {
           margin: 2em 0;
           width: 200px;
           height: 10px;
           background-color:#ebebeb ;
           z-index: 0;
           border-radius:5px ;
   }
    .progress-bar span
    {
        height: 10px;
        display: block;/*伪元素after要求其必须为块级元素*/
        overflow: hidden;    
        z-index: 0;
    }

    .progress-bar.flexible span
    {
        background-color:#B667BD ;
    }
    .progress-bar span:after,.animate span
    {
        content: ""; /*伪属性after里必须加的，代表加的内容，这里为空*/
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image:-webkit-linear-gradient( -45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent ); ;
        background-image: -moz-linear-gradient( -45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent );
        /*webkit和moz是两大网页私有属性,-moz代表firefox浏览器私有属性,-webkit代表chrome、safari私有属性*/
        z-index: 1;
        color: #fff;
        background-size: 60px 60px; /*必须加,与后面ainimation动画move里100%时的位置相对应*/
        text-shadow:0 1px 0 rgba(0,0,0,.1);
        text-align: right;
        -moz-animation: move 2s linear infinite; /*动画move 时间2S 线性移动 无限循环*/
        -webkit-animation: move 2s linear infinite;
        border-radius:10px ; /*圆形边框*/

    }
    .animate  span:after {
    display: none;
    }
    @-webkit-keyframes move
    {
        0%
        {
            background-position:0px 0px ;
        }
        100%
        {
            background-position: 50px 50px;
        }
    }
    @-moz-keyframes move
    {
        0%
        {
            background-position:0 0 ;
        }
        100%
        {
            background-position: 60px 60px;
        }
    }


    </style>  
</head>  
<body>  
    <div class="progress-bar flexible animate"><span style="width: 75%;"></span> </div>

</body>  
</html>