在我們這次的新設計教程中，我將向您展示如何創建純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; } .loading1 > div:nth-child(4) { right:10px; top:13px; /* css3 transform - rotate */ -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); /* css3 animation */ -webkit-animation-delay:0.78s; -moz-animation-delay:0.78s; -o-animation-delay:0.78s; } .loading1 > div:nth-child(5) { right:0; top:36px; /* css3 transform - rotate */ -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform:rotate(90deg); /* css3 animation */ -webkit-animation-delay:0.91s; -moz-animation-delay:0.91s; -o-animation-delay:0.91s; } .loading1 > div:nth-child(6) { right:10px; bottom:9px; /* css3 transform - rotate */ -webkit-transform:rotate(135deg); -moz-transform:rotate(135deg); -o-transform:rotate(135deg); /* css3 animation */ -webkit-animation-delay:1.04s; -moz-animation-delay:1.04s; -o-animation-delay:1.04s; } .loading1 > div:nth-child(7) { bottom:0; left:34px; /* css3 transform - rotate */ -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg); /* css3 animation */ -webkit-animation-delay:1.17s; -moz-animation-delay:1.17s; -o-animation-delay:1.17s; } .loading1 > div:nth-child(8) { left:10px; bottom:9px; /* css3 transform - rotate */ -webkit-transform:rotate(-135deg); -moz-transform:rotate(-135deg); -o-transform:rotate(-135deg); /* css3 animation */ -webkit-animation-delay:1.3s; -moz-animation-delay:1.3s; -o-animation-delay:1.3s; } /* css3 keyframes - loading1 */ @-webkit-keyframes loading1 { 0%{ background-color:#000000 } 100%{ background-color:#FFFFFF } } @-moz-keyframes loading1 { 0%{ background-color:#000000 } 100%{ background-color:#FFFFFF } } @-o-keyframes loading1 { 0%{ background-color:#000000 } 100%{ background-color:#FFFFFF } } | |
你可以看到–我用CSS3動畫關鍵幀，每一步(點)是彼此分離的延遲。現在，請查看我們的第二負載的風格元素：
| 代碼如下 | |
| .loading2 { height:140px; position:relative; width:140px; /* css3 transform - scale */ -webkit-transform:scale(0.6); -moz-transform:scale(0.6); -o-transform:scale(0.6); } .loading2 > div { background-color:#FFFFFF; height:25px; position:absolute; width:25px; /* css3 radius */ -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; /* css3 animation */ -webkit-animation-name:loading2; -webkit-animation-duration:1.04s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:linear; -moz-animation-name:loading2; -moz-animation-duration:1.04s; -moz-animation-iteration-count:infinite; -moz-animation-direction:linear; -o-animation-name:loading2; -o-animation-duration:1.04s; -o-animation-iteration-count:infinite; -o-animation-direction:linear; } .loading2 > div:nth-child(1) { left:0; top:57px; /* css3 animation */ -webkit-animation-delay:0.39s; -moz-animation-delay:0.39s; -o-animation-delay:0.39s; } .loading2 > div:nth-child(2) { left:17px; top:17px; /* css3 animation */ -webkit-animation-delay:0.52s; -moz-animation-delay:0.52s; -o-animation-delay:0.52s; } .loading2 > div:nth-child(3) { left:57px; top:0; /* css3 animation */ -webkit-animation-delay:0.65s; -moz-animation-delay:0.65s; -o-animation-delay:0.65s; } .loading2 > div:nth-child(4) { right:17px; top:17px; /* css3 animation */ -webkit-animation-delay:0.78s; -moz-animation-delay:0.78s; -o-animation-delay:0.78s; } .loading2 > div:nth-child(5) { right:0; top:57px; /* css3 animation */ -webkit-animation-delay:0.91s; -moz-animation-delay:0.91s; -o-animation-delay:0.91s; } .loading2 > div:nth-child(6) { right:17px; bottom:17px; /* css3 animation */ -webkit-animation-delay:1.04s; -moz-animation-delay:1.04s; -o-animation-delay:1.04s; } .loading2 > div:nth-child(7) { left:57px; bottom:0; /* css3 animation */ -webkit-animation-delay:1.17s; -moz-animation-delay:1.17s; -o-animation-delay:1.17s; } .loading2 > div:nth-child(8) { left:17px; bottom:17px; /* css3 animation */ -webkit-animation-delay:1.3s; -moz-animation-delay:1.3s; -o-animation-delay:1.3s; } /* css3 keyframes - loading2 */ @-webkit-keyframes loading2 { 0%{ background-color:#000000 } 100%{ background-color:#FFFFFF } } @-moz-keyframes loading2 { 0%{ background-color:#000000 } 100%{ background-color:#FFFFFF } } @-o-keyframes loading2 { 0%{ background-color:#000000 } 100%{ background-color:#FFFFFF } } | |
我在這里使用相同的理念作為第一要素，但是，稍微改變風格。最后–第三”加載元件：
| 代碼如下 | |
| .loading3 > div { background-color:#FFFFFF; border:1px solid #000000; float:left; height:114px; margin-left:5px; width:30px; opacity:0.1; /* css3 transform - scale */ -webkit-transform:scale(0.8); -moz-transform:scale(0.8); -o-transform:scale(0.8); /* css3 animation */ -webkit-animation-name:loading3; -webkit-animation-duration:1.2s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:linear; -moz-animation-name:loading3; -moz-animation-duration:1.2s; -moz-animation-iteration-count:infinite; -moz-animation-direction:linear; -o-animation-name:loading3; -o-animation-duration:1.2s; -o-animation-iteration-count:infinite; -o-animation-direction:linear; } .loading3 > div:nth-child(1) { /* css3 animation */ -webkit-animation-delay:0.24s; -moz-animation-delay:0.24s; -o-animation-delay:0.24s; } .loading3 > div:nth-child(2) { /* css3 animation */ -webkit-animation-delay:0.48s; -moz-animation-delay:0.48s; -o-animation-delay:0.48s; } .loading3 > div:nth-child(3) { /* css3 animation */ -webkit-animation-delay:0.72s; -moz-animation-delay:0.72s; -o-animation-delay:0.72s; } .loading3 > div:nth-child(4) { /* css3 animation */ -webkit-animation-delay:0.96s; -moz-animation-delay:0.96s; -o-animation-delay:0.96s; } .loading3 > div:nth-child(5) { /* css3 animation */ -webkit-animation-delay:1.2s; -moz-animation-delay:1.2s; -o-animation-delay:1.2s; } /* css3 keyframes - loading3 */ @-webkit-keyframes loading3 { 0% { -webkit-transform:scale(1.2); opacity:1; } 100% { -webkit-transform:scale(0.7); opacity:0.1; } } @-moz-keyframes loading3 { 0% { -moz-transform:scale(1.2); opacity:1; } 100% { -moz-transform:scale(0.7); opacity:0.1; } } @-o-keyframes loading3 { 0% { -o-transform:scale(1.2); opacity:1; } 100% { -o-transform:scale(0.7); opacity:0.1; } } | |
這就是今天的。我們剛剛創建的三種不同的“加載”元素。我希望一切都對你很容易和你一樣的結果。祝你好運!
新聞熱點
疑難解答
