几个CSS3动画 

<!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>

posted @ 2016-05-09 14:43  归尘2016  阅读(185)  评论(0)  编辑  收藏  举报