TML5多媒體作品以其對(duì)各種平臺(tái)的兼容而見長，目前已獲得了廣泛的應(yīng)用。如果我們需要制作自己的HTML5多媒體作品，一個(gè)方便之選就是利用現(xiàn)成的在線制作工具“百度H5”。

首先訪問“百度H5”網(wǎng)頁（https://h5.baidu.com/），可以看到非常簡單的頁面，僅有“我的H5”和“我的模板”兩個(gè)選項(xiàng)。其中“我的模板”是通過套用模板的方式來制作HTML5作品，而“我的H5”則可以完全靠自定義各種參數(shù)來自由創(chuàng)作，制作好的作品也會(huì)顯示在這里（圖1）。

1. 通過創(chuàng)意模板輕松制作

在首頁中選擇“我的模板”，隨后會(huì)進(jìn)入一個(gè)模板展示頁面，這些都是設(shè)計(jì)者們分享的模板。根據(jù)你所要設(shè)計(jì)的作品的類別，可以按類選擇一個(gè)類似的作品作為制作的模板，然后在此基礎(chǔ)上進(jìn)行修改，即可快速形成自己的多媒體作品（圖2）。

比如要制作一個(gè)招生方面的媒體作品，選擇如圖所示的秋季班招生模板，然后點(diǎn)擊右下角的“使用模板”按鈕（圖3）。

接下來先要為作品命名，例如“我們的幼兒園招生了”。輸入完畢點(diǎn)擊“確定”按鈕（圖4）。

隨后進(jìn)入實(shí)質(zhì)性的模板修改編輯階段。對(duì)于不合適的內(nèi)容，可先刪除頁面元素再添加。點(diǎn)擊“文本”菜單插入所需文本內(nèi)容。同理，可使用右邊的“媒體”按鈕插入圖片、音頻、視頻、嵌入視頻、全景圖等內(nèi)容。如果是PSD圖片，則直接用PSD菜單載入。若版面中需要插入一些圖標(biāo)或形狀，則點(diǎn)擊“圖形”菜單選擇添加（圖5）。

此外，對(duì)于作品中所要用到的展示數(shù)據(jù)，可以通過插入圖表、表單等方式，非常輕松地完成數(shù)據(jù)展示制作（圖6）。如果要實(shí)現(xiàn)更多的效果，可通過“插件”菜單，選擇添加頁面加載套件和加載進(jìn)度、添加計(jì)數(shù)器、添加幀動(dòng)畫、添加相冊(cè)或地圖等。

對(duì)于需要修改的屬性，可通過窗口右側(cè)的分類屬性窗口選擇設(shè)置。通過窗口下方的編輯區(qū)域，可控制動(dòng)畫、加載頁、全局全景和背景、當(dāng)前頁等參數(shù)設(shè)置。例如，要定制個(gè)性化的加載頁面效果，點(diǎn)擊“加載頁”選項(xiàng)卡，然后通過下方的滑塊，對(duì)加載頁中的圖片和進(jìn)度進(jìn)行自定義編輯（圖7）。

對(duì)頁面上的各種元素進(jìn)行修改和編輯完成之后，點(diǎn)擊工具欄左上角的磁盤按鈕將作品保存在網(wǎng)上。注意，編輯過程中產(chǎn)生的內(nèi)容軟件會(huì)自動(dòng)保存，但為了防止丟失，還是要養(yǎng)成勤于手動(dòng)保存的習(xí)慣。

最后，就可以發(fā)布作品了。點(diǎn)擊工具欄上的“發(fā)布”按鈕執(zhí)行發(fā)布操作（圖8）。

由于作品是保存在網(wǎng)絡(luò)服務(wù)器中的，因此作品的共享是以網(wǎng)址的形式體現(xiàn)的。發(fā)布時(shí)要填寫作品分享的標(biāo)題，設(shè)置個(gè)人域名。我們只需在“個(gè)性化域名”中填寫自己命名的作品個(gè)性域名地址，發(fā)布后其他人就可以用這個(gè)域名來訪問HTML5作品了（圖9）。

小提示：使用上述服務(wù)需要使用自己的百度賬號(hào)登錄。為維護(hù)網(wǎng)絡(luò)安全，目前發(fā)布信息需先經(jīng)過用戶實(shí)名制認(rèn)證方可進(jìn)行。

2. DIY 完全自己設(shè)計(jì)制作

套用模板適合于初學(xué)者或設(shè)計(jì)能力不強(qiáng)的用戶。其實(shí)，不用套用模板，完全可以從頭全部由自己來設(shè)計(jì)作品。

制作時(shí)，在主頁中選擇“我的H5”，然后點(diǎn)擊空白頁上印有圓圈套加號(hào)圖標(biāo)的按鈕，向?qū)?huì)詢問創(chuàng)建什么樣的布局。從“分頁布局”或“整頁布局”中選擇一種布局方式。如果是分頁布局，則依靠頁面間的前后滑動(dòng)實(shí)現(xiàn)簡單跳轉(zhuǎn)；如果是整頁布局，則將整個(gè)頁面分為不同區(qū)域，各部分還可創(chuàng)建鏈接，實(shí)現(xiàn)不同的功能（圖10）。

隨后其他步驟與第1部分的添加和設(shè)置操作方法相當(dāng)，只是全要親自設(shè)計(jì)，不能套用現(xiàn)成的組件而已。在創(chuàng)作過程中，只要善于使用系統(tǒng)提供的文本工具編排文字內(nèi)容，用媒體和圖形工具添加圖片、圖形、音視頻，數(shù)據(jù)相關(guān)的內(nèi)容使用圖表、表單等工具，借助于“插件”擴(kuò)展來補(bǔ)充完善，發(fā)揮自由想象的創(chuàng)作空間，一定能創(chuàng)作出更具個(gè)性化的作品。

前，圖片產(chǎn)業(yè)可能是一個(gè)快速成長的行業(yè)。具有創(chuàng)造性的新網(wǎng)站如雨后春筍般，每天都會(huì)涌現(xiàn)出來，而 HTML 與 CSS 也存在于每一個(gè)控制指令中。

CSS 在電子結(jié)構(gòu)化內(nèi)容建設(shè)的道路上，還有很長的路要走。它被用以管控文件布局的絕對(duì)精準(zhǔn)度，并以媒體類型來進(jìn)行對(duì)比布局。當(dāng)今的網(wǎng)站提供給了用戶多種類型的交互方式，而 CSS3 呈現(xiàn)的效果也被廣泛的應(yīng)用在其中。

搜尋免費(fèi)的代碼片段并不困難，但是需找遵循正確設(shè)計(jì)方向的設(shè)計(jì)視圖，卻很耗費(fèi)時(shí)間。今天分享的這份清單將有助于你提升知識(shí)，同時(shí)也能提升用戶訪問網(wǎng)站的體驗(yàn)度。

===============================

1.Modern Google Loader

2.CSS Rainbow Loader

3.Single element Slack loader

4.CSS Cog loader

5.VSCO – CSS loader

6.Cube CSS Loader

7.Pure CSS3 loader

8.CSS Loader

9.CSS3 Loaders

10.CSS loaders kit

11.Tumblr-style cog loaders

12.Logo Loader

13.CSS Water filling Loader

14.CSS loader

15.CSS Weather Loader

16.Chrome Cast CSS Loader

17.Simple Loader

18.Random Loader

19.CSS loader

20.Android 4.4 Kitkat loader

21.CSS creative loading

22.Simple CSS loader

23.CSS Loading Animation

24.Loaders collection by Loaders.css

25.Animated CSS3 Loading Bar

26.CSS Loading animation

27.Pushing pixels CSS loader

28.Page Loading Effects

29.CSS Loader

30.2D and 3D Block Loaders

31.CSS loading text animation

32.Single element CSS spinners

33.Pace.js – Page Load Progress Bars

34.SpinKit – CSS loaders

35.Loading SVG loaders

36.12 free SVG loaders

37.Material Design preloader

結(jié)論

如果你擁有自己的網(wǎng)站或博客，并希望找到一些好看的加載和預(yù)載設(shè)計(jì)的話，那么上面提到的免費(fèi) HTML5，CSS3 預(yù)載動(dòng)畫將會(huì)以最有效的方式助你實(shí)現(xiàn)目標(biāo)。

注：

• 由于頭條不支持站外鏈接跳轉(zhuǎn)，請(qǐng)手動(dòng)復(fù)制地址：http://t.cn/RtbmtMg 在瀏覽器打開體驗(yàn)。

英文原文：Free HTML5 And CSS3 Loaders and Preloaders

譯者：IT程序獅

譯文源自：http://t.cn/RtbmtMg

原創(chuàng)翻譯，版權(quán)歸原作者所有，轉(zhuǎn)載請(qǐng)標(biāo)明出處，謝謝合作。