/* 上拉加载 */ .load_more_box { height:40px; line-height:40px; position:relative; text-align:center; } .load_more_box span { width:5px; height:5px; margin:0 1px; display:inline-block; vertical-align:middle; background:#9b59b6; animation:load_more_box 1.5s infinite ease-in-out; } .load_more_box span:nth-child(2) { animation-delay:.2s; } .load_more_box span:nth-child(3) { animation-delay:.4s; } .load_more_box span:nth-child(4) { animation-delay:.6s; } .load_more_box span:nth-child(5) { animation-delay:.8s; } @keyframes load_more_box { 0% { height:5px; background:#9b59b6; } 25% { height:30px; background:#0081ff; } 50% { height:5px; background:#9b59b6; } 100% { height:5px; background:#9b59b6; } }
更新时间:2019-11-18 22:44:09
使用简单的css animation动画, 通过延时,为dom中的每一个span标签改变高度,达到信号式加载中动画。