純css3實現音頻音階波浪loading加載動畫效果，在主流瀏覽器上測試通過，包括Chrome、360安全/極速瀏覽器、Firefox、IE11等。以前用flash來作為loading加載動畫效果，但是現在的瀏覽器出于安全考慮，已經不再默認能自動加載運行flash文件了，因此用css3來實現同樣的效果，就能很好的避免這種情況的出現。

  運行效果如下：

CSS代碼如下：

.loader {  position: relative;  top: 25px;  bottom: 0px;  left: 10px;  right: 0px;  width: 175px;  height: 100px;}.loader span {  display: block;  background: #f1f1f1;  width: 7px;  height: 10px;  border-radius: 14px;  margin-right: 5px;  float: left;  margin-top: 25px;}.loader span:last-child {  margin-right: 0px;}.loader span:nth-child(1) {  animation: load 2.5s 1.4s infinite linear;}.loader span:nth-child(2) {  animation: load 2.5s 1.2s infinite linear;}.loader span:nth-child(3) {  animation: load 2.5s 1s infinite linear;}.loader span:nth-child(4) {  animation: load 2.5s 0.8s infinite linear;}.loader span:nth-child(5) {  animation: load 2.5s 0.6s infinite linear;}.loader span:nth-child(6) {  animation: load 2.5s 0.4s infinite linear;}.loader span:nth-child(7) {  animation: load 2.5s 0.2s infinite linear;}.loader span:nth-child(8) {  animation: load 2.5s 0s infinite linear;}.loader span:nth-child(9) {  animation: load 2.5s 0.2s infinite linear;}.loader span:nth-child(10) {  animation: load 2.5s 0.4s infinite linear;}.loader span:nth-child(11) {  animation: load 2.5s 0.6s infinite linear;}.loader span:nth-child(12) {  animation: load 2.5s 0.8s infinite linear;}.loader span:nth-child(13) {  animation: load 2.5s 1s infinite linear;}.loader span:nth-child(14) {  animation: load 2.5s 1.2s infinite linear;}.loader span:nth-child(15) {  animation: load 2.5s 1.4s infinite linear;}@keyframes load {  0% {    background: #ccc;    margin-top: 25%;    height: 10%;  }  50% {    background: #e1e1e1;    height: 100%;    margin-top: 0%;  }  100% {    background: #ccc;    height: 10%;    margin-top: 25%;  }}

css代碼解釋：

.loader {} 定義動畫的大小及相對位置，.loader span {} 定義動畫音階背景顏色；@keyframes load {} 這里面定義音階的顏色，修改background此屬性值即可。

html代碼代碼如下:

<div id="div_loading" style ="margin:5px 5px 5px 5px;width:200px;height:150px;background-color:#ccc;">  <div class="loader">    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>  </div> </div>

html代碼解釋：

id="div_loading" 這個div是加載動畫的位置，id名稱可以隨意更改；而class="loader" 這個div是展示動畫的容器，class="loader" 這個類名不能更改。

查看運行效果