用CSS製作Facebook的Loading樣式
當網頁載入速度較慢時,通常會加上loading畫面,讓使用者不會因為看到空白或破掉的畫面而馬上離開,不過現在白底置中轉圈圈的loading樣式已經不流行了,很多網站開始使用像Facebook的載入畫面,預先顯示內容的介面,並且有光澤流動的動畫,今天就來做一個類似的簡單小練習。
首先先做出介面的樣式,這部分就不特別說明了, 再來就是幫區塊加上流動的動畫,在動之前,先做出靜態的光澤,主要是用到CSS的linear-gradient來達到漸層色的效果。
此時,畫面會出現亮色漸層光澤
linear-gradient 用法
background: linear-gradient (方向, 顏色1 位置, 顏色2 位置…);
舉例,當背景設定為
background: linear-gradient(to right, #0fb8ad 0%, #1fc8db 50%, #2cb5e8 100%);
回到剛剛做的介面,最後就是加上animation,改變漸層背景位置background-position,讓光澤能從左向右移動,就完成了!