这是第二个 CSS 3 实现的加载中动画：
这是互联网上比拟常见的一种加载动画，我在很多软件应用中都见过，具体设计来源不明。实现原理和第一个动画相似，把整个动画拆分成多个线条块程度搁置在一起，而后自左向右地顺次执行高低拉伸变换，通过有限反复就失去了最终的成果，上面是代码：
<body> <style> body { background: #999999; } .DIV_loadingAnimation2 { position: fixed; height: 50px; font-size: 0; } .DIV_loadingAnimation2 div { width: 10px; height: 50px; background: white; display: inline-block; margin: 0 1px 0 0; transform: scaleY(.5); } .DIV_loadingAnimation2 div:nth-child(1) { animation: loadingAnimation2 1.5s linear infinite; } .DIV_loadingAnimation2 div:nth-child(2) { animation: loadingAnimation2 1.5s linear infinite .125s; } .DIV_loadingAnimation2 div:nth-child(3) { animation: loadingAnimation2 1.5s linear infinite .25s; } .DIV_loadingAnimation2 div:nth-child(4) { animation: loadingAnimation2 1.5s linear infinite .375s; } .DIV_loadingAnimation2 div:nth-child(5) { animation: loadingAnimation2 1.5s linear infinite .5s; } .DIV_loadingAnimation2 div:nth-child(6) { animation: loadingAnimation2 1.5s linear infinite .625s; } .DIV_loadingAnimation2 div:nth-child(7) { animation: loadingAnimation2 1.5s linear infinite .75s; } .DIV_loadingAnimation2 div:nth-child(8) { animation: loadingAnimation2 1.5s linear infinite .875s; } @keyframes loadingAnimation2 { 0% { transform: scaleY(.5); } 20% { transform: scaleY(1); } 40% { transform: scaleY(.5); } } </style> <div class="DIV_loadingAnimation2"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div></body>