来看看效果:
css代码: <style type="text/css"> body, html, *{ padding: 0px; margin: 0px; } body, html { width: 100%; background-color: #FFF; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #loader { height: 100vh; width: 100%; position: fixed; top: 0px; left: 0px; background: #FFF; z-index: 20; } .loader-content { border-radius: 150px; height: 300px; width: 300px; background-color: #4385f6; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%) scale(1); -ms-transform: translate(-50%,-50%) scale(1); -o-transform: translate(-50%,-50%) scale(1); transform: translate(-50%,-50%) scale(1); -webkit-transition: all 1s cubic-bezier(0.500, -0.010, 0.000, 1.005); -moz-transition: all 1s cubic-bezier(0.500, -0.010, 0.000, 1.005); -o-transition: all 1s cubic-bezier(0.500, -0.010, 0.000, 1.005); transition: all 1s cubic-bezier(0.500, -0.010, 0.000, 1.005); } .loader-content.hide { opacity: 0; -webkit-transform: translate(-50%,-50%) scale(0.9); -ms-transform: translate(-50%,-50%) scale(0.9); -o-transform: translate(-50%,-50%) scale(0.9); transform: translate(-50%,-50%) scale(0.9); } .loader-turn-1 { height: 110px; width: 110px; border: 5px solid #FFF; border-right: 5px solid #4385f6; border-radius: 60px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); animation:loader-anim 2s linear infinite; -webkit-animation:loader-anim 2s linear infinite; animation-direction: reverse; } .loader-turn-2 { height: 90px; width: 90px; border: 5px solid #FFF; border-right: 5px solid #4385f6; border-radius: 45px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); animation:loader-anim 1.5s linear infinite; -webkit-animation:loader-anim 1.5s linear infinite; } @-webkit-keyframes loader-anim { 0% { -webkit-transform: translate(-50%,-50%) rotate(0deg); -ms-transform: translate(-50%,-50%) rotate(0deg); -o-transform: translate(-50%,-50%) rotate(0deg); transform: translate(-50%,-50%) rotate(0deg); } 100% { -webkit-transform: translate(-50%,-50%) rotate(360deg); -ms-transform: translate(-50%,-50%) rotate(360deg); -o-transform: translate(-50%,-50%) rotate(360deg); transform: translate(-50%,-50%) rotate(360deg); } } @keyframes loader-anim { 0% { -webkit-transform: translate(-50%,-50%) rotate(0deg); -ms-transform: translate(-50%,-50%) rotate(0deg); -o-transform: translate(-50%,-50%) rotate(0deg); transform: translate(-50%,-50%) rotate(0deg); } 100% { -webkit-transform: translate(-50%,-50%) rotate(360deg); -ms-transform: translate(-50%,-50%) rotate(360deg); -o-transform: translate(-50%,-50%) rotate(360deg); transform: translate(-50%,-50%) rotate(360deg); } } #loader.load .loader-turn-1 { animation:loader-anim-load-2 1s ease forwards; -webkit-animation:loader-anim-load-2 1s ease forwards; } @-webkit-keyframes loader-anim-load-2 { 0% { -webkit-transform: translate(-50%,-50%) rotate(-360deg); -ms-transform: translate(-50%,-50%) rotate(-360deg); -o-transform: translate(-50%,-50%) rotate(-360deg); transform: translate(-50%,-50%) rotate(-360deg); } 50% { -webkit-transform: translate(-50%,-50%) rotate(-50deg); -ms-transform: translate(-50%,-50%) rotate(-50deg); -o-transform: translate(-50%,-50%) rotate(-50deg); transform: translate(-50%,-50%) rotate(-50deg); } 70% { -webkit-transform: translate(-50%,-50%) rotate(10deg); -ms-transform: translate(-50%,-50%) rotate(10deg); -o-transform: translate(-50%,-50%) rotate(10deg); transform: translate(-50%,-50%) rotate(10deg); } 100% { -webkit-transform: translate(-50%,-50%) rotate(0deg); -ms-transform: translate(-50%,-50%) rotate(0deg); -o-transform: translate(-50%,-50%) rotate(0deg); transform: translate(-50%,-50%) rotate(0deg); } } @keyframes loader-anim-load-2 { 0% { -webkit-transform: translate(-50%,-50%) rotate(-360deg); -ms-transform: translate(-50%,-50%) rotate(-360deg); -o-transform: translate(-50%,-50%) rotate(-360deg); transform: translate(-50%,-50%) rotate(-360deg); } 50% { -webkit-transform: translate(-50%,-50%) rotate(-50deg); -ms-transform: translate(-50%,-50%) rotate(-50deg); -o-transform: translate(-50%,-50%) rotate(-50deg); transform: translate(-50%,-50%) rotate(-50deg); } 70% { -webkit-transform: translate(-50%,-50%) rotate(10deg); -ms-transform: translate(-50%,-50%) rotate(10deg); -o-transform: translate(-50%,-50%) rotate(10deg); transform: translate(-50%,-50%) rotate(10deg); } 100% { -webkit-transform: translate(-50%,-50%) rotate(0deg); -ms-transform: translate(-50%,-50%) rotate(0deg); -o-transform: translate(-50%,-50%) rotate(0deg); transform: translate(-50%,-50%) rotate(0deg); } } #loader.load .loader-turn-2 { animation:loader-anim-load-1 1s ease forwards; -webkit-animation:loader-anim-load-1 1s ease forwards; } @-webkit-keyframes loader-anim-load-1 { 0% { -webkit-transform: translate(-50%,-50%) rotate(360deg); -ms-transform: translate(-50%,-50%) rotate(360deg); -o-transform: translate(-50%,-50%) rotate(360deg); transform: translate(-50%,-50%) rotate(360deg); } 50% { -webkit-transform: translate(-50%,-50%) rotate(-50deg); -ms-transform: translate(-50%,-50%) rotate(-50deg); -o-transform: translate(-50%,-50%) rotate(-50deg); transform: translate(-50%,-50%) rotate(-50deg); } 70% { -webkit-transform: translate(-50%,-50%) rotate(10deg); -ms-transform: translate(-50%,-50%) rotate(10deg); -o-transform: translate(-50%,-50%) rotate(10deg); transform: translate(-50%,-50%) rotate(10deg); } 100% { -webkit-transform: translate(-50%,-50%) rotate(0deg); -ms-transform: translate(-50%,-50%) rotate(0deg); -o-transform: translate(-50%,-50%) rotate(0deg); transform: translate(-50%,-50%) rotate(0deg); } } @keyframes loader-anim-load-1 { 0% { -webkit-transform: translate(-50%,-50%) rotate(360deg); -ms-transform: translate(-50%,-50%) rotate(360deg); -o-transform: translate(-50%,-50%) rotate(360deg); transform: translate(-50%,-50%) rotate(360deg); } 50% { -webkit-transform: translate(-50%,-50%) rotate(-50deg); -ms-transform: translate(-50%,-50%) rotate(-50deg); -o-transform: translate(-50%,-50%) rotate(-50deg); transform: translate(-50%,-50%) rotate(-50deg); } 70% { -webkit-transform: translate(-50%,-50%) rotate(10deg); -ms-transform: translate(-50%,-50%) rotate(10deg); -o-transform: translate(-50%,-50%) rotate(10deg); transform: translate(-50%,-50%) rotate(10deg); } 100% { -webkit-transform: translate(-50%,-50%) rotate(0deg); -ms-transform: translate(-50%,-50%) rotate(0deg); -o-transform: translate(-50%,-50%) rotate(0deg); transform: translate(-50%,-50%) rotate(0deg); } } </style>
HTML: <div id="loader"> <div class="loader-content"> <div class="loader-turn-1"></div> <div class="loader-turn-2"></div> </div> </div>