網頁設計, 網頁資源

CodePen 如何快速搜尋所需的網頁特效並下載打包成ZIP檔

梅干2017/09/06
梅問題-CodePen如何搜尋所需素材並打包下載ZIP檔
  身為網頁設計人員,對於CodePen這平台應該不陌生,在CodePen平台中,有許多熱心的網友,將各式各樣的網頁特效,放到CodePen這平台中,同時CodePen除了能完整的顯示網頁原始碼外,甚至還能即時的預覽結果畫面,以及將網頁的特效範例,以iframe的方式,嵌入到自己的網頁中,由於CodePen這平台中,有成千上萬各式酷炫的網頁特效範例,因此每當梅干卡關時,就會到CodePen中來挖寶。
  在CodePen這平台中,支援的語法相當多,因此當找到的範例,是用SCSS或是Jade時,就得再進行編譯後才能使用,甚至有些範例,引用到外部的Javascript時,就得一一的將引用的資源給下載回來,其實CodePen中,除了提供搜尋的功能外,還有封裝的功能,可將找到的範例直接壓縮成ZIP檔,因此不知道的朋友,現在也一塊來看看,如何善用CodePen這個資源庫吧!
Step1
當進到CodePen的平台後,點右上的搜尋圖示。
梅問題-CodePen如何搜尋所需素材並打包下載ZIP檔
Step2
再輸入要查尋的關鍵字。
梅問題-CodePen如何搜尋所需素材並打包下載ZIP檔
Step3
接著就會列出,相符的範例縮圖。
梅問題-CodePen如何搜尋所需素材並打包下載ZIP檔
Step4
點一下,進入後,上方分別會有HTML、CSS、Javascript,而下方就會即時的顯示結果畫面,因此當要把這範例整個打包下來時,按一下右下的「Export」鈕。
梅問題-CodePen如何搜尋所需素材並打包下載ZIP檔
Step5
再選擇「Export.zip」選項。
梅問題-CodePen如何搜尋所需素材並打包下載ZIP檔
Step6
接著將下載回來的檔案解壓縮,分別就會看到所有範例的原始檔。
梅問題-CodePen如何搜尋所需素材並打包下載ZIP檔
Step7
當雙響index.html檔,就可看到剛在CodePen中的範例啦!是不是超方便的呀!因此下回當在CodePen找到喜愛的範例時,不妨可試試此方法,將範例給打包給下載回來囉!
梅問題-CodePen如何搜尋所需素材並打包下載ZIP檔
UAG軍規iPhone防摔殼