#loading { background-color:#000000; height:100%; width:100%; position:fixed; z-index:1; margin-top:0px; top:0px; } #loading-center { position:absolute; left:35%; top:35%; height:200px; width:200px; } .round { border-radius:50% 50% 50% 50%; /*从半角到圆弧*/ position:absolute; border-top:3px solid #ffff00; border-left:5px solid #ffffff; border-bottom:5px solid transparent; border-right:5px solid transparent; animation:animate 3s infinite; } #round_one { left:75px; top:75px; width:50px; height:50px; } #round_two { left:65px; top:65px; width:70px; height:70px; animation-delay:0.2s; } #round_three { left:55px; top:55px; width:90px; height:90px; animation-delay:0.4s; } #round_four { left:45px; top:45px; width:110px; height:110px; animation-delay:0.6s; } @keyframes animate { 50% { transform:rotate(360deg) scale(0.8); } }
直接复制到自己的html和css文件即可使用