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

利用css3制作loading效果是非常的簡單的一事情,感覺和html5有點像了,下文整理一篇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;
}
.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;
}
}


這就是今天的。我們剛剛創建的三種不同的“載入”元素。我希望一切都對你很容易和你一樣的結果。祝你好運!

更多相關文章
  • CSS3要制作動畫是非常的簡單的事情了,我們只需要簡單的幾行代碼就可以實現動畫效果,下文來看一個CSS3使用Animate.css制作超炫的動畫效果.Animate.css是一個超強的CSS3動畫庫,它使用簡單,只需要將相關效果對應的class加入頁面元素中,就能實現翻轉.滑動.旋轉等等複雜超炫的跨 ...
  • fakeLoader.js 是輕量級的 jQuery 插件,幫助你創建動態的全屏載入掩飾微調效果,模擬頁面預載入的效果,下面我們就一起來看一個fakeLoader.js創建頁面載入動畫例子.HTML我們只需要在<bo
  • CSS3實現的Logo動畫效果例子
    css3動畫處理是非常的的強大了,許多的一些動畫效果可以直接使用css3而不用js來實現了,下面一起來看一個簡單CSS3技巧實現的Logo動畫.下面是演示的案例代碼,<style>.imlogo{ display: block; width: 160px; height: 80px; b ...
  • js ajax載入頁面最基本的方法就是使用最原始的XMLHttpRequest方法來載入,還有一種辦法就是使用iframe,現在流行了jquery ajax來局局無刷新載入頁面,如jquery.load(),post,get都可實例.js原生態寫法 代碼如下 var mm; var nn; func
  • ppt2010制作動畫效果ppt動畫飛入效果教程
    ppt制作中少不了動畫效果了,像我們點擊一張圖片就自動飛入一些文字或圖片效果,下面一聚教程
  • angularjs非常的強大了小編都覺得的angularjs超過了jquery了,下面來看一個angularjs loading載入效果示例,希望對大家有幫助.下面給出一個簡單示例:<!DOCTYPE html><h
  • 蘋果iphone5上查看gif動畫效果
    昨天有一朋友問我蘋果iphone5上怎麽查看gif動畫效果呢,下面我一給各位同學詳細介紹介紹,有需要了解的朋友可進入參考. 不安裝軟件查看gif動畫的方法: 1.點擊桌面上的“照片”圖標,選擇並打開那張帶有動畫效果的gif圖片,然後點擊左下角的“菜單”圖標. 2.這時會彈出菜單選擇界面,點擊頂部的“ ...
  • 在CSS 3引入Transition(過渡)這個概念之前,CSS是沒有時間軸的.也就是說,所有的狀態變化,都是即時完成.例如在以前當滑鼠放置于縮略圖之上,縮略圖會迅速變大.注意,縮略圖的變大是瞬間實現的.下面是代碼,相當簡單.具體例子 代碼如下 img{ height:15px; width:15p ...
一周排行
  • 生成html靜態文件是小編在幾年前時做的一個小功能了,我們通常有幾種實現方法,一個是替換方式也是常用的方式,另一種就是利用xmlhttp直接訪問動態頁面生成html這樣比較差的做法,下面小編事都一下.做網站都想用到動 ...
  • 數據類型在redis中有5種了,這裏我們簡單的來爲各位介紹一下redis中5種數據類型的基本知識,希望對大家有幫助.redis和memcached兩種緩存,個人覺得redis更好用,因爲它不僅提供了豐富的數據類型,還
  • 本文章來給各位同學介紹一下關于windows快速搭建本地apache+php+mysql開發環境,多站點域名訪問教程 ,希望對各位同學會逐步形成的幫助呀.所需軟件: XAMPP 2.5下載好之後傻瓜式安裝,推薦將安裝
  • 在用PHP5.3以上的PHP版本時,只要是涉及時間的會報一個Warning: date(): It is not safe to rely on the system\'s timezone settings.大體是
  • 在ie6 下對于div的浮動,當設置了margin後,div可能占有的寬度是div的寬度加上兩倍的margin值,解決此Bug只需要設置div的display屬性爲inline即可例1一個元素向左浮動(float:l ...
  • 利用到了tab選項卡方式,因爲zblog封裝的是jquery庫,所以很自然地就想到了idtabs.順便也找來了不少優秀的tab選項卡實例,在這裏與大家分享一下.當然,最終我沒有用到idtabs以及如下任何一個實例,我 ...
  • 初次使用Eclipse碰到的問題就不少了,下面我們再來看Problems opening an editor Reason: [Project Name] does not exist問題的一個解決辦法總結.問題簡單
  • make install 其實就是編譯安裝了,下面我來介紹在centos安裝calendar擴展模塊的命令方法,希望例子對你會有所幫助.今天同事說伺服器上的php缺calendar模塊,上去一查還真沒有,好吧,只能重
  • 怎麽調用ckeditor呢,下面小編來給大家總結一處利用php 調用ckeditor編輯器與js調用ckeditor的方法吧,其它腳本調用方法大致一樣了.PHP調用FCKeditor 將FCKeditor放在網站根目 ...
  • 在mysql中if case語句的用法非常的多可以用在普通的表達試中同時也可以使用在存儲過程中,下面我們來看一些關于if case用法例子.IF表達式IF(expr1,expr2,expr3)如果 expr1 是TR ...