CSS3載入動畫，css3載入

CSS3載入動畫，css3載入

 

圖1

 

通常我們都使用gif格式的圖片或者使用Ajax來實現諸如這類的動態載入條,但是現在CSS3也可以完成,並且靈活性更大.

選1個例子看看怎麼實現的吧:

 

：

  圖2

代碼：

 

使用1個名為'loading'的層裝所有載入內容，裡面需要有多少條目則添加這麼多個div，並且使用相同的class名稱'coloumns'， 再為每個動畫條添加各自延遲的CSS代碼

 

 

Html代碼  

1. <div id='loading'>  
2.   
3.                  <div id='coloumn1' class='coloumns'></div>  
4.   
5.                  <div id='coloumn2' class='coloumns'></div>  
6.   
7.                  <div id='coloumn3' class='coloumns'></div>  
8.   
9.                 <div id='coloumn4' class='coloumns'></div>  
10.   
11.                  <div id='coloumn5' class='coloumns'></div>  
12.   
13.                  <div id='coloumn6' class='coloumns'></div>  
14.   
15. </div>  

 

 

Html代碼  

1.     #loading{  
2.   
3.          margin-top:30px;  
4.   
5.          float:left;  
6.   
7.          width:95px;  
8.   
9.          height:32px;  
10.   
11.            
12.   
13.          margin-left:30px;  
14.   
15.          /* CSS3圓角邊框 */  
16.   
17.          -webkit-border-radius: 5px;  
18.   
19.          -moz-border-radius: 5px;  
20.   
21.          border-radius: 5px;  
22. }  
23.   
24. .coloumns{  
25.   
26.            
27.   
28.          border:1px solid #fff;  
29.   
30.          float:left;  
31.   
32.          height:30px;  
33.   
34.          margin-left:5px;  
35.   
36.          width:10px;  
37.   
38.          /* 在這兒我們定義一個動畫名，隨後我們將會實現它 */  
39.   
40.          -webkit-animation-name: animation;  
41.   
42.          /* 動畫迴圈一次的總時間 */  
43.   
44.          -webkit-animation-duration: 3s;  
45.   
46.          /* 動畫的迴圈次數，我們設定為無窮大 */  
47.   
48.          -webkit-animation-iteration-count: infinite;  
49.   
50.          -webkit-animation-direction: linear;  
51.   
52.          /* 最初所有列的透明度都為0 */  
53.   
54.          opacity:0;  
55.   
56.          /* 開始時將它縮放為0.8 */  
57.   
58.          -webkit-transform:scale(0.8);  
59.   
60.          }  
61.   
62. #coloumn1{  
63.   
64.          /* 第一列動畫延遲0.3秒 */  
65.   
66.          -webkit-animation-delay: .3s;  
67.   
68.  }  
69.   
70. #coloumn2{  
71.   
72.          /* 第二列動畫延遲0.4秒 */  
73.   
74.          -webkit-animation-delay: .4s;  
75.   
76. }  
77.   
78. #coloumn3{  
79.   
80.          /* 第三列動畫延遲0.5秒*/  
81.   
82.          -webkit-animation-delay: .5s;  
83.   
84. }  
85.   
86. #coloumn4{  
87.   
88.          /* 第四列動畫延遲0.6秒*/  
89.   
90.          -webkit-animation-delay: .6s;  
91.   
92.  }  
93.   
94. #coloumn5{  
95.   
96.          /* 第四列動畫延遲0.7秒*/  
97.   
98.          -webkit-animation-delay: .7s;  
99.   
100. }  
101.   
102. #coloumn6{  
103.   
104.          /* 第四列動畫延遲0.8秒*/  
105.   
106.          -webkit-animation-delay: .8s;  
107.   
108. }  
109.   
110. /* 之前我們曾經定義過動畫的名稱，我們在這兒設定動畫的屬性 */  
111.   
112. @-webkit-keyframes animation{  
113.   
114.          /* 在動畫開始時每一列的透明度都是0 */  
115.   
116.          0%{opacity:0;}  
117.   
118.          /* 在動畫中間時每一列的透明度都是1 */  
119.   
120.          50%{opacity:1;}  
121.   
122.          /*在動畫結束時每一列的透明度都還原到0 */  
123.   
124.          100%{opacity:0;}  
125.   
126. }  

現在很流行的網頁下拉載入動畫效果，是用什技術實現的？只用了js與css3？知道的人詳細回答

其實這樣的說起來簡單，要做出來還是有一些難度的，其實都是在圍繞著js來做的一系列事情，首先用js監聽網頁的滾動事件和視窗改變大小事件，從這兩個事件判斷網頁是否已經到了該載入新資料的時候，如果到了就應該用js去做載入效果，同時用ajax擷取遠端資料，等擷取遠端資料返回資料後，在用js展現返回的資料，同時吧載入的效果去掉，大概是這樣的

js==》事件 scroll resize
在scroll和resize中判斷網頁的位置
如果位置正好
js修改css ==》載入效果 同時 擷取資料（ajax）
等擷取資料成功（ajax返回資料） 用js展現資料 == 同時取消載入效果
基本流程如此
 
css3+html 怎實現載入顯示動畫,而不是點擊按鈕才可以實現效果?

載入頁面的時候自動載入一個js指令碼執行點擊按鈕的操作