整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
上個(gè)月，我們收集了不少來(lái)自國(guó)內(nèi)外的HTML5相關(guān)資源和jQuery插件，其中包括很多經(jīng)典帥酷的HTML5動(dòng)畫(huà)應(yīng)用，有些還利用了Canvas和SVG的相關(guān)特性，從而讓HTML5動(dòng)畫(huà)更加具有強(qiáng)烈的視覺(jué)效果。本文總結(jié)了上個(gè)月的最新HTML5動(dòng)畫(huà)應(yīng)用，希望大家會(huì)喜歡。
1、HTML5人物跑步動(dòng)畫(huà)
記得之前給大家分享過(guò)一款HTML5人物行走動(dòng)畫(huà)，效果非常震撼。今天要介紹的HTML5動(dòng)畫(huà)更加炫酷，是一款基于HTML5的人物跑步動(dòng)畫(huà)特效，在這款人物跑步動(dòng)畫(huà)中你可以點(diǎn)擊按鈕來(lái)切換人物手中拿的武器，效果非常逼真。
2、純CSS3實(shí)現(xiàn)眨眼動(dòng)畫(huà) 超逼真
我們?cè)诓痪们胺窒磉^(guò)很多純CSS3實(shí)現(xiàn)的人物和動(dòng)物動(dòng)畫(huà)，每一款動(dòng)畫(huà)的效果都非常不錯(cuò)。今天我們要分享一個(gè)純CSS3實(shí)現(xiàn)的眨眼動(dòng)畫(huà)，其動(dòng)畫(huà)效果超級(jí)逼真，拿它來(lái)做動(dòng)畫(huà)人物的眼睛非常適合，這款CSS3眨眼動(dòng)畫(huà)完全用CSS3繪制，并沒(méi)有使用圖片。
3、HTML5 3D立方體圖片切換動(dòng)畫(huà)
今天我們要來(lái)分享一款HTML5圖片切換動(dòng)畫(huà)，該HTML5動(dòng)畫(huà)主要是將圖片分成幾個(gè)塊，切換時(shí)每一個(gè)塊都會(huì)以3D立方體的形式過(guò)度下一張圖片，立方體的打散和聚合動(dòng)畫(huà)都非常酷，你可以在JS文件中配置圖片的路徑和切換的數(shù)量，相當(dāng)靈活。
4、CSS3簡(jiǎn)易清新的下拉菜單
對(duì)于CSS3菜單我們已經(jīng)在以前分享過(guò)很多了，有華麗的動(dòng)畫(huà)菜單，也有沖擊視覺(jué)的3D菜單，今天要介紹的是一款簡(jiǎn)易而實(shí)用的下拉菜單，綠色的主題風(fēng)格，讓菜單的外觀看上去非常清新，下拉菜單的顏色和主菜單的顏色搭配也非常不錯(cuò)。
5、HTML5/jQuery迷人音樂(lè)播放器jPlayer
今天我們要來(lái)分享一款非常精巧的jQuery音樂(lè)播放器插件jPlayer，這款jQuery音樂(lè)播放器的外觀非常迷人，可以自定義漂亮的播放器背景圖片，而且播放器需要的功能它都齊全，更完美的是，這款jQuery音樂(lè)播放器還支持分享至社交網(wǎng)站。
6、HTML5自定義背景圖片的文字特效
在HTML5和CSS3標(biāo)準(zhǔn)出來(lái)之前，文字的背景只能是純色，更不用說(shuō)是自定義背景圖片了。然而，強(qiáng)大的HTML5不僅讓文字背景支持漸變顏色，而且支持自定義的背景圖片，這些圖片就像遮罩層，讓文字的背景變得豐富多彩。
HTML4.0、XHTML到HTML5，從某種意義上講，這是HTML描述性標(biāo)記語(yǔ)言的一種更加規(guī)范的過(guò)程。因此，HTML5并沒(méi)有給開(kāi)發(fā)者帶來(lái)多大的沖擊。但HTML5增加了很多非常實(shí)用的新功能和新特性，下面具體介紹HTML5的一些優(yōu)勢(shì)。
1、 解決了跨瀏覽器問(wèn)題
在HTML5之前，各大瀏覽器廠(chǎng)商為了爭(zhēng)奪市場(chǎng)占有率，會(huì)在各自的瀏覽器中增加各種各樣的功能，并且不具有統(tǒng)一的標(biāo)準(zhǔn)。使用不同的瀏覽器，常常看到不同的頁(yè)面效果。在HTML5中，納入了所有合理的擴(kuò)展功能，具備良好的跨平臺(tái)性能。針對(duì)不支持新標(biāo)簽的老式IE瀏覽器，只需簡(jiǎn)單地添加JavaScript代碼就可以使用新的元素。推薦了解黑馬程序員web前端課程。
2、新增了多個(gè)新特性
HTML語(yǔ)言從1.0到5.0經(jīng)歷了巨大的變化，從單一的文本顯示功能到圖文并茂的多媒體顯示功能，許多特性經(jīng)過(guò)多年的完善，已經(jīng)發(fā)展成為一種非常重要的標(biāo)記語(yǔ)言。HTML5新增的特性如下。
● 新的特殊內(nèi)容元素，比如header、nav、section、article、footer。
● 新的表單控件，比如calendar、date、time、email、url、search。
● 用于繪畫(huà)的canvas元素。
● 用于媒介回放的video和audio元素。
● 對(duì)本地離線(xiàn)存儲(chǔ)的更好支持。
● 地理位置、拖曳、攝像頭等API。
HTML5標(biāo)準(zhǔn)的制定是以用戶(hù)優(yōu)先為原則的，一旦遇到無(wú)法解決的沖突時(shí)，規(guī)范會(huì)把用戶(hù)放在第一位。另外，為了增強(qiáng)HTML5的使用體驗(yàn)，還加強(qiáng)了以下兩方面的設(shè)計(jì)。
● 安全機(jī)制的設(shè)計(jì)
為確保HTML5的安全，在設(shè)計(jì)HTML5時(shí)做了很多針對(duì)安全的設(shè)計(jì)。HTML5引入了一種新的基于開(kāi)源的安全模型，該模型不僅易用，而且對(duì)不同的API(Application Programming Interface，應(yīng)用程序編程接口)都通用。使用這個(gè)安全模型，不需要借助于任何不安全的hack就能跨域進(jìn)行安全對(duì)話(huà)。
● 表現(xiàn)和內(nèi)容分離
表現(xiàn)和內(nèi)容分離是HTML5設(shè)計(jì)中的另一個(gè)重要內(nèi)容。實(shí)際上，表現(xiàn)和內(nèi)容的分離早在HTML4.0中就有設(shè)計(jì)，但是分離的并不徹底。為了避免可訪(fǎng)問(wèn)性差、代碼高復(fù)雜度、文件過(guò)大等問(wèn)題，HTML5規(guī)范中更細(xì)致、清晰地分離了表現(xiàn)和內(nèi)容。但是考慮到HTML5的兼容性問(wèn)題，一些陳舊的表現(xiàn)和內(nèi)容的代碼還是可以兼容使用的。
4. 化繁為簡(jiǎn)的優(yōu)勢(shì)
作為當(dāng)下流行的通用標(biāo)記語(yǔ)言，HTML5盡可能地簡(jiǎn)化，嚴(yán)格遵循了“簡(jiǎn)單至上”的原則，主要體現(xiàn)在這幾個(gè)方面：
● 新的簡(jiǎn)化的字符集聲明;
● 新的簡(jiǎn)化的DOCTYPE;
● 簡(jiǎn)單而強(qiáng)大的HTML5 API;
● 以瀏覽器原生能力替代復(fù)雜的JavaScript代碼。 為了實(shí)現(xiàn)這些簡(jiǎn)化操作，HTML5規(guī)范需要比以前更加細(xì)致、精確。為了避免造成誤解，HTML5對(duì)每一個(gè)細(xì)節(jié)都有著非常明確的規(guī)范說(shuō)明，不允許有任何的歧義和模糊出現(xiàn)。
喜歡記得關(guān)注一下哦。
TML5多媒體作品以其對(duì)各種平臺(tái)的兼容而見(jiàn)長(zhǎng)，目前已獲得了廣泛的應(yīng)用。如果我們需要制作自己的HTML5多媒體作品，一個(gè)方便之選就是利用現(xiàn)成的在線(xiàn)制作工具“百度H5”。
首先訪(fǎng)問(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)訪(fǎng)問(wèn)HTML5作品了（圖9）。
小提示：使用上述服務(wù)需要使用自己的百度賬號(hào)登錄。為維護(hù)網(wǎng)絡(luò)安全，目前發(fā)布信息需先經(jīng)過(guò)用戶(hù)實(shí)名制認(rèn)證方可進(jìn)行。
2. DIY 完全自己設(shè)計(jì)制作
套用模板適合于初學(xué)者或設(shè)計(jì)能力不強(qiáng)的用戶(hù)。其實(shí)，不用套用模板，完全可以從頭全部由自己來(lái)設(shè)計(jì)作品。
制作時(shí)，在主頁(yè)中選擇“我的H5”，然后點(diǎn)擊空白頁(yè)上印有圓圈套加號(hào)圖標(biāo)的按鈕，向?qū)?huì)詢(xún)問(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è)性化的作品。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
