TIFF

誤入媒體業的前端工程師

用CSS製作Facebook的Loading樣式

發布於
仿 Facebook 的 Loading 動畫

當網頁載入速度較慢時,通常會加上loading畫面,讓使用者不會因為看到空白或破掉的畫面而馬上離開,不過現在白底置中轉圈圈的loading樣式已經不流行了,很多網站開始使用像Facebook的載入畫面,預先顯示內容的介面,並且有光澤流動的動畫,今天就來做一個類似的簡單小練習。

首先先做出介面的樣式,這部分就不特別說明了, 再來就是幫區塊加上流動的動畫,在動之前,先做出靜態的光澤,主要是用到CSS的linear-gradient來達到漸層色的效果。

仿 Facebook 的 Loading 動畫(未加動畫)

此時,畫面會出現亮色漸層光澤

仿 Facebook 的 Loading 動畫(未加動畫)

linear-gradient 用法

background: linear-gradient (方向, 顏色1 位置, 顏色2 位置…);

舉例,當背景設定為

background: linear-gradient(to right, #0fb8ad 0%, #1fc8db 50%, #2cb5e8 100%);

回到剛剛做的介面,最後就是加上animation,改變漸層背景位置background-position,讓光澤能從左向右移動,就完成了!

仿 Facebook 的 Loading 動畫


喜歡我的文章嗎?
別忘了給點支持與讚賞,讓我知道創作的路上有你陪伴。

CC BY-NC-ND 2.0 版權聲明
2

看不過癮?

一鍵登入,即可加入全球最優質中文創作社區