css實現加載中的效果

那天閒着，學習了一下樣式效果，本身實現了一個簡單的加載中的效果 廢話很少說，開始吧！！

1、實現一個圓環

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

  

 

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

咱們只須要想辦法讓中間紅色區域變成弧狀就能夠啦，咱們設置div的border-radius爲50%，就變成這樣啦，看下圖

是否是一個圓形就出現啦，如今咱們讓中間的區域爲白色就會出現圓弧了，其實默認背景色就是白色，咱們也能夠不設置背景色，這邊爲了說明原理，咱們仍是本身設置

通常加載中的圓環都不是整個的，這裏咱們畫出一個半閉合的圓環

看懂了嗎？只須要設置border-top的顏色爲白色就能夠了，這樣咱們就解決了第一個問題了，下來就是讓圓環動起來了。

2、轉動的圓環

 這裏就要用到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