我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！
阅读本文的必要知识
贝塞尔曲线
一个标准的3次贝塞尔曲线需要
4个点：起始点、终止点（也称锚点）以及两个相互分离的中间点。
三次贝塞尔曲线指令：
C x1 y1, x2 y2, x y两个控制点(x1,y1)和(x2,y2)，(x,y)代表曲线的终点。字母C表示特定动作与行为，这里需要大写，表示标准三次方贝塞尔曲线。 css里有一个专门的属性，叫做cubic-bezier, 直译为“立方-贝塞尔”，实际上就是指的标准三次方贝塞尔曲线。 类似本文中，animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;(0.250,0)表示红色起点锚点， (0.705, 1)表示绿色终点锚点，有人可能要问了，贝塞尔曲线不是四个点吗，怎么才传了俩点，那是因为CSS3动画贝塞尔曲线的起点和终点已经固定了，分别是
(0,0)和(1,1)
正餐开始
了解完了三次贝塞尔曲线，那就正式开始制作和弦Loading， 首先，我们来对动画做一个基础的拆解，实际上，这个和弦是由9套互相独立的元素组成的，颜色做了色阶渐变而已。
假如我们一开始 ，只写一个，然后写动画，是什么样的表现?
<div class="wrapper">
<div class="line line1">
<span class="circle circle-top"></span>
<div class="dotted">
<span class="dot dot-top"></span>
<span class="dot dot-middle-top"></span>
<span class="dot dot-middle-bottom"></span>
<span class="dot dot-bottom"></span>
</div>
<span class="circle circle-bottom"></span>
</div>
</div>
.wrapper{
position: absolute;
float: left;
margin: 140px 100px;
}
.line{
position: absolute;
top: 0px;
width: 2px;
height: 8px;
background-color: red;
}
.circle{
position: absolute;
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: blue;
}
.circle-top{
top: 0px;
left: -3.5px;
}
.circle-bottom{
bottom: 0px;
left: -3.5px;
}
.dot{
position: absolute;
display: block;
width: 4px;
height: 4px;
border-radius: 50%;
left: -1.5px;
}
.line1{
margin-left: 0px;
background-color: #2410CB;
-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
}
.line1 > span{
background-color: #D4141E;
}
.line1 > .dotted > .dot{
background-color: #D4141E;
}
.line1 > .dotted > .dot-top{
top: 0px;
-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
}
.line1 > .dotted > .dot-bottom{
bottom: 0px;
-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
}
.line1 > .dotted > .dot-middle-top{
top: 0px;
-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
}
.line1 > .dotted > .dot-middle-bottom{
bottom: 0px;
-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
}
@-webkit-keyframes line{
0%{height: 4px; top: 0px; left: 0px; -webkit-transform: rotate(-65deg)}
10%{height: 220px; top: -110px; left: 15px;}
45%{height: 200px; top: -100px; left: 25px;}
70%{height: 8px; top: 0px; left: 25px; -webkit-transform: rotate(0deg);}
100%{height: 8px; top: 0px; left: 15px; -webkit-transform: rotate(0deg);}
}
@-webkit-keyframes dot-top{
0%{top: -30px}
10%{top: -30px;}
45%{top: -25px;}
60%{top: 0px;}
100%{top: 0px;}
}
@-webkit-keyframes dot-bottom{
0%{bottom: -30px}
10%{bottom: -30px;}
45%{bottom: -25px;}
60%{bottom: 0px;}
100%{bottom: 0px;}
}
@-webkit-keyframes dot-middle-top{
0%{}
10%{}
45%{top: 98px;}
70%{top: -50px;}
85%{top: 0px;}
100%{top: 0px;}
}
@-webkit-keyframes dot-middle-bottom{
0%{}
10%{}
45%{bottom: 98px;}
70%{bottom: -50px;}
85%{bottom: 0px;}
100%{bottom: 0px;}
}
@keyframes line{
0%{height: 4px; top: 0px; left: 0px; transform: rotate(-65deg)}
10%{height: 220px; top: -110px; left: 15px;}
45%{height: 200px; top: -100px; left: 25px;}
70%{height: 8px; top: 0px; left: 25px; transform: rotate(0deg);}
100%{height: 8px; top: 0px; left: 15px; transform: rotate(0deg);}
}
@keyframes dot-top{
0%{top: -30px}
10%{top: -30px;}
45%{top: -25px;}
60%{top: 0px;}
100%{top: 0px;}
}
@keyframes dot-bottom{
0%{bottom: -30px}
10%{bottom: -30px;}
45%{bottom: -25px;}
60%{bottom: 0px;}
100%{bottom: 0px;}
}
@keyframes dot-middle-top{
0%{}
10%{}
45%{top: 78px;}
70%{top: -50px;}
85%{top: 0px;}
100%{top: 0px;}
}
@keyframes dot-middle-bottom{
0%{}
10%{}
45%{bottom: 78px;}
70%{bottom: -50px;}
85%{bottom: 0px;}
100%{bottom: 0px;}
}
它的效果如下
这里就是把运动，又重新按照位置进行了拆分，从上到下，容器line拉伸旋转，里面的各个点按照贝塞尔曲线进行位置变换即可
完整效果如下
