10个css动画,几个CSS3动画

}#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); }}