Loading图总结

1.background-position:表示背景的显示位置，比如：

background-position: 0% 100%;

这个表示左下角，第一个表示left,第二个表示top

 

2.background-size：表示背景显示的大小

background-size: 400%;

这个表示放大4倍

 

3.案例中的背景变化就是利用放大背景后动画改变background-position来完成的

 

4.关键帧：

 animation:gradient 5s;

@keyframes gradient{
    0%{
        background-position: 0% 100%;
    }
    50%{
        background-position: 100% 0%;
    }
    100%{
        background-position: 0% 100%;
    }
}

详解

 

5.关于transform居中问题：

{
    position: absolute;
    /*居中处理*/
    left: 50%;
    top:50%;
    -webkit-transform: translate3d(-50%,-50%,0);  
}

如果我们仅仅是设置程top和left为0，那么其实一个div容器是没有到页面的中间位置的，而这里距离中间位置的距离恰好是这个div容器的宽度和高度的一半，所以我们这里将translate(-50%,-50%,0)，这样就实现了这个盒子的居中