* { padding:0; margin:0; } html { height:100%; } body { height:100%; background:#121212; } .arrow-wrapper { width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; } .arrow { position:relative; width:60px; height:60px; border-top:10px solid #fff; border-left:10px solid #fff; transform:rotate(45deg); animation:arrow-load 2s infinite; } .arrow:nth-child(1) { top:25px; animation-delay:-0.4s } .arrow:nth-child(2) { animation-delay:-0.2s } .arrow:nth-child(3) { bottom:25px; } @keyframes arrow-load { 0% { opacity:0; transform:rotate(45deg) translate(50px,50px); } 50% { opacity:1; } 100% { opacity:0; } }
更新时间:2022-11-04 11:01:08