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 ...
一周排行
  • PHP如何讀取xml文件?有不少朋友不知道這個問題,其實php對于xml文檔是有專門的函數來操作了,下面我們就來舉幾個php讀取xml例子希望能給各位帶來幫助.一,什麽是xml,xml有什麽用途XML(Extensi ...
  • 來看看關于C# row_number實現數據庫分頁代碼吧.ROW_NUMBER生成以一個以表裏的某一個列爲排序[這裏的排序效果與select * from table order by id 這種效果一樣]的虛擬列(
  • PAM30是小編剛剛發現的搜索了一下發現一篇不錯的python PAM30 IE操作模塊例子,下面整理起來和各位朋友參考一下,希望文章能夠對各位有幫助.之前了解過有一個跨平台.跨語言的自動測試工具selenium ,
  • 首先要搞清楚機器的無線網卡類型,我的無線網卡 網件(Netgear)WNA1000M 150M迷你USB無線網卡.插入系統,自動識別到,可在 /var/log/messages 裏看到如下信息: 代碼如下 Mar 2 ...
  • OPPO R7手機SIM卡怎麽安裝Sim卡安裝詳解
    OPPO R7手機是一款可以快速充電的手機了,它的充電速度比普通手機要高,我們看到電視廣告 ...
  • linux下用shell腳本啓動可執行.jar文件並關閉的方法
    專案需求在linux系統下用shell腳本啓動並關閉可執行.jar文件,本文將實現這個需要 ...
  • 本文章收藏了一款超漂亮的jquery 音樂播放器效果插件哦,利用了jquery的音樂播放器插件做起線上音樂播放功能實在是方便了N多哦,下面來看看代碼吧.<!doctype html public '-//w3c ...
  • 本文章來簡單的總結一下FreeBSD Ports 方式安裝MySQL以及在利用ports安裝mysql時的一些注意事項有需要學習的朋友可參考參考.FreeBSD 版本是 7.3,MySQL 版本是 5.0.90,Ap ...
  • 本文章來給大家介紹關于IIS7中web.config給EMLOG設置僞靜態規則配置方法,希望對有需要了解的朋友有所幫助.今天看到論壇上有一位小盆友不會弄IIS7環境下的EMLOG僞靜態規則,于是騷包就分享給大家一下這
  • sql 2010數據庫怎麽導入到sql2005中
    數據庫導入一般是高版本向低版本兼容了,所以我們經常會碰到把備份好的數據庫從高版本放到低版本