主要用到的知识点：参阅菜鸟教程： http://www.runoob.com/css3/cs...frameanimation / 动画延时flex实现HTML<div class=“loading”> <div class=“loading-1 loading-item”></div> <div class=“loading-2 loading-item”></div> <div class=“loading-3 loading-item”></div> <div class=“loading-4 loading-item”></div></div>说明： loading-1/2/3/4 用于区别四个不同点，loading-item 里放通用样式CSS 重点如果了解 less，看这个更清晰些，如果不懂，看下面生成的 cssLESS@red: #FF3B30;@orange: #FF9500;@black: #373737;@green: #4CD964;@load-box-height: 50px;.loading{ height: @load-box-height; // 定死容器的高度，不然会上下浮动 margin: 20px 0; display: flex; align-items: center; // 横向排列子元素 justify-content: center; // 纵向排列子元素 .loading-item{ height: @load-box-height; width: 10px; margin-right: 10px; &:last-child{ // 去掉最后一个的右边距 margin-right: 0; } } &-1{ // 【参数分别为】 动画key名，一次动画的持续时间，循环方式，过滤规则，动画起始延时时间 -webkit-animation: load-frame 1s infinite linear 0s; -o-animation: load-frame 1s infinite linear 0s; animation: load-frame 1s infinite linear 0s; background-color: @red; } &-2{ -webkit-animation: load-frame 1s infinite linear 0.25s; // 通过控制延时，只用一个keyframe 就能做出渐变效果 -o-animation: load-frame 1s infinite linear 0.25s; animation: load-frame 1s infinite linear 0.25s; background-color: @orange; } &-3{ -webkit-animation: load-frame 1s infinite linear 0.5s; -o-animation: load-frame 1s infinite linear 0.5s; animation: load-frame 1s infinite linear 0.5s; background-color: @black; } &-4{ -webkit-animation: load-frame 1s infinite linear 0.75s; -o-animation: load-frame 1s infinite linear 0.75s; animation: load-frame 1s infinite linear 0.75s; background-color: @green; }}@keyframes load-frame { 0% {height: @load-box-height;} 50% {height: @load-box-height * 0.25;} // 设置动画中间的高度，此时为最低，为原高度的25% 100% {height: @load-box-height;}}@-webkit-keyframes load-frame { // safari & chrome 0% {height: @load-box-height;} 50% {height: @load-box-height * 0.25;} 100% {height: @load-box-height;}}CSS.loading { height: 50px; margin: 20px 0; display: flex; align-items: center; justify-content: center;}.loading .loading-item { height: 50px; width: 10px; margin-right: 10px;}.loading .loading-item:last-child { margin-right: 0;}.loading-1 { -webkit-animation: load-frame 1s infinite linear 0s; -o-animation: load-frame 1s infinite linear 0s; animation: load-frame 1s infinite linear 0s; background-color: #FF3B30;}.loading-2 { -webkit-animation: load-frame 1s infinite linear 0.25s; -o-animation: load-frame 1s infinite linear 0.25s; animation: load-frame 1s infinite linear 0.25s; background-color: #FF9500;}.loading-3 { -webkit-animation: load-frame 1s infinite linear 0.5s; -o-animation: load-frame 1s infinite linear 0.5s; animation: load-frame 1s infinite linear 0.5s; background-color: #373737;}.loading-4 { -webkit-animation: load-frame 1s infinite linear 0.75s; -o-animation: load-frame 1s infinite linear 0.75s; animation: load-frame 1s infinite linear 0.75s; background-color: #4CD964;}@keyframes load-frame { 0% {height: 50px;} 50% {height: 12.5px;} 100% {height: 50px;}}@-webkit-keyframes load-frame { 0% {height: 50px;} 50% {height: 12.5px;} 100% {height: 50px;}}最后，WA-LA，完成