輯效率的有益效果。并且，本發(fā)明實(shí)施例在動(dòng)畫選擇界面中，用戶選擇CSS動(dòng)畫時(shí)，采用彈出窗口展示其當(dāng)前指定的動(dòng)畫的形式，取得了方便用戶快速選擇其需求的動(dòng)畫，不用每次到具體的tab頁面中才能知道選擇了哪種動(dòng)畫，提高動(dòng)畫選擇效率，進(jìn)一步提高網(wǎng)頁文檔的編輯效率的有益效果。
[0083]實(shí)施例一
[0084]參照?qǐng)D1，其示出了本發(fā)明一種動(dòng)畫展示的方法的流程示意圖，具體可以包括:
[0085]步驟110，加載待添加CSS動(dòng)畫的網(wǎng)頁文檔，獲得tab頁面；所述網(wǎng)頁文檔中指定的頁面元素包括動(dòng)畫添加類標(biāo)識(shí)；
[0086]在本發(fā)明實(shí)施例中，前述CSS動(dòng)畫是可以通過對(duì)目標(biāo)元素的CSS樣式的編寫，比如不同時(shí)刻，目標(biāo)元素在不同位置的不同形態(tài)的CSS樣式，那么瀏覽器在渲染時(shí)，可以逐步渲染目標(biāo)元素的樣式，從而得到一個(gè)動(dòng)畫。
[0087]比如CSS文件的代碼中，如下示例(I)為動(dòng)畫的目標(biāo)元素:
[0088]示例(I):
[0089]div{
[0090]width:1OOpx ;
[0091]height:1OOpx ;
[0092]background:red ;
[0093]posit1n!relative ;
[0094]animat1n:myfirst 5s ；
[0095]-webkit-animat1n:myfirst 5s ；
[0096]}
[0097]該目標(biāo)元素的名稱為myf irst，動(dòng)畫時(shí)長(zhǎng)為5秒，其初始寬為100像素，初始高為100像素，背景為100，位置為相對(duì)body絕對(duì)定位relative。
[0098]如示例⑵，該目標(biāo)元素的運(yùn)動(dòng)代碼為:
[0099]示例⑵:
[0100]@-webkit-keyframes myfirst
[0101]{
[0102]0% {background:red ；left:0px ；top:0px ；}
[0103]50% {background:blue ；left:200px ；top:200px ;}
[0104]100% {background:red ；left:0px ；top:0px ；}
[0105]}
[0106]其表示，從0時(shí)刻，位置為left:0px(距網(wǎng)頁左側(cè)的距離)，top:0px(距網(wǎng)頁頂部的距離)，background (背景)為red的目標(biāo)元素；
[0107]在總時(shí)間長(zhǎng)度的50%中，逐步移動(dòng)到left:200px，top: 200px位置，并且背景顏色逐漸變化到blue ;然后在剩余的50%時(shí)間中，從left:200px，top:200px位置逐步移動(dòng)到left:0px，top:0px?并且背景從blue逐漸變到redo
[0108]那么，在實(shí)際的實(shí)現(xiàn)過程中，假使網(wǎng)頁就一個(gè)div結(jié)構(gòu)，如示例(3)，其偽代碼如下:
[0109]示例(3):
[0110]<html>
[0111]〈body〉
[0112]<div>
[0113]〈style〉
[0114]div{
[0115]width:1OOpx ；
[0116]height:1OOpx ;
[0117]background: red ;
[0118]posit1n !relative ；
[0119]animat1n: myf irst 5s;
[0120]-webkit-animat1n:myfirst 5s ；
[0121]}
[0122]@-webkit-keyframes myfirst
[0123]{
[0124]0% {background:red ；left:0px ；top:0px ；}
[0125]50% {background:blue ；left:200px ；top:200px ;}
[0126]100% {background:red ；left:0px ；top:0px ；}
[0127]}
[0128]〈/style〉
[0129]</div>
[0130]〈/body〉
[0131]</html>
[0132]該CSS動(dòng)畫在tab頁面中的實(shí)現(xiàn)過程如圖1A、1B和1C。圖1A的瀏覽器101的tab標(biāo)簽下的tab頁面102中，展示了上述HTML文檔的CSS動(dòng)畫的執(zhí)行過程，該tab頁面打開之后，O秒時(shí)，目標(biāo)元素的width:1OOpx和height: 100px，在left:0px ；top:Opx位置，并且背景為red;然后目標(biāo)元素向逐步右下移動(dòng)，在5秒的50%時(shí)刻，移動(dòng)到圖1C，并且目標(biāo)元素的背景變?yōu)閎lue，其中圖1B是圖1A移動(dòng)到圖1C的中間一幀圖。然后從50%時(shí)刻開始，從圖1C向右上移動(dòng)，在100%時(shí)刻，目標(biāo)元素又到圖1A的位置，背景變?yōu)閞ed。其中圖1B是圖1C移動(dòng)到圖1A的中間一幀圖。
[0133]然而，在本發(fā)明實(shí)施例中，web網(wǎng)頁開發(fā)者可以在網(wǎng)頁文檔編輯器中先編輯網(wǎng)頁文檔，但是對(duì)于需要編輯CSS動(dòng)畫的頁面元素，可以預(yù)先在相應(yīng)的頁面元素位置添加動(dòng)畫添加類標(biāo)識(shí)，在相應(yīng)的頁面元素位置并不寫入具體的CSS代碼，比如前述目標(biāo)元素和相應(yīng)的運(yùn)動(dòng)代碼。那么本發(fā)明的瀏覽器可以獲取該不包括具體CSS動(dòng)畫的、但是需要添加CSS動(dòng)畫的html文檔，在瀏覽器的tab頁面中渲染展示。然后進(jìn)入步驟120。
[0134]其中，所述網(wǎng)頁文檔中指定的頁面元素包括動(dòng)畫添加類標(biāo)識(shí)，包括:
[0135]所述網(wǎng)頁文檔中的指定div標(biāo)簽中，包括動(dòng)畫添加類標(biāo)識(shí)。
[0136]即本發(fā)明對(duì)于將要添加CSS動(dòng)畫的頁面元素，在其div標(biāo)簽中添加動(dòng)畫添加類標(biāo)識(shí)。
[0137]以前述html代碼的例子為例，得到本發(fā)明實(shí)施例的待添加CSS動(dòng)畫的html代碼如示例⑷:
[0138]示例⑷:
[0139]<html>
[0140]〈body〉
[0141]〈div class =，，anim-title” >
[0142]</div>
[0143]〈/body〉
[0144]</html>
[0145]在本發(fā)明實(shí)施例中，動(dòng)畫添加類標(biāo)識(shí)為以“anim-”為頭部的類名，即在div標(biāo)簽中，其class屬性中，只要出現(xiàn)“anim-”，則識(shí)別其為可以添加CSS動(dòng)畫的頁面元素，“anim-”頭部之后的字符，本發(fā)明不對(duì)其加以限制。
[0146]當(dāng)然，在本發(fā)明實(shí)施例中，可以在多個(gè)指定的頁面元素中添加動(dòng)畫添加類標(biāo)識(shí)。即web網(wǎng)頁的開發(fā)者在編寫html文檔的時(shí)候，可以在各個(gè)需要添加CSS動(dòng)畫的頁面元素中設(shè)置“anim-”開頭的類名。
[0147]優(yōu)選的，所述網(wǎng)頁文檔中指定的頁面元素中還包括動(dòng)畫添加位置提示內(nèi)容；該動(dòng)畫添加位置提示內(nèi)容可以文本形式存在，或者以其他具體內(nèi)容的形式存在，那么在瀏覽器加載該待添加的CSS動(dòng)畫的html文檔之后，其渲染得到的tab頁面的相應(yīng)頁面元素位置會(huì)出現(xiàn)動(dòng)畫添加位置提示內(nèi)容，方便用戶操作。
[0148]以前述待添加的待添加CSS動(dòng)畫的html代碼如示例(5)::
[0149]示例(5):
[0150]<html>
[0151]〈body〉
[0152]〈div class =，，anim-title” >
[0153]此處添加動(dòng)畫
[0154]</div>
[0155]〈/body〉
[0156]</html>
[0157]其中，畫添加位置提示內(nèi)容為“此處添加動(dòng)畫”。該段代碼渲染后，在tab頁面中的展示如圖1D。
[0158]步驟120，在tab頁面中，對(duì)應(yīng)動(dòng)畫添加類標(biāo)識(shí)的頁面元素之上，根據(jù)用戶的觸發(fā)操作啟動(dòng)動(dòng)畫選擇窗口；
[0159]另外，在本發(fā)明實(shí)施例中，在瀏覽器中預(yù)置動(dòng)畫添加擴(kuò)展程序，該擴(kuò)展程序可以在瀏覽器內(nèi)核解析HTML文檔后，識(shí)別該動(dòng)畫添加類標(biāo)識(shí)，接收用戶在該動(dòng)畫添加類標(biāo)識(shí)所在的頁面元素之上的點(diǎn)擊操作，生成動(dòng)畫選擇窗口。該動(dòng)畫選擇窗口中，可通過預(yù)定接口連接到CSS動(dòng)畫庫中，然后用戶可在該動(dòng)畫選擇窗口中選擇CSS動(dòng)畫庫中的CSS動(dòng)畫。
[0160]當(dāng)然，在本發(fā)明實(shí)施例中，可預(yù)先設(shè)置一個(gè)CSS動(dòng)畫庫，如animat1n.CSS,該CSS動(dòng)畫庫中預(yù)置了各種CSS動(dòng)畫的CSS代碼，并且以CSS動(dòng)畫名稱與相應(yīng)CSS代碼對(duì)應(yīng)。所述動(dòng)畫選擇窗口，可獲取CSS動(dòng)畫庫中的CSS動(dòng)畫名稱，以下拉列表的形式展示給用戶，然后通過預(yù)定接口，將CSS動(dòng)畫名稱與animat1n.CSS中的相應(yīng)的CSS代碼對(duì)應(yīng)。
[0161]比如，用戶在圖1D的“此處添加動(dòng)畫”點(diǎn)擊，則會(huì)得到如圖1E的動(dòng)畫選擇窗口。其中，除105動(dòng)畫選擇接口指紋，其他的動(dòng)畫庫添加接口“添加”，動(dòng)畫刪除接口“刪除”，動(dòng)畫編輯接口 “編輯”，動(dòng)畫時(shí)長(zhǎng)輸入接口，動(dòng)畫延時(shí)輸入接口，動(dòng)畫循環(huán)次數(shù)輸入接口可以沒有，也可以有其中一個(gè)或者多個(gè)。
[0162]步驟130，當(dāng)在所述動(dòng)畫選擇窗口接收到用戶對(duì)一個(gè)CSS動(dòng)畫的指定操作后，在一個(gè)彈出窗口中展示所述CSS動(dòng)畫；
[0163]在本發(fā)明實(shí)施例中，為了方便開發(fā)者在將CSS動(dòng)畫添加到tab頁面之前，方便用戶知道其選擇的CSS代碼是哪一個(gè)，節(jié)省用戶查看的時(shí)間。如圖1F，動(dòng)畫選擇窗口 104中，在選擇接口 105中點(diǎn)擊了下拉按鈕，上述指定操作在下拉菜單中鼠標(biāo)滑動(dòng)至myfirst，停留預(yù)定時(shí)間，比如2s時(shí)，則彈出一個(gè)窗口 106，在106中展示對(duì)應(yīng)的myf irs的CSS動(dòng)畫。那么用戶在動(dòng)畫選擇接口中選擇動(dòng)畫時(shí)，可以確切的知道選擇的CSS動(dòng)畫是哪種類型，然后再放到tab網(wǎng)頁中渲染。
[0164]當(dāng)然，上述指定操作還可以為其他形式，本發(fā)明不對(duì)其加以限制。比如用戶點(diǎn)擊下拉框中的一個(gè)CSS動(dòng)畫名稱，但是沒有點(diǎn)擊確定，則可認(rèn)為是一個(gè)指定操作。
[0165]而當(dāng)用戶點(diǎn)擊確定之后，則表示該CSS動(dòng)畫將要在tab頁面中渲染展示。
[0166]在本發(fā)明實(shí)施例中，對(duì)于用戶指定的CSS動(dòng)畫的CSS代碼，將所述CSS代碼生成最簡(jiǎn)形式的html代碼，即加html頭部和div結(jié)構(gòu)標(biāo)簽，以及引用該CSS代碼的樣式標(biāo)簽，然后可以在彈出窗口中，調(diào)用瀏覽器引擎渲染展示。
[0167]優(yōu)選的，所述動(dòng)畫選擇窗口中還包括:
[0168]動(dòng)畫庫添加接口，用于向CSS動(dòng)畫庫中添加CSS代碼；
[0169]進(jìn)一步的，還包括:
[0170]子步驟131，當(dāng)在所述動(dòng)畫選擇窗口中接收到用戶對(duì)所述動(dòng)畫庫添加接口的觸發(fā)操作，則生成CSS代碼編輯界面；
[0171]子步驟132，在所述CSS代碼編輯界面中接收用戶編輯的CSS代碼，并根據(jù)用戶的操作將所述CSS代碼存入CSS動(dòng)畫庫。
[0172]在本發(fā)明實(shí)施例中，如圖1D，動(dòng)畫選擇窗口中包括了動(dòng)畫庫添加接口，當(dāng)用戶點(diǎn)擊該動(dòng)畫庫添加接口后，則生成一個(gè)CSS代碼編輯界面，用戶可以在該CSS代碼編輯界面中添加新的CSS動(dòng)畫的CSS代碼，然后點(diǎn)擊保存，可將新的CSS動(dòng)畫加入CSS動(dòng)畫庫中。
[0173]優(yōu)選的，所述動(dòng)畫選擇窗口中還包括:
[0174]動(dòng)畫刪除接口，用于刪除CSS動(dòng)畫庫中于CSS動(dòng)畫對(duì)應(yīng)的CSS代碼；
[0175]進(jìn)一步的，還包括:
[0176]子步驟133，當(dāng)在所述動(dòng)畫選擇窗口中接收到用戶對(duì)CSS動(dòng)畫的動(dòng)畫刪除接口的觸發(fā)操作，則將CSS動(dòng)畫庫中相應(yīng)的CSS代碼刪除。
[0177]在本發(fā)明實(shí)施例中，如圖1D，動(dòng)畫選擇窗口中包括了動(dòng)畫刪除接口，當(dāng)用戶選擇一個(gè)CSS動(dòng)畫后，點(diǎn)擊該動(dòng)畫刪除接口，則可將CSS動(dòng)畫庫中的相應(yīng)CSS代碼刪除。
[0178]優(yōu)選的，所述動(dòng)畫選擇窗口中還包括:
[0179]動(dòng)畫編輯接口，用于修改CSS動(dòng)畫庫中與CSS動(dòng)畫對(duì)應(yīng)的CSS代碼；
[0180]進(jìn)一步的，還包括:
[0181]子步驟134，當(dāng)在所述動(dòng)畫選擇窗口中接收到用戶對(duì)所述動(dòng)畫編輯接口的觸發(fā)操作，則生成CSS代碼編輯界面，并將所述CSS動(dòng)畫的CSS代碼加載至所述CSS代碼編輯界面中；
[0182]子步驟135，在所述CSS代碼編輯界面中接收用于對(duì)所述CSS代碼的修改，并根據(jù)用戶的操作將所述CSS代碼存入CSS動(dòng)畫庫。
[0183]在本發(fā)明實(shí)施例中，如圖1D，動(dòng)畫選擇窗口中包括了動(dòng)畫編輯接口，當(dāng)用戶選擇一個(gè)CSS動(dòng)畫之后，點(diǎn)擊該動(dòng)畫編輯接口，則生成一個(gè)CSS代碼編輯界面，并且將該CSS動(dòng)畫的CSS代碼加載到CSS代碼編輯界面，用戶可以在該CSS代碼編輯界面中對(duì)當(dāng)前展示的CSS代碼進(jìn)行修改。點(diǎn)擊保存，可將修改后的CSS動(dòng)畫保存到CSS動(dòng)畫庫中，替換原來的CSS代碼。
[0184]在本發(fā)明實(shí)施例中、動(dòng)畫選擇接口、動(dòng)畫刪除接口、動(dòng)畫編輯接口、動(dòng)畫庫添加接口可通過contentScript API函數(shù)實(shí)現(xiàn)。