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

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

这样的进度条已经很美观了,但如果能让它动起来,那就更棒了~
所以奋斗了两个晚上,作为一只前端咸鱼把看了下之前没有接触过的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>  

animation详细解释原帖
http://www.tangbc.com/blog/#frontends/215

以上。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值