css3 linear-gradient实现页面加载进度条效果

最终效果图：

　　

html结构：

<div>
    <p class="p1">
        <span></span>
    </p>
    <p class="p2">
        <span></span>
    </p>
    <p class="p3">
        <span></span>
    </p>
    <p class="p4">
        <span></span>
    </p>
</div>

css样式：

div{
    position: relative;
    width: 253px;
    height: 9px;
    margin: 100px auto;
    overflow: hidden;
}
p{
    position: absolute;
    top: 0px;
    width: 100%;
    height: 9px;
    overflow: hidden;
}
p span{
    position: absolute;
    left: -11px;
    top:0px;
    width: 280px;
    height: 100%;
    background: linear-gradient(45deg,#1a6adf 25%,#578cdf 25%,#578cdf 50%,#1a6adf 50%,#1a6adf 75%,#578cdf 75%,#578cdf 100%);
    background-size: 28px 28px;
}
.p1{
    left: 0px;
    animation: m1 8s linear infinite;
}
.p2{
    left: -253px;
    animation: m2 8s linear infinite;
}
.p3{
    left: -506px;
    animation: m3 8s linear infinite;
}
.p4{
    left: -759px;
    animation: m4 8s linear infinite;
}
p.p2 span,p.p4 span{
    background-size: 28px 28px;
}
@keyframes m1{
    0%{
        left: 0px;
        z-index: 2;
    }
    25%{
        left: 253px;
        z-index: 1;
    }
    50%{
        left: -506px;
        z-index: 1;
    }
    75%{
        left: -253px;
        z-index: 2;
    }
    100%{
        left: 0px;
        z-index: 2;
    }
}
@keyframes m2{
    0%{
        left: -253px;
        z-index: 2;
    }
    25%{
        left: 0px;
        z-index: 2;
    }
    50%{
        left: 253px;
        z-index: 1;
    }
    75%{
        left: -506px;
        z-index: 1;
    }
    100%{
        left: -253px;
        z-index: 1;
    }
}
@keyframes m3{
    0%{
        left: -506px;
        z-index: 1;
    }
    25%{
        left: -253px;
        z-index: 2;
    }
    50%{
        left: 0px;
        z-index: 2;
    }
    75%{
        left: 253px;
        z-index: 1;
    }
    100%{
        left: -506px;
        z-index: 1;
    }
}
@keyframes m4{
    0%{
        left: -759px;
        z-index: 1;
    }
    25%{
        left: -506px;
        z-index: 1;
    }
    50%{
        left: -253px;
        z-index: 2;
    }
    75%{
        left: 0px;
        z-index: 2;
    }
    100%{
        left: 253px;
        z-index: 2;
    }
}

最初的时候实现页面加载进度条是公司的设计给的gif图，后来发现一个问题就是当我的页面样式和html都加载完成的时候图片没有加载出来，虽然只是很短的时间，但是不例如用户体验，这个也仅仅是页面初始化加载的时候会出现图片加载的问题，因此我想用css来实现那么就不会出现资源加载不统一的问题。那么我们来看一下他的实现原理：

首先我们给一个div来定义整个容器的大小，分别定义四个p来实现四个不同的条纹，在后期我们还要对每一段条纹进行截取所以每个p元素里边再嵌套一个span。我们用四个条纹实现看似一个条纹段在旋转的效果其实就是让条纹从左像右移动，既然是移动那么四个条纹的前后一定是衔接的。

这个是第一个条纹没有做限制的效果图，前后末端是没有规律可寻的，那么怎么让两条相同的条纹衔接起来看起来像是一条条纹呢，通过p和span我们对每条条纹进行截取：前端的截取到第一条深蓝纹路左上角为基准深蓝的1/2，末端截取到最后一条深蓝以右下角为基准深蓝宽度的1/2。截取后的效果如图，这样我把两个相同的条纹放在一个能够清楚的看到前后的衔接。这样四个条纹通过animation进行移动，思路类似于banner图轮转。当然菜菜一枚，有更好的方法多多交流~

 

转载于:https://www.cnblogs.com/lovelyRabbitBaby/p/6245739.html