css3已經火的不行，我還很淡（dan）定(teng)地在啃着css2,表示很慚愧啊
周末抽點時間看了下loading效果的實現，開始看到css3有點頭大，感覺是不是向外面說的那樣每一次標准的發布都像是在學習一門新語言呢，稱有些惶恐。。。
說完廢話了....開始show代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>loading動畫實現</title> </head> <style type="text/css"> body{ text-align:center; } .container{ display: inline-block; } .point{ width:10px; height:10px; background:#2196F3; border-radius:50%; float:left; margin-left:5px; animation:myAnima 1.2s ease-in-out infinite; } .two{ animation-delay: 200ms; } .three{ animation-delay: 400ms; } @keyframes myAnima{ from {opacity: 0.8} to{opacity: 0} } </style> <body> <div class="container"> <div class="point one"></div> <div class="point two"></div> <div class="point three"></div> </div> </body> </html>
效果圖：
主要用到：css中的animation屬性
animation 屬性是一個簡寫屬性，用於設置六個動畫屬性：
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
實現思路：
首先，我們需要三個點，這里通過定義三個正方形，並設置他的圓角為50%，來實現的。
然后，定義一個動畫：myAnima(名字可以自定義，此處由於我太懶直接使用animation縮寫來命名的)，里面定義了透明度從1到0，來實現元素顯示和隱藏的效果。
最后，分別為第二、三個元素設置animation-delay(動畫延遲)，是他們延遲執行，以達到loading中流動的效果
END..