持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第10天，点击查看活动详情

前言

最近在研究css动画，所以更文也是这方面居多。今就来用css写一个加载动吧。先来简单的描述这个动画，看下图，这个动画下过就是，中间圆圈保持不动，外层三个弧度按照自己的规则旋转，使之有加载的感觉。

话不多说，直接代码实现吧。

先来看看页面结构。显而易见，box就是圆圈，三个line就是三条弧。

<div class="box">
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="line3"></div>
</div>

先写点基本样式，将静态页面勾勒出来。

body {
    width: 1400px;
    height: 900px;
    background-color: #000;
}

.box {
    width: 70px;
    height: 70px;
    background-color: #007750;
    position: fixed;
    left: 50%;
    top: 50%;
    border-radius: 70px;
}

.box .line1 {
    width: 80px;
    height: 80px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -42px 0 0 -42px;
    border: 2px solid #fff;
    border-radius: 80px 80px 80px 80px;
    border-right-color: transparent;
    border-top-color: transparent;
}

.box .line2 {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -52px 0 0 -52px;
    border: 2px solid #fff;
    border-radius: 100px 100px 100px 100px;
    border-right-color: transparent;
    border-left-color: transparent;
}

.box .line3 {
    width: 120px;
    height: 120px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -62px 0 0 -62px;
    border: 2px solid #fff;
    border-radius: 120px 120px 120px 120px;
    border-right-color: transparent;
}

这时，页面结构就很清晰了，突击检查，怎样设置动画使之旋转呢?来看看你的想法是否和我一致。

@keyframes line1 {
    0% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(720deg);
    }

    50% {
        transform: rotate(1080deg);
    }

    75% {
        transform: rotate(1300deg);
    }

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

.box .line1 {
    animation: line1 15s ease-in-out 1s infinite alternate;
}

@keyframes line2 {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

.box .line2 {
    animation: line2 3s ease-in-out infinite;
}


@keyframes line3 {
    0% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(720deg);
    }

    50% {
        transform: rotate(1080deg);
    }

    75% {
        transform: rotate(1300deg);
    }

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

.box .line3 {
    animation: line3 20s ease-in-out infinite;
}

为什么这样设计呢？首先，页面结构是三条弧度，所以，从效果上看，三条弧度保持不一致的变化是比较好的，其次呢，三条弧度的速度，也需要有一定的差别。这样给人的感觉上也比较舒适。大家可以设置相同的变化，不同的速度或者相同变化相同速度看一看，很别扭。

说了这么多，没有成品没有说服力。来看看完整代码的实现吧。

使用css实现一个加载动画

前言