2款不同樣式的CSS3 Loading加載動畫 附源碼

我們經常看到的Loading加載很多都是轉圈圈的那種，今天我們來換一種有創意的CSS3 Loading加載動畫，一種是聲波形狀的動畫，另一種是折線彎曲的動畫，它們實作起來也非常簡單，先來看看效果圖：

看起來還挺特别的吧。。

接下來我們來看看如何用CSS3來實作這2款特别的Loading動畫的。

首先是HTML代碼，構造了2個Loading容器：

這是第一個：

這是第二個：

接下來就是核心CSS3代碼，對于第一個，先是定義了7條豎線，然後對每條豎線應用名為scale的動畫：

對于第二個Loading動畫，也是定義了6條橫線，對3條應用名為rise的動畫，對另外3條應用名為fall的動畫，另外對Loading文字應用名為fade的動畫，進而達到波浪形的效果，具體CSS代碼如下：