.Loading-warp { width:100%; height:100%; background-color:#374140; position:fixed; top:0; left:0; right:0; bottom:0; z-index:10000; } .Loading-warp .Loading { position:relative; top:50%; left:50%; transform:translate(-50%,-50%); width:180px; height:20px; display:flex; justify-content:space-between; } .Loading-warp .Loading .Circle,.Circle2,.Circle3 { width:20px; height:100%; background-color:#FFFFFF; border-radius:50%; animation:bounce 1.5s infinite ease-in-out; opacity:0; } @keyframes bounce { 0%,100% { transform:scale(0); opacity:0; } 50% { transform:scale(1.2); opacity:1; } }.Loading-warp .Loading .Circle2 { animation-delay:.25s; } .Loading-warp .Loading .Circle3 { animation-delay:.5s; }
更新时间:2021-04-08 23:08:00
简单的一个加载动画,利用jquery让动画执行800毫秒之后消失