<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #preloader_1{ position:absolute; } #preloader_1 span{ display:block; bottom:0px; width: 9px; height: 5px; background:#9b59b6; position:absolute; animation: preloader_1 1.5s infinite ease-in-out; } #preloader_1 span:nth-child(2){ left:11px; animation-delay: .2s; } #preloader_1 span:nth-child(3){ left:22px; animation-delay: .4s; } #preloader_1 span:nth-child(4){ left:33px; animation-delay: .6s; } #preloader_1 span:nth-child(5){ left:44px; animation-delay: .8s; } @keyframes preloader_1 { 0% {height:5px;transform:translateY(0px);background:#9b59b6;} 40% {height:30px;transform:translateY(15px);background:#3498db;} 80% {height:5px;transform:translateY(0px);background:#9b59b6;} 100% {height:5px;transform:translateY(0px);background:#9b59b6;} } /*第二个动画*/ #preloader_3{ position:absolute; top:50px; } #preloader_3:before{ width:20px; height:20px; border-radius:20px; background:blue; content:''; position:absolute; background:#9b59b6; animation: preloader_3_before 1.5s infinite ease-in-out; } #preloader_3:after{ width:20px; height:20px; border-radius:20px; background:blue; content:''; position:absolute; background:#2ecc71; left:22px; animation: preloader_3_after 1.5s infinite ease-in-out; } @keyframes preloader_3_before { 0% {transform: translateX(0px) rotate(0deg)} 50% {transform: translateX(50px) scale(1.2) rotate(260deg); background:#2ecc71;border-radius:0px;} 100% {transform: translateX(0px) rotate(0deg)} } @keyframes preloader_3_after { 0% {transform: translateX(0px)} 50% {transform: translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;} 100% {transform: translateX(0px)} } /*第三个动画*/ #lpreloader_4{ position:absolute; top:100px; width:500px; height:100px; background:#F5F5F5; overflow: hidden; } #lpreloader_4:before{ width:500px; height:500px; border-radius:250px; background:blue; content:''; position:absolute; background:#9b59b6; top:-200px; animation: lpreloader_4_before 2s 1 forwards; } @keyframes lpreloader_4_before { 0% {transform:scale(0);} 100% {transform:scale(1.2);} } /*第四个动画*/ #preloader_4{ position:absolute; top:250px; } #preloader_4 span{ position:absolute; width:20px; height:20px; background:#3498db; opacity:0.5; border-radius:20px; animation: preloader_4 1s infinite ease-in-out; } #preloader_4 span:nth-child(2){ left:20px; animation-delay: .2s; } #preloader_4 span:nth-child(3){ left:40px; animation-delay: .4s; } #preloader_4 span:nth-child(4){ left:60px; animation-delay: .6s; } #preloader_4 span:nth-child(5){ left:80px; animation-delay: .8s; } @keyframes preloader_4 { 0% {opacity: 0.3; transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);} 50% {opacity: 1; transform: translateY(-10px); background:#f1c40f; box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);} 100% {opacity: 0.3; transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);} } /*第五个动画*/ #preloader5{ position:absolute; width:30px; height:30px; background:#3498db; border-radius:50px; animation: preloader_5 1.5s infinite linear; top:350px; } #preloader5:after{ position:absolute; width:50px; height:50px; border-top:10px solid #9b59b6; border-bottom:10px solid #9b59b6; border-left:10px solid transparent; border-right:10px solid transparent; border-radius:50px; content:''; top:-20px; left:-20px; animation: preloader_5_after 1.5s infinite linear; } @keyframes preloader_5 { 0% {transform: rotate(0deg);} 50% {transform: rotate(180deg);background:#2ecc71;} 100% {transform: rotate(360deg);} } @keyframes preloader_5_after { 0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;} 50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;} 100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;} } /*第六个动画*/ #preloader6{ position:absolute; width: 42px; height: 42px; animation: preloader_6 5s infinite linear; top:450px; } #preloader6 span{ width:20px; height:20px; position:absolute; background:red; display:block; animation: preloader_6_span 1s infinite linear; } #preloader6 span:nth-child(1){ background:#2ecc71; } #preloader6 span:nth-child(2){ left:22px; background:#9b59b6; animation-delay: .2s; } #preloader6 span:nth-child(3){ top:22px; background:#3498db; animation-delay: .4s; } #preloader6 span:nth-child(4){ top:22px; left:22px; background:#f1c40f; animation-delay: .6s; } @keyframes preloader_6_span { 0% { transform:scale(1); } 50% { transform:scale(0.5); } 100% { transform:scale(1); } } </style> </head> <body> <div id="preloader_1"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div id="preloader_3"></div> <div id="lpreloader_4"></div> <div id="preloader_4"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div id="preloader5"></div> <div id="preloader6"> <span></span> <span></span> <span></span> <span></span> </div> </body> </html>
