<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS实现loading动画</title> <style> /* 定义动画 */ @keyframes loading{ from{ transform: scale(1,1); } to{ transform: scale(1,0.5); } } /*样式设计*/ .con{ width: 300px; height: 158px; border: 1px solid #000; margin: 150px auto 0; } .con div{ width: 30px; height: 100px; float: left; /* background-color: gold;*/ margin: 15px; border-radius: 15px; animation: loading 1s ease infinite alternate; } .con div:nth-child(1){ background-color: gold; } .con div:nth-child(2){ background-color:red; animation-delay:100ms ; } .con div:nth-child(3){ background-color:rebeccapurple; animation-delay:200ms ; } .con div:nth-child(4){ background-color:royalblue; animation-delay:300ms ; } .con div:nth-child(5){ background-color: green; animation-delay:400ms ; } </style> </head> <body> <div class="con"> <div></div> <div></div> <div></div> <div></div> <div></div> <p>loading...</p> </div> </body> </html>
python前端CSS实现登录动画loading
最新推荐文章于 2023-06-16 22:16:16 发布