近期又看了一些CSS项目，对CSS的理解更加深入一层，也发现了CSS的巨大潜力，可以帮助我们完成很多不可思议的特效，只要我们有想象力，CSS都可以办得到。

下面我们尝试一个比较有特色的加载动画
我们可以使用CSS实现一个小方块爬坡的加载动画

方块上坡

准备动画容器

首先准备一个div盒子存放这个加载动画，背景颜色最好是黑色。

    .jiazai-container{
        width: 100%;
        height: 1000px;
        display: flex;
        background-color: #111;
        justify-content: center;
        align-items: center;
    }

使用flex的justify-content: center;和align-items: center;使动画在盒子中央。

方块容器

在动画容器里面，我们放一个方块容器，用来放置动画的核心小方块，同时在这个容器上面添加一些样式，这样我们可以使整个动画更加美观

    .box-container{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

动画方块

下面是我们的主角动画小方块，准备一个正方形小方块，添加一些样式，我们给他安排一个背景颜色，再加上盒子阴影，可以实现很好的美观效果。

    .jiazai-box{
        height: 300px;
        width: 300px;
        background-color: aqua;
        box-shadow:0 0 150px 30px rgb(0, 255, 247);
    }

动画

我们要做的是一个方块爬坡的效果，首先我们先制作一个旋转动画加给小方块

    @keyframes xuanzhuan {
        0%{

        }
        100%{
            transform: rotate(90deg);
        }
    }

小方块默认的旋转中心是方块中心，我们将旋转点放在右下角，可以实现位移旋转效果

    .jiazai-box{
        height: 300px;
        width: 300px;
        background-color: aqua;
        box-shadow:0 0 150px 30px rgb(0, 255, 247);
        transform-origin: bottom right;
        animation: xuanzhuan 1s linear infinite;
    }

小方块不断位移会超出方块容器，所以我们给方块容器也准备一个动画，同时加一个坡度，使方块容器与小方块一同位移，可以实现小方块原地旋转加载的效果

    @keyframes weiyi {
        0%{
            transform: rotate(-30deg);
        }
        100%{
            transform:rotate(-30deg) translate(-300px);
        }
    }

位移的大小是方块的边长，然后再给小方块的容器加一个倒影的效果，使动画更好看

    .box-container{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        -webkit-box-reflect: below  1px linear-gradient(transparent,#0004);
        animation: weiyi 1s linear infinite;
    }

最终效果