CSS3制作loading加載動畫效果代碼

 　　在我們這次的新設計教程中，我將向您展示如何創建純CSS3的loading加載動畫組件(沒有任何圖像)。我認為它可以為你減少項目的代碼量和額外的圖像對你網站的負載。我准備了三種不同風格的加載組件。現在，讓我們看看我做的。

　　css3-loading

　　Step 1. HTML

　　你可以在這裡看到的三個元素–放置“加載”元素的div。

 代碼如下   <div class="main_body">
    <div class="element">
        <div class="loading1">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <div class="element">
        <div class="loading2">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <div class="element">
        <div class="loading3">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>

　　Step 2. CSS

　　現在，最有趣的一步，我會給你風格各加載的元素。歡迎來檢查的第一個樣式：

 代碼如下   .loading1 {
    height:100px;
    position:relative;
    width:80px;
}
.loading1 > div {
    background-color:#FFFFFF;
    height:30px;
    position:absolute;
    width:12px;
    /* css3 radius */
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    /* css3 transform - scale */
    -webkit-transform:scale(0.4);
    -moz-transform:scale(0.4);
    -o-transform:scale(0.4);
    /* css3 animation */
    -webkit-animation-name:loading1;
    -webkit-animation-duration:1.04s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:linear;
    -moz-animation-name:loading1;
    -moz-animation-duration:1.04s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-direction:linear;
    -o-animation-name:loading1;
    -o-animation-duration:1.04s;
    -o-animation-iteration-count:infinite;
    -o-animation-direction:linear;
}
.loading1 > div:nth-child(1) {
    left:0;
    top:36px;
    /* css3 transform - rotate */
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    /* css3 animation */
    -webkit-animation-delay:0.39s;
    -moz-animation-delay:0.39s;
    -o-animation-delay:0.39s;
}
.loading1 > div:nth-child(2) {
    left:10px;
    top:13px;
    /* css3 transform - rotate */
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    /* css3 animation */
    -webkit-animation-delay:0.52s;
    -moz-animation-delay:0.52s;
    -o-animation-delay:0.52s;
}
.loading1 > div:nth-child(3) {
    left:34px;
    top:4px;
    /* css3 transform - rotate */
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    /* css3 animation */
    -webkit-animation-delay:0.65s;
    -moz-animation-delay:0.65s;
    -o-animation-delay:0.65s;