利用css3制作的几个loading图

先看图，多数是从别人那里看的效果直接仿的，先开随笔，有了创意继续加
其实3个之后，脑子里立刻有个第四个的制作思路，无外乎是利用border或者块元素变形，然后构思好接下来的行为，写起来也非常简单，5个一共用了半个小时左右，缺的还是思路啊
代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>仅在chrome下正常显示</title>
<style>
*{ margin:0; padding:0;}
.css_content{
    width:300px; height:300px; float:left; display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center; border:1px solid #ccc;
}

/* NO.1 */
.loading1{ 
    width:100px; 
    height:100px;
    margin:50px;
    border:10px solid #ccc;
    border-left-color:#000;
    border-radius:50%;
    -webkit-animation: loading1 1s linear infinite;
}
@-webkit-keyframes loading1{
    to { -webkit-transform:rotate(1turn)};
}

/* NO.2 */
.loading2{ width:150px; height:50px; text-align:center;} 

.loading2 span{
     display:inline-block;
     width:6px;
     height:100%;
     background:green;
     -webkit-animation: loading2 1.2s infinite ease-in-out ;
}
/* 下面的样式，如果不加上.loading2 则不生效 */
.loading2 .line2{
    -webkit-animation-delay:-1.1s;
}
.loading2 .line3{
    -webkit-animation-delay:-1.0s;
}

.loading2 .line4{
    -webkit-animation-delay:-0.9s;
}

.loading2 .line5{
    -webkit-animation-delay:-0.8s;
}
@-webkit-keyframes loading2{
     0%,40%,100%{
    -webkit-transform:scaleY(.4);
  }
  20%{
    -webkit-transform:scaleY(1);
  }
}

/* loading3 */

.loading3{ width:50px; height:50px; border:2px solid #666; border-radius:50%; border-left-color:transparent; border-right-color:transparent;
    -webkit-animation:loading3 2s infinite;
}
@-webkit-keyframes loading3{
    0% {
        -webkit-transform:rotate(0deg);
    }
    50%{
        -webkit-transform:rotate(360deg);
    }
    100% {
        -webkit-transform:rotate(0deg);
    }
}

/* loading4 */
.loading4{ width:200px; height:40px; font-family:"微软雅黑"; text-align:center;}
.loading4 span{ display:inline-block;
    -webkit-animation:loading4 1.4s infinite ease-in-out;
}
.loading4 .str1{ -webkit-animation-delay:-1.3s;}
.loading4 .str2{ -webkit-animation-delay:-1.2s;}
.loading4 .str3{ -webkit-animation-delay:-1.1s;}
.loading4 .str4{ -webkit-animation-delay:-1.0s;}
.loading4 .str5{ -webkit-animation-delay:-.9s;}
.loading4 .str6{ -webkit-animation-delay:-.8s;}
.loading4 .str7{ -webkit-animation-delay:-.7s;}

@-webkit-keyframes loading4{
    0%,40%,100% {
        -webkit-transform:translateY(0px);
    }
    20% {
        -webkit-transform:translateY(-20px);
    }
}

/* N0.5 */
.loading5{ width:50px; height:50px; position:relative; -webkit-animation:loading5 1.5s linear infinite;}
.loading5 span{ position:absolute; left:50%; top:50%; width:3px; height:10px; display:block; -webkit-transform-origin:center -8px;}
.loading5 .b1{  -webkit-transform:translate(-50%,8px) rotate(-45deg); background-color:#000;}
.loading5 .b2{  -webkit-transform:translate(-50%,8px) rotate(-90deg); background-color:#222;}
.loading5 .b3{  -webkit-transform:translate(-50%,8px) rotate(-135deg); background-color:#444;}
.loading5 .b4{  -webkit-transform:translate(-50%,8px) rotate(-180deg); background-color:#666;}
.loading5 .b5{  -webkit-transform:translate(-50%,8px) rotate(-225deg); background-color:#888;}
.loading5 .b6{  -webkit-transform:translate(-50%,8px) rotate(-270deg); background-color:#aaa;}
.loading5 .b7{  -webkit-transform:translate(-50%,8px) rotate(-315deg); background-color:#ccc;}
.loading5 .b8{  -webkit-transform:translate(-50%,8px) rotate(-360deg); background-color:#eee;}

@-webkit-keyframes loading5{
    to{
        -webkit-transform:rotate(1turn);
    }
}

</style>
</head>

<body>

<!-- NO.1 -->
<div class="css_content">
    <div class="loading1"></div>
</div>

<!-- NO.2 -->
<div class="css_content" style="background-color:#333;">
    <div class="loading2">
        <span class="line1"></span>
        <span class="line2"></span>
        <span class="line3"></span>
        <span class="line4"></span>
        <span class="line5"></span>
    </div>
</div>
<!-- NO.3 -->
<div class="css_content" style="background-color:#FFEC73;">
    <div class="loading3"></div>
</div>

<!-- NO.4 -->
<div class="css_content">
    <div class="loading4">
        <span class="str1">L</span>
        <span class="str2">o</span>
        <span class="str3">a</span>
        <span class="str4">d</span>
        <span class="str5">i</span>
        <span class="str6">n</span>
        <span class="str7">g</span>
    </div>
</div>

<!-- NO.5 -->
<div class="css_content">
    <div class="loading5">
        <span class="b1"></span>
        <span class="b2"></span>
        <span class="b3"></span>
        <span class="b4"></span>
        <span class="b5"></span>
        <span class="b6"></span>
        <span class="b7"></span>
        <span class="b8"></span>
    </div>
</div>

</body>
</html>