<head> <meta charset="UTF-8"> <title>Loading动画</title></head><style> .spinner{ margin: 100px auto; width: 50px; height: 60px; text-align: center; font-size: 10px; } .spinner>div{ background-color: #67cf22; height: 100%; width: 6px; display: inline-block; animation: mymove 1.2s infinite ease-in-out; } .spinner>div:nth-child(2){ animation-delay:-1.1s; } .spinner>div:nth-child(3){ animation-delay:-1.0s; } .spinner>div:nth-child(4){ animation-delay:-0.9; } .spinner>div:nth-child(5){ animation-delay:-0.8s; } @keyframes mymove{ 0%,40%,100%{transform:scaleY(0.4);} 20%{transform:scaleY(1);} }</style><body> <div class="spinner"> <div></div> <div></div> <div></div> <div></div> <div></div> </div></body></html>