Amazon Ads

2014年1月14日 星期二

【筆記】使用CSS製作網頁載入動畫效果(CSS for loading)

有時為了讓使用者有更好的使用經驗,在網頁載入時,需要顯示些什麼,讓使用者知道現在在載入中,今天同事介紹了一個網站cssload.net,讓人輸入一些簡單的設定後,就可以不用gif等圖檔,只使用CSS做出網頁載入時,等待的效果,像這樣:


進入該網站後,就會有幾個簡單的設定:


第一步在「Select your loader」 選擇好我們要的載入時顯示的圖形樣版:


再來選擇好要的顏色、大小,和動畫的速度後,點按【GET CODE】,就會跳出一個小視窗,顯示相對應的html和CSS:


上列的程式碼中包含了<style>和<div>兩個部份,分別把需要的style和html複製後放在適當的地方,就可以顯示出所需要的效果。