1圖片準(zhǔn)備GIF靜態(tài)長(zhǎng)圖，保存至文件夾2工具使用Dreamweaver進(jìn)行操作五項(xiàng)目實(shí)現(xiàn)1創(chuàng)建div容器，加入class屬性2CSS設(shè)置定義div的寬高位置背景色加載圖片，設(shè)定寬高，實(shí)現(xiàn)動(dòng)畫(huà)效果使用CSS3 animation中的steps屬性，表示動(dòng)畫(huà)在45個(gè)關(guān)鍵幀之間切換，與45幀相匹配，動(dòng)畫(huà)時(shí)。

HTML中插入gif格式的圖片有幾種簡(jiǎn)單的方法可以實(shí)現(xiàn)1直接插入lt！DOCTYPE html PUBLIC quotW3CDTD XHTML 10 TransitionalENquot quotDTDxhtml1transitionaldtdquot lthtml xmlns=quot lthead ltmeta。

頁(yè)面加載之前是沒(méi)有任何事件的所謂加載之前的動(dòng)畫(huà)是形如以下的代碼 lthtml ltbody onload=quot第一個(gè)div隱藏，第二個(gè)div顯示quot ltdiv ltimg src=#39loadinggif#39 style=quotwidth 100%quot ltdiv ltdiv style=quotdiaplay quot lt！頁(yè)面內(nèi)容在這里加載 ltdiv ltbody lthtml。

loadingDivinnerHTML = quotltimg src=#39imagesgoodgif#39Submit finnished！quot else loadingDivinnerHTML = quotThere is something wrong with form submit！ quotfontcolorquotredquot + xml。

可以用html5實(shí)現(xiàn)，也可以做成gif的圖片，你只需要設(shè)置為和你程序設(shè)置一樣的時(shí)間然后進(jìn)度條自動(dòng)結(jié)束就好了用圖片是最好實(shí)現(xiàn)，用ps軟件就可以制作這個(gè)的實(shí)現(xiàn)，有很多中方法，簡(jiǎn)單的，是使用 DIV 嵌套，例如ltdiv style=quotwidth 100px height 10px border solid 1px #ccctextalign leftquot。

一image 作為背景圖片，即backgroundurlquotquot例如如下代碼塊ltdiv style=quotbackgroundurl#39loadinggif#39 norepeatwidth100pxheight50pxquot添加文字添加文字添加文字ltdiv 二將img塊與文字塊文字塊采用span標(biāo)簽顯示放在同一個(gè)div 中，然后設(shè)置他們之間的位置。