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

前言：

掘友们，大家好！小编在利用空闲的时间内做了一个简易的Loading图，主要是通过了CSS设置了动画。废话不多说，大家看下边的示例。

示例：

代码实现：

背景图实现

星际背景小编是简单的使用canvas画布绘制了，大家可以看小编上一篇文章：原生js实现绘制canvas博客背景，巨简单！（星际背景图）

CSS

通过 @keyframes 规则，能够创建动画。原理是将一套 CSS 样式逐渐变化为另一套样式。 在动画过程中，您能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
body,
html {
    width: 100%;
    height: 100%;
}
#box {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background-color: #030B0E;
}
.loading {
    width: 200px;
    z-index: 99999;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: bounce-up 1.4s linear infinite;
}
.item1 {
    display: inline-block;
    width: 30px;
    height: 1px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 47%;
    animation: bounce-next1 .5s linear infinite;
}
.img {
    width: 100%;
    z-index: 99999;
}
.item2 {
    display: inline-block;
    width: 30px;
    height: 1px;
    background-color: #fff;
    position: absolute;
    top: 45%;
    left: 47%;
    animation: bounce-next1 .4s linear infinite;
}
.item3 {
    display: inline-block;
    width: 30px;
    height: 1px;
    background-color: #fff;
    position: absolute;
    top: 55%;
    left: 47%;
    animation: bounce-next3 .5s linear infinite;
}
.item4 {
    display: inline-block;
    width: 200px;
    height: 1px;
    background-color: #fff;
    position: absolute;
    top: 25%;
    right: -10%;
    animation: bounce-box1 1s linear infinite;
}
.item5 {
    display: inline-block;
    width: 150px;
    height: 1px;
    background-color: #fff;
    position: absolute;
    bottom: 25%;
    right: -10%;
    animation: bounce-box2 1.3s linear infinite;
}
.item6 {
    display: inline-block;
    width: 200px;
    height: 1px;
    background-color: #fff;
    position: absolute;
    bottom: 15%;
    right: -100%;
    animation: bounce-box3 1s linear infinite;
}
.item7 {
    display: inline-block;
    width: 150px;
    height: 1px;
    background-color: #fff;
    position: absolute;
    top: 10%;
    right: -100%;
    animation: bounce-box3 .7s linear infinite;
}
@-webkit-keyframes bounce-box1 {
    0% {
        left: 200%;
    }
    50% {
        left: 35%;
    }
    100% {
        left: -100%;
    }
}
@-webkit-keyframes bounce-box2 {
    0% {
        left: 150%;
    }
    50% {
        left: 35%;
    }
    100% {
        left: -50%;
    }
}
@-webkit-keyframes bounce-box3 {
    0% {
        left: 100%;
    }
    50% {
        left: 50%;
    }
    100% {
        left: -20%;
    }
}
@-webkit-keyframes bounce-next1 {
    10% {
        left: 45%;
        background-color: #fff;
    }
    50% {
        left: 35%;
        background-color: #fff;
    }
    100% {
        left: 20%;
        background-color: #030B0E;
    }
}
@-webkit-keyframes bounce-next3 {
    10% {
        left: 45%;
        background-color: #fff;
    }
    50% {
        left: 25%;
        background-color: #fff;
    }
    100% {
        left: 20%;
        background-color: #030B0E;
    }
}
@-webkit-keyframes bounce-next4 {
    10% {
        left: 45%;
        background-color: #fff;
    }
    50% {
        left: 25%;
        background-color: #fff;
    }
    100% {
        left: 20%;
        background-color: #030B0E;
    }
}
@-webkit-keyframes bounce-up {
    25% {
        top: 49%;
    }
    75% {
        top: 51%;
    }
}

HTML

<div id="box">
    <canvas></canvas>
    <span class="item1"></span>
    <span class="item2"></span>
    <span class="item3"></span>
    <span class="item4"></span>
    <span class="item5"></span>
    <span class="item6"></span>
    <span class="item7"></span>
    <div class="loading">
        <img class="img"
            src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9d8c5ca92ad840b7affc56b300d737ee~tplv-k3u1fbpfcp-watermark.image"
            alt="">
    </div>
</div>

JS

此处JS搬用了canvas绘制背景图，可以阅读小编的上篇文章原生js实现绘制canvas博客背景，巨简单！（星际背景图）