效果预览:
HTML:
<div id="loading">
<span class="bounce bounce1"></span>
<span class="bounce bounce2"></span>
<span class="bounce bounce3"></span>
</div>
CSS:
#loading {
width: 200px;
height: 150px;
margin: 0 auto;
text-align: center; }
#loading .bounce {
display: inline-block;
width: 30px;
height: 30px;
background-color: #ed4340;
border-radius: 50%;
margin: 60px 2.5px 0;
animation: loading 1s infinite; }
#loading .bounce2 {
animation-delay: 0.25s; }
#loading .bounce3 {
animation-delay: 0.5s; }
@keyframes loading {
0%, 100% {
transform: scale(0); }
50% {
transform: scale(1); } }