整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
前端開(kāi)發(fā)來(lái)說(shuō)，通過(guò)動(dòng)畫(huà)來(lái)提升交互效果是很常見(jiàn)的。在很早以前，做web動(dòng)畫(huà)主要通過(guò)javascript或者jquery或者flash這樣的手段，非常麻煩，自打有了ccs3，做動(dòng)畫(huà)就太方便了，只需幾行css代碼就可以搞定。
這里我們就演示一個(gè)常見(jiàn)的循環(huán)滾動(dòng)效果，任務(wù)是這樣：先準(zhǔn)備一個(gè)圖片，平鋪到頁(yè)面上充滿整個(gè)屏幕，然后就讓畫(huà)面一直向上循環(huán)滾動(dòng)，形成無(wú)邊無(wú)際的感覺(jué)。
雖然可以從網(wǎng)上搜到一些類似的代碼，但是魚(yú)龍混雜，無(wú)關(guān)緊要的代碼非常多，不夠純粹。如果要弄明白動(dòng)畫(huà)的原理，只有自己動(dòng)手做一遍才能真正消化吃透。所以我們來(lái)一步步原創(chuàng)這個(gè)代碼，排除所有不必要的基礎(chǔ)樣式，只說(shuō)要點(diǎn)，3個(gè)步驟你就可以完全掌握其精髓！
第一步：布局
首先，滾動(dòng)的圖片需要放在一個(gè)容器里，一行html代碼即可完成：
第二步：把圖片放進(jìn)容器
css中body的邊界設(shè)為0，把容器設(shè)高度100%以充滿屏幕，再調(diào)用背景圖pic.png
第三部：讓畫(huà)面動(dòng)起來(lái)
咱不做標(biāo)題黨，循環(huán)滾動(dòng)靠的就是3行css動(dòng)起來(lái)的。
先是1行 -webkit-animation屬性：4個(gè)參數(shù)分別表示：動(dòng)畫(huà)名稱scroll，1秒時(shí)長(zhǎng)，移動(dòng)速度為線性的，無(wú)限循環(huán)。
然后是對(duì)應(yīng)的關(guān)鍵幀 @-webkit-keyframes 屬性，這是自己定義的動(dòng)畫(huà)規(guī)則，只需寫(xiě)2行規(guī)則即可：
原理：動(dòng)畫(huà)就是畫(huà)從一個(gè)地方動(dòng)到另一個(gè)地方。對(duì)普通滾動(dòng)效果來(lái)說(shuō)，有起點(diǎn)和終點(diǎn)這兩個(gè)節(jié)點(diǎn)的位置就夠了。所以我們用0%和100%分別表示起點(diǎn)和終點(diǎn)，指定2個(gè)背景圖的xy位置坐標(biāo)即可。圖片會(huì)在規(guī)定時(shí)間內(nèi)從起點(diǎn)移動(dòng)到終點(diǎn)，并循環(huán)下去，數(shù)值是負(fù)表示是向上移動(dòng)。320px正好是圖片的高度，這樣循環(huán)的時(shí)候是無(wú)縫銜接的。
好了，最終完整的代碼如下，是不是很精練呢？保存成 index.html 即可
代碼寫(xiě)完了，還要記得在當(dāng)前目錄要有pic.png這個(gè)圖片哦，我隨便畫(huà)了幾筆，絕無(wú)觀賞性，建議自己找個(gè)好看點(diǎn)的圖片來(lái)代替。
現(xiàn)在用瀏覽器打開(kāi)index.html即可看到效果，比較魔性的地方在于，如果你盯著看久了，關(guān)閉窗口以后會(huì)出現(xiàn)幻覺(jué)，仿佛整個(gè)顯示器都在向上飛，哈哈！
最后我們來(lái)說(shuō)說(shuō)瀏覽器兼容性問(wèn)題：
大家可能注意到了，前面那2個(gè)古怪的 -webkit-animation, @-webkit-keyframes 這里的-webkit-其實(shí)是一個(gè)前綴，animation和@keyframes才是CSS的標(biāo)準(zhǔn)屬性。
當(dāng)加上-webkit-后，就形成了一個(gè)針對(duì)特殊瀏覽器的專有屬性，表示用在谷歌的chrome和蘋(píng)果的safari瀏覽器上。此外還有-moz前綴代表針對(duì)firefox瀏覽器的私有屬性。
所以我們?cè)谟玫絚ss3的一些特性的時(shí)候，經(jīng)常使用一大堆的重復(fù)性的代碼，比如我們今天的這個(gè)代碼，有人會(huì)寫(xiě)成這個(gè)樣子：
一個(gè)簡(jiǎn)單的動(dòng)畫(huà)就要寫(xiě)這么多冗余的代碼，為的只是支持一些舊的瀏覽器，有必要嗎？為什么在這個(gè)例子中我們僅僅采用了-webkit-而沒(méi)有使用其它專有屬性呢？
因?yàn)楝F(xiàn)在已經(jīng)是2019年了！谷歌蘋(píng)果的瀏覽器是主流，占據(jù)了絕大部分，而其它小眾瀏覽器也大多能夠兼容他們，在版本上，大部分人安裝瀏覽器是直接下載新版本安裝使用，而非找出家里陳年的老軟盤(pán)、老光盤(pán)去安裝，家中的老電腦也早已升級(jí)不知多少回了，所以也幾乎沒(méi)有機(jī)會(huì)使用低版本的瀏覽器了！
至于微軟的IE，就更別提了，IE9以前不支持動(dòng)畫(huà)的，只能用js或者jquery來(lái)寫(xiě)動(dòng)畫(huà)，直到IE10才支持css動(dòng)畫(huà)，隨后IE被放棄，主推Edge，搞了幾天越來(lái)越頭大干脆也放棄，現(xiàn)在直接使用chrome內(nèi)核了，所以針對(duì)ie的兼容性除非有特殊要求已經(jīng)無(wú)需考慮。
你在網(wǎng)上能看到的范例代碼，如果有寫(xiě)成那么復(fù)雜臃腫的，估計(jì)也都是3-5年前發(fā)的老文，或者抄來(lái)抄去不做思考的搬磚工留下的“初學(xué)者”筆記。
我們不仿測(cè)試一下幾款主流瀏覽器的情況看看，結(jié)論：
測(cè)試結(jié)果表明，-webkit-的寫(xiě)法在4款不同內(nèi)核的瀏覽器上都能正常使用，所以我們的代碼因此能得以簡(jiǎn)化。
當(dāng)然，這個(gè)例子也有局限性，比如你看，只有蘋(píng)果safari不支持標(biāo)準(zhǔn)寫(xiě)法，萬(wàn)一將來(lái)他改邪歸正了呢？畢竟標(biāo)準(zhǔn)寫(xiě)法才是眾望所歸不是？使用針對(duì)個(gè)別瀏覽器的私有屬性寫(xiě)法，雖可用但畢竟有些怪怪的，將來(lái)怎么樣還很難說(shuō)呢。這樣看來(lái)，如果使用古老的處理辦法，重復(fù)N次為每個(gè)專屬瀏覽器各寫(xiě)一份代碼，除了辣眼睛也真沒(méi)什么錯(cuò)。
瀏覽器的兼容問(wèn)題涉及面實(shí)在是非常廣，三言兩語(yǔ)還真說(shuō)不完，以后會(huì)專門(mén)來(lái)講。
015-12-02 10:26:02 作者：馬榮
【中關(guān)村在線軟件資訊】12月2日消息：臭名昭著的Adobe Flash居然要改名了，Adobe今日宣布Flash Professional將在以后版本中更名為Adobe Animate CC。
Adobe Animate CC將加入對(duì)HTML5的支持，這應(yīng)該算是對(duì)趨勢(shì)的一種順應(yīng)。為此，Adobe將大部分Flash事業(yè)部員工轉(zhuǎn)移到新的部門(mén)來(lái)開(kāi)發(fā)HTML5，CSS3和SVG等。
在HTMML5逐漸普及之后，Adobe Flash Professional也加強(qiáng)了對(duì)HTML5的支持，幫助開(kāi)發(fā)人員創(chuàng)建更多網(wǎng)站、廣告和動(dòng)畫(huà)電影。不過(guò)Animate CC還將繼續(xù)支持Flash SWF文件。
Adobe Animate CC
目前已經(jīng)沒(méi)有人使用Flash來(lái)制作網(wǎng)站，只有網(wǎng)絡(luò)廣告還在對(duì)Flash提出需求，但是，自從推出HTML5之后，F(xiàn)lash音頻和視頻源數(shù)量也已經(jīng)顯著下降。
在業(yè)界越來(lái)越多的人排斥Flash，所以Adobe將其更名為Adobe Animate CC也是情理之中的，當(dāng)然也是轉(zhuǎn)變的開(kāi)始。這樣一來(lái)CC家族的成員又壯大了。
HTML是最流行的Web前端開(kāi)發(fā)技術(shù)之一，它是一種用于創(chuàng)建網(wǎng)頁(yè)和 Web 應(yīng)用程序的標(biāo)記語(yǔ)言。HTML與CSS和JavaScript結(jié)合使用以創(chuàng)建有吸引力且響應(yīng)迅速的前端網(wǎng)頁(yè)。
HTML 提供了幾個(gè)不同的元素，如 <head>、<body>、<p>、<img>、<a> 等，它們充當(dāng)網(wǎng)站的構(gòu)建塊，瀏覽器使用這些 HTML 元素來(lái)解釋和表示網(wǎng)頁(yè)上的內(nèi)容。
HTML 概述
HTML(超文本標(biāo)記語(yǔ)言)是Web瀏覽器理解并用于呈現(xiàn)網(wǎng)頁(yè)的語(yǔ)言。在不同元素的幫助下，HTML 決定了網(wǎng)頁(yè)的外觀和顯示內(nèi)容。超文本標(biāo)記語(yǔ)言 (HTML) 是一種用于創(chuàng)建獨(dú)立于平臺(tái)的超文本文檔的簡(jiǎn)單標(biāo)記語(yǔ)言。
HTML 文檔是具有通用語(yǔ)義的 SGML(標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言)文檔，可用于表示來(lái)自各種學(xué)科的數(shù)據(jù)。HTML 標(biāo)記可用于創(chuàng)建超文本郵件、文檔、新聞和超媒體;選項(xiàng)菜單;數(shù)據(jù)庫(kù)查詢結(jié)果;帶有內(nèi)嵌圖形的簡(jiǎn)單結(jié)構(gòu)化文檔;和現(xiàn)有數(shù)據(jù)集的超文本視圖。
HTML 語(yǔ)言的主要用途
輕松瀏覽互聯(lián)網(wǎng)
超文本允許你訪問(wèn) Internet 上的不同頁(yè)面，尤其是在你沒(méi)有記住所有 URL 的情況下。你只需單擊鏈接或在地址字段中輸入 URL 即可瀏覽互聯(lián)網(wǎng)。超文本對(duì)于引導(dǎo)用戶瀏覽你的網(wǎng)站并充當(dāng)網(wǎng)關(guān)至關(guān)重要，以便他們知道存在不同的頁(yè)面并可以在它們之間導(dǎo)航。如果不使用超文本，用戶很難檢測(cè)到網(wǎng)站上是否還有其他網(wǎng)頁(yè)。
尖端功能
HTML 支持 Polyfill 功能，它是一種允許你在 HTML 中本地使用不同技術(shù)的代碼。你可以使用此功能復(fù)制未來(lái)的API，同時(shí)為過(guò)時(shí)版本的瀏覽器提供回退功能;你可以自定義polyfill庫(kù)以滿足你的特定要求并執(zhí)行其他人從未做過(guò)的事情。HTML 的這些尖端特性是HTML有如此多用途的原因。
創(chuàng)建 Web 文檔
網(wǎng)頁(yè)只是一個(gè)Web文檔，你可以在其中編寫(xiě)你希望用戶看到的材料，然后將其包裝在指示機(jī)器如何格式化整個(gè)內(nèi)容的代碼中。這會(huì)告訴你的瀏覽器標(biāo)題、正文和元數(shù)據(jù)中的文本，它帶有標(biāo)簽，因此計(jì)算機(jī)知道如何處理你提供的信息。
數(shù)據(jù)輸入
你擁有執(zhí)行任何數(shù)據(jù)輸入任務(wù)所需的所有 API。作為開(kāi)發(fā)人員，你只需在相關(guān)字段中添加標(biāo)簽，例如文本和數(shù)據(jù)格式，你甚至可以提供屏幕鍵盤(pán)和驗(yàn)證，確保為用戶提供流暢和愉快的體驗(yàn)。
游戲開(kāi)發(fā)
游戲開(kāi)發(fā)是 HTML 的重要用途之一。盡管不再支持Flash，但HTML仍可用于創(chuàng)建基于瀏覽器的游戲。你使用的API不必完全實(shí)現(xiàn)，但可以使用最必要的組件，同時(shí)去掉了其余的功能，帶來(lái)了更輕松的體驗(yàn)。由于HTML5的進(jìn)步，HTML正迅速成為最流行的游戲編程語(yǔ)言之一。
離線存儲(chǔ)
如果你的一些用戶不在線怎么辦?在最新版本的HTML中找到的應(yīng)用程序緩存方法的幫助下，你仍然可以使你的應(yīng)用程序運(yùn)行。應(yīng)用程序緩存負(fù)責(zé)各種離線功能，包括各種組件，包括需要更新的API調(diào)用。通過(guò)清單文件，你可以控制瀏覽器對(duì)其離線使用的操作，甚至它使用的資源。
原生API使用
API代表“應(yīng)用程序編程接口”，這是兩個(gè)不同應(yīng)用程序相互通信的一種方式。通過(guò)使用API，HTML包括地理定位、事件管理、拖放和更多功能，HTML編程現(xiàn)在比以往任何時(shí)候都更強(qiáng)大。開(kāi)發(fā)人員還可以使用具有異步特性的現(xiàn)代在線應(yīng)用程序。
在客戶端存儲(chǔ)東西
IndexDB和Localstorage 使在客戶端存儲(chǔ)文件更簡(jiǎn)單、更高效，這些都有自己的一套強(qiáng)大的功能。
Localstorage支持setItem、getItem 和removeItem方法，以及基于字符串的哈希表存儲(chǔ)。IndexDB帶有更多的存儲(chǔ)空間，你可以在用戶許可的情況下增加。
方便使用的
與其他編程語(yǔ)言不同，HTML以用戶友好而聞名，即使對(duì)于初學(xué)者也是如此，所以，這也是HTML的主要用途之一。HTML中有語(yǔ)義組件來(lái)描述它們所具有的內(nèi)容類型，例如，頁(yè)眉、頁(yè)腳、主要、摘要和時(shí)間等HTML常用標(biāo)簽是自描述的。
可訪問(wèn)的富Internet應(yīng)用程序
HTML5語(yǔ)義標(biāo)簽的使用使網(wǎng)站搜索引擎和屏幕閱讀器友好，如果正確使用語(yǔ)義標(biāo)簽，視障人士可以使用屏幕閱讀器從網(wǎng)頁(yè)中獲取信息。
結(jié)論
在這篇博客中，我們講述了HTML的所有重要用途，它通常是Web開(kāi)發(fā)人員學(xué)習(xí)的第一語(yǔ)言，所以，如果你想學(xué)習(xí)Web編程并且害怕學(xué)習(xí)HTML的難度，你不必?fù)?dān)心，HTML非常容易學(xué)習(xí)。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
