.Four{ width: 50px; height: 50px; position: relative; margin-top:100px; margin-left: 100px; } .Four span{ display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: #0A0A0A; position: absolute; -webkit-animation: load 0.8s ease infinite; } @-webkit-keyframes load{ 0%{ opacity: 1; width: 8px; height: 8px; } 100%{ opacity: 0.2; width: 1px; height: 1px; } } .Four span:nth-child(1){ left: 0; top: 50%; width: 8px; height: 8px; margin-top:-4px; -webkit-animation-delay:0.1s; } .Four span:nth-child(2){ left: 7px; top: 7px; width: 7px; height: 7px; -webkit-animation-delay:0.2s; } .Four span:nth-child(3){ left: 50%; top: 0; margin-left: -4px; width: 6px; height: 6px; -webkit-animation-delay:0.3s; } .Four span:nth-child(4){ top: 7px; right:7px; width: 5px; height: 5px; -webkit-animation-delay:0.4s; } .Four span:nth-child(5){ right: 0; top: 50%; margin-top:-4px; width: 4px; height: 4px; -webkit-animation-delay:0.5s; } .Four span:nth-child(6){ right: 7px; bottom:7px; width: 3px; height: 3px; -webkit-animation-delay:0.6s; } .Four span:nth-child(7){ bottom: 0; left: 50%; margin-left: -4px; width: 2px; height: 2px; -webkit-animation-delay:0.7s; } .Four span:nth-child(8){ bottom: 7px; left: 7px; width: 1px; height: 1px; -webkit-animation-delay:0.8s; }
宠物免费领养小程序,欢迎来踩