淺析CSS3動畫在Web前端中的應(yīng)用

閆 鵬

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

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

文章編號：1009-3044（2019）17-0233-02

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

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

2 CSS3 2D與3D動畫效果

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

3 動畫控制

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

4 應(yīng)用實例

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

5 結(jié)束語

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

參考文獻(xiàn)：

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

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

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

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

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

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