这是第二个 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>
发表回复