淺析CSS3動畫在Web前端中的應用

閆 鵬

關鍵詞：CSS3動畫;網(wǎng)頁制作;應用

中圖分類號： TP3? ? ? 文獻標識碼：A

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

開放科學（資源服務）標識碼（OSID）：

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

3 動畫控制

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

4 應用實例

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

5 結束語

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

參考文獻：

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

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

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

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

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

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