整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML5多媒體作品以其對(duì)各種平臺(tái)的兼容而見(jiàn)長(zhǎng)，目前已獲得了廣泛的應(yīng)用。如果我們需要制作自己的HTML5多媒體作品，一個(gè)方便之選就是利用現(xiàn)成的在線制作工具“百度H5”。
首先訪問(wèn)“百度H5”網(wǎng)頁(yè)（https://h5.baidu.com/），可以看到非常簡(jiǎn)單的頁(yè)面，僅有“我的H5”和“我的模板”兩個(gè)選項(xiàng)。其中“我的模板”是通過(guò)套用模板的方式來(lái)制作HTML5作品，而“我的H5”則可以完全靠自定義各種參數(shù)來(lái)自由創(chuàng)作，制作好的作品也會(huì)顯示在這里（圖1）。
1. 通過(guò)創(chuàng)意模板輕松制作
在首頁(yè)中選擇“我的模板”，隨后會(huì)進(jìn)入一個(gè)模板展示頁(yè)面，這些都是設(shè)計(jì)者們分享的模板。根據(jù)你所要設(shè)計(jì)的作品的類(lèi)別，可以按類(lèi)選擇一個(gè)類(lèi)似的作品作為制作的模板，然后在此基礎(chǔ)上進(jìn)行修改，即可快速形成自己的多媒體作品（圖2）。
比如要制作一個(gè)招生方面的媒體作品，選擇如圖所示的秋季班招生模板，然后點(diǎn)擊右下角的“使用模板”按鈕（圖3）。
接下來(lái)先要為作品命名，例如“我們的幼兒園招生了”。輸入完畢點(diǎn)擊“確定”按鈕（圖4）。
隨后進(jìn)入實(shí)質(zhì)性的模板修改編輯階段。對(duì)于不合適的內(nèi)容，可先刪除頁(yè)面元素再添加。點(diǎn)擊“文本”菜單插入所需文本內(nèi)容。同理，可使用右邊的“媒體”按鈕插入圖片、音頻、視頻、嵌入視頻、全景圖等內(nèi)容。如果是PSD圖片，則直接用PSD菜單載入。若版面中需要插入一些圖標(biāo)或形狀，則點(diǎn)擊“圖形”菜單選擇添加（圖5）。
此外，對(duì)于作品中所要用到的展示數(shù)據(jù)，可以通過(guò)插入圖表、表單等方式，非常輕松地完成數(shù)據(jù)展示制作（圖6）。如果要實(shí)現(xiàn)更多的效果，可通過(guò)“插件”菜單，選擇添加頁(yè)面加載套件和加載進(jìn)度、添加計(jì)數(shù)器、添加幀動(dòng)畫(huà)、添加相冊(cè)或地圖等。
對(duì)于需要修改的屬性，可通過(guò)窗口右側(cè)的分類(lèi)屬性窗口選擇設(shè)置。通過(guò)窗口下方的編輯區(qū)域，可控制動(dòng)畫(huà)、加載頁(yè)、全局全景和背景、當(dāng)前頁(yè)等參數(shù)設(shè)置。例如，要定制個(gè)性化的加載頁(yè)面效果，點(diǎn)擊“加載頁(yè)”選項(xiàng)卡，然后通過(guò)下方的滑塊，對(duì)加載頁(yè)中的圖片和進(jìn)度進(jìn)行自定義編輯（圖7）。
對(duì)頁(yè)面上的各種元素進(jìn)行修改和編輯完成之后，點(diǎn)擊工具欄左上角的磁盤(pán)按鈕將作品保存在網(wǎng)上。注意，編輯過(guò)程中產(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í)要填寫(xiě)作品分享的標(biāo)題，設(shè)置個(gè)人域名。我們只需在“個(gè)性化域名”中填寫(xiě)自己命名的作品個(gè)性域名地址，發(fā)布后其他人就可以用這個(gè)域名來(lái)訪問(wèn)HTML5作品了（圖9）。
小提示：使用上述服務(wù)需要使用自己的百度賬號(hào)登錄。為維護(hù)網(wǎng)絡(luò)安全，目前發(fā)布信息需先經(jīng)過(guò)用戶實(shí)名制認(rèn)證方可進(jìn)行。
2. DIY 完全自己設(shè)計(jì)制作
套用模板適合于初學(xué)者或設(shè)計(jì)能力不強(qiáng)的用戶。其實(shí)，不用套用模板，完全可以從頭全部由自己來(lái)設(shè)計(jì)作品。
制作時(shí)，在主頁(yè)中選擇“我的H5”，然后點(diǎn)擊空白頁(yè)上印有圓圈套加號(hào)圖標(biāo)的按鈕，向?qū)?huì)詢問(wèn)創(chuàng)建什么樣的布局。從“分頁(yè)布局”或“整頁(yè)布局”中選擇一種布局方式。如果是分頁(yè)布局，則依靠頁(yè)面間的前后滑動(dòng)實(shí)現(xiàn)簡(jiǎn)單跳轉(zhuǎn)；如果是整頁(yè)布局，則將整個(gè)頁(yè)面分為不同區(qū)域，各部分還可創(chuàng)建鏈接，實(shí)現(xiàn)不同的功能（圖10）。
隨后其他步驟與第1部分的添加和設(shè)置操作方法相當(dāng)，只是全要親自設(shè)計(jì)，不能套用現(xiàn)成的組件而已。在創(chuàng)作過(guò)程中，只要善于使用系統(tǒng)提供的文本工具編排文字內(nèi)容，用媒體和圖形工具添加圖片、圖形、音視頻，數(shù)據(jù)相關(guān)的內(nèi)容使用圖表、表單等工具，借助于“插件”擴(kuò)展來(lái)補(bǔ)充完善，發(fā)揮自由想象的創(chuàng)作空間，一定能創(chuàng)作出更具個(gè)性化的作品。
T之家訊 隨著HTML5技術(shù)的廣泛運(yùn)用，Adobe Flash技術(shù)越來(lái)越不受人待見(jiàn)，目前谷歌旗下全球最大的視頻網(wǎng)站YouTube已經(jīng)成功完成了從Flash到HTML5的切換，現(xiàn)在又有一家流行的網(wǎng)絡(luò)服務(wù)公司要拋棄Flash了，它就是著名游戲直播平臺(tái)Twitch。
Twitch今日宣布將于2016年第二季度完成Flash到HTML5的轉(zhuǎn)換，全面采用H5技術(shù)，徹底拋棄Flash。該公司是在舊金山Moscone中心舉行的首屆社區(qū)大會(huì)上宣布的。
Twitch表示，HTML5技術(shù)有助于將其服務(wù)帶往更多平臺(tái)，不需要再操心第三方應(yīng)用的支持問(wèn)題。
前，圖片產(chǎn)業(yè)可能是一個(gè)快速成長(zhǎng)的行業(yè)。具有創(chuàng)造性的新網(wǎng)站如雨后春筍般，每天都會(huì)涌現(xiàn)出來(lái)，而 HTML 與 CSS 也存在于每一個(gè)控制指令中。
CSS 在電子結(jié)構(gòu)化內(nèi)容建設(shè)的道路上，還有很長(zhǎng)的路要走。它被用以管控文件布局的絕對(duì)精準(zhǔn)度，并以媒體類(lèi)型來(lái)進(jìn)行對(duì)比布局。當(dāng)今的網(wǎng)站提供給了用戶多種類(lèi)型的交互方式，而 CSS3 呈現(xiàn)的效果也被廣泛的應(yīng)用在其中。
搜尋免費(fèi)的代碼片段并不困難，但是需找遵循正確設(shè)計(jì)方向的設(shè)計(jì)視圖，卻很耗費(fèi)時(shí)間。今天分享的這份清單將有助于你提升知識(shí)，同時(shí)也能提升用戶訪問(wèn)網(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à)將會(huì)以最有效的方式助你實(shí)現(xiàn)目標(biāo)。
注：
由于頭條不支持站外鏈接跳轉(zhuǎn)，請(qǐng)手動(dòng)復(fù)制地址：http://t.cn/RtbmtMg 在瀏覽器打開(kāi)體驗(yàn)。
英文原文：Free HTML5 And CSS3 Loaders and Preloaders
譯者：IT程序獅
譯文源自：http://t.cn/RtbmtMg
原創(chuàng)翻譯，版權(quán)歸原作者所有，轉(zhuǎn)載請(qǐng)標(biāo)明出處，謝謝合作。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
