小妹我之前在資策會修行時,一開始學了Html+CSS3,記得那時我的師父教我們寫CSS3動畫,而且是學超酷的3D動畫(沒錯!就是用CSS3寫立方體!),純真的我那時候以為網頁有動畫畫面不就是動態頁面嗎?
沒有與服務端請求資料的網頁,只能稱是靜態的頁面!
舉例說:形象網站、活動網站,這些通常需要大量的頁面效果吸引人注意,而不必與服務端請求資料做立即的回應
,簡單來說就是沒有向後端資料庫要資料!
這是國外素材網....吧!
影片中,我的滑鼠移動他圓環處的點點,背景上會有顏色上的變化等等....
他改變的,僅只於在他前端頁面上的處理而已,並沒有像後端請求資料!
有點抽象,但我們可以開啟chrome的〔檢視→開發人員選項→開發人員工具〕
來驗證是否只是前端的頁面在做變化,我錄一段影片解釋給大家聽。
(抱歉~MAC的螢幕有點小....)
可以看到影片中,我開啟了chrome的檢查
,並點選Elements
項目,這個項目可以讓你直接看到網頁吃到的
HTML架構與CSS3的樣式,頁面效果的變化也可以從此看起!
就像你看不到電壓訊號,要靠示波器看一樣!(好離題且更難懂的解釋XD....我讀工科的啦~)(為啥要說吃到的,明日會解釋!)
影片在[2:00]
處,我打開body並觀察HTML的樣式變化(就是CSS有無被改變),[2:15]
可看到我** 滑動頁面 **時,Elements視窗有紫色色塊出現提示標籤或者樣式出現變化
,但此處的變化指我只是畫面在做變化,我並沒有向後端資料庫要資料改變
!
會這樣說,一定要有證據的!我也一併錄了影片解釋XD
影片在[4:14]
處,我打開了Network
視窗來觀察他有無做請求
的動作~
** 答案在影片中揭曉,在我滑動頁面時,他沒有跑任何的請求動作! **
在畫面做變化的靜態頁面
而已!還是不懂嗎?或是還是很抽象,因為今天離發文時間還剩兩小時而已,所以有些東西與何謂動態頁面明日再來解釋吧!抱歉今天有點趕XD(被打.....
~~ 明天要早點寫網誌!!! ~~
〔PM10:26補充:我想偷偷介紹一下我師父AMOS
老師,他是前端界高手!如果有興趣可到csscoke看看師父的網站!他之前受邀iT邦舉辦的Modern Web 2016主講CSS3的應用喔!〕
同步連載於blogger-"King 學習前端之人生"
[ 著作權為 Ying-chi Tzeng所有,轉載請告知~]