初学者--滚动的进度条（一）----在路上（2）

-------------------------------------------------------------------------------------------------------------------------------------------------------

今天整理一下有关滚动的进度条，希望对努力的你有所帮助

个人觉得可以有很多种写法，就先在这里留下两种简单方法。下面所说的滚动条是滚动的进度条简写。

1：动画方法（背景定位）

    先给进度条设置样式，在设置背景大小的时候，要注意这里设置的大小要和滚动条的长度     是倍数关系  background-size:*px *px；

   （背景线性倾斜）background-image:linear-gradient(某deg,个颜色所占比例）

    对滚动条动画进行线性无限执行 linear infinite；

    transition: all 1s；当前元素只要有“属性”发生变化时，可以平滑的进行过渡

      注：这种方法背景颜色没有过渡效果

so，来个小例子：

.gdt{

    width: 1000px;
    height: 50px;
    background: #000;
    background-size: 50px 50px;
    background-image:linear-gradient(135deg,#900 25%,
    transparent 25%,
    transparent 50%,
    #900 50%,
    #900 75%,
    transparent 75%,
    transparent 100%
    );
    animation: animation名 1s  linear infinite;
}

@keyframes animation名 { 

 

     from{  

        background-position:水平px 垂直px ;

        }

        to{

       background-position:水平px垂直px; }

       }

2.第二种方法就要涉及到JS，但也是对其进行背景定位

还要用到定时器，以达到滚动条无限执行，但背景定位写法格式与动画不同，但第一个值仍然是水平方向，第二个值为垂直方向。

so，来点干货：

<script>

    var ii=$(".gdt");
    var  i=0;
    setInterval(fn,1);
    function fn() {
        i-=1;（+=与-=代表滚动条的背景滚动方向，+=向右滚动，-=向左）
        ii.css({"backgroundPosition":i+"px"+" "+"0px"});
    }

</script>

-------------------------------------------------------------------------------------------------------------------------------