閆 鵬

關(guān)鍵詞：CSS3動(dòng)畫;網(wǎng)頁(yè)制作;應(yīng)用

中圖分類號(hào)： TP3? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2019）17-0233-02

開放科學(xué)（資源服務(wù)）標(biāo)識(shí)碼（OSID）：

通常情況下我們以前在設(shè)計(jì)文字的時(shí)候只能簡(jiǎn)單的，設(shè)置字體、字號(hào)、顏色，但是今天CSS3增加了新的特性，CSS3中提供了@font-face規(guī)則[2]，以便可以增加網(wǎng)絡(luò)字體，如圖1所示;僅如此，對(duì)于文本也增加了text-shadow屬性，用于文本陰影，為文字的美化起到了關(guān)鍵作用，如圖2所示：

2 CSS3 2D與3D動(dòng)畫效果

CSS3的出現(xiàn)，為網(wǎng)頁(yè)增添了不少動(dòng)畫元素，并且更加容易實(shí)現(xiàn)交互，在過(guò)去需要依賴于Flash和JavaScript，現(xiàn)在基本依靠CSS3就可以做到[3]。CSS中從一種樣式逐漸變化到另一種樣式就稱為過(guò)渡（transition），利用transition屬性再加上-webkit-私有前綴[4]，有了私有前綴-webkit-就可以在Android和IOS跨平臺(tái)APP開發(fā)中使用，很容易就實(shí)現(xiàn)了相應(yīng)的功能。例如：

3 動(dòng)畫控制

CSS3除了過(guò)渡（transition）、變換（transform）等特效，為了更好地進(jìn)行動(dòng)畫控制還提供了很重要的動(dòng)畫控制屬性animation，從而可以來(lái)控制更加復(fù)雜的動(dòng)畫效果，例如控制動(dòng)畫播放、暫停、次數(shù)等[5]。

4 應(yīng)用實(shí)例

實(shí)例講解，以下是一張半徑為130px的圓形動(dòng)物圖片，會(huì)沿著順時(shí)針方向，以每圈延遲時(shí)間為5s的速度一直勻速旋轉(zhuǎn)，如圖3所示：

5 結(jié)束語(yǔ)

通過(guò)以上對(duì)CSS3動(dòng)畫的基本介紹，可以看出CSS3在前端開發(fā)中的地位凸顯，用簡(jiǎn)單的CCS3語(yǔ)句就可以替代Flash和JavaScript的部分動(dòng)畫功能，相信在未來(lái)的CSS技術(shù)更新中，會(huì)逐步取代Flash和JavaScript的相應(yīng)功能。

參考文獻(xiàn)：

[1] 夏魁良.HTML+CSS+JavaScript網(wǎng)頁(yè)設(shè)計(jì)[M].清華大學(xué)出版社，2019.

[2] 李維旺. 基于網(wǎng)頁(yè)重構(gòu)的網(wǎng)絡(luò)用戶體驗(yàn)優(yōu)化研究與實(shí)現(xiàn)[D].電子科技大學(xué)，2018.

[3] 陸郁.探析CSS技術(shù)在網(wǎng)頁(yè)制作中的應(yīng)用與代碼優(yōu)化[J].科技風(fēng)，2019（01）：110.

[4] 李微.HTML5+CSS3在網(wǎng)頁(yè)設(shè)計(jì)中的特性及優(yōu)勢(shì)[J].信息與電腦（理論版），2018（22）：13-15.

[5] 張靜.CSS技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用研究[J].無(wú)線互聯(lián)科技，2018，15（15）：141-142.

【通聯(lián)編輯：張薇】