纯 CSS 撸一个漂亮的加载

&::before,
&::after {
/* ... */
animation-timing-function: linear;
}
&::before {
/* ... */
animation: border-before 1.5s infinite;
animation-direction: alternate;
}
}
@keyframes border-before {
0% {
width: 0;
height: 0;
border-right-color: transparent;
}
24.99% {
border-right-color: transparent;
}
25% {
height: 0;
width: 100%;
border-right-color: black;
}
50%,
100% {
width: 100%;
height: 100%;
}
}

 

我们对 div.logo::after 重复相同的操作, 不要忘了调整时间和反转 width 和 height. 现在, 我们就有了最外层边框的整个动画.

方块动画

最后，我们一起来设置方块的动画

我们最大的挑战是无法连接 keyframes。因为，我们最终想要的动画中每个小方框都有一定的顺序， 为此， 我们作如下改变

0 to 25%：上边框和右边框显现
25 to 50%：下边框和左边框显现
50 to 65%：红色小方块显现
65 to 80%：橙色小方块显现
75 to 90%：白色小方块显现

红色小方框 keyframe 如下

@keyframes red {
0%,
50% {
width: 0;
opacity: 0;
}
50.01% {
opacity: 1;
}
65%,
100% {
width: 27%;
opacity: 1;
}
}

重复上面的代码，就可完成我们整个动画， 是不是很完美

总结

感谢你的阅读，最后附上 所有的源码（http://t.cn/R93jmwe），但个人建议，不要直接阅读源码，根据上面的提示在 codepen 中自己来一遍才是最佳实践