HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css跳动的loading</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="loading"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html>
CSS:
/* * 1、 #232e6d * 2、 #006cb4 * 3、 #61dafb * 4、 #30d268 * 5、 #4fc08d */ * { padding: 0; margin: 0; } html, body { height: 100%; 100%; } .loading { position: fixed; height: 100%; 100%; display: flex; justify-content: center; align-items: center; background-color: rgba(255, 255, 255, .9); z-index: 10; } ul { height: 200px; list-style: none; } li { float: left; 7px; height: 10px; margin: 3px; border-radius: 20px; } li:nth-child(1) { background-color: #232e6d; animation: dance 1s infinite; } li:nth-child(2) { background-color: #006cb4; animation: dance 1s infinite; animation-delay: .2s; } li:nth-child(3) { background-color: #61dafb; animation: dance 1s infinite; animation-delay: .4s; } li:nth-child(4) { background-color: #30d268; animation: dance 1s infinite; animation-delay: .6s; } li:nth-child(5) { background-color: #4fc08d; animation: dance 1s infinite; animation-delay: .8s; } @keyframes dance { 50% { height: 30px; transform: translateY(-15px); } 100% { height: 10px; transform: translateY(0px); } }