css實現載入中的效果

標籤：

那天閑著，學習了一下樣式效果，自己實現了一個簡單的載入中的效果 廢話不多說，開始吧！！

一、實現一個圓環

   
   要實現圓環，首先我們需要知道盒模型裡面border的本質，先來看一個效果吧

  

 

 從上面，我們應該可以看到元素盒模型中 border 的本質：元素每個方向上的 border 是梯形而並非矩形。知道了這個，想實現弧狀的樣式就不是問題了

我們只需要想辦法讓中間紅色地區變成弧狀就可以啦，我們設定div的border-radius為50%，就變成這樣啦，看

是不是一個圓形就出現啦，現在我們讓中間的地區為白色就會出現圓弧了，其實預設背景色就是白色，我們也可以不設定背景色，這邊為了說明原理，我們還是自己設定

一般載入中的圓環都不是整個的，這裡我們畫出一個半閉合的圓環

看懂了嗎？只需要設定border-top的顏色為白色就可以了，這樣我們就解決了第一個問題了，下來就是讓圓環動起來了。

二、轉動的圓環

 這裡就要用到css裡面的動畫了，我們定義一個動畫，因為這裡只是示範，所以簡單的實現以下動畫，並且也沒有相容各大瀏覽器，自己可以根據情況寫全。

1  @keyframes loading{2    0%{3      transform: rotate(0deg);4      }5     100%{6      transform: rotate(360deg);7      }8  }

View Code

下來我們將動畫效果加入到樣式中，就實現效果了，demo如下 

  http://files.cnblogs.com/files/nini-huai/demo.gif

 

css實現載入中的效果