浅析CSS3动画在Web前端中的应用

闫 鹏

關键词：CSS3动画;网页制作;应用

中图分类号： TP3      文献标识码：A

文章编号：1009-3044（2019）17-0233-02

开放科学（资源服务）标识码（OSID）：

通常情况下我们以前在设计文字的时候只能简单的，设置字体、字号、颜色，但是今天CSS3增加了新的特性，CSS3中提供了@font-face规则[2]，以便可以增加网络字体，如图1所示;仅如此，对于文本也增加了text-shadow属性，用于文本阴影，为文字的美化起到了关键作用，如图2所示：

2 CSS3 2D与3D动画效果

CSS3的出现，为网页增添了不少动画元素，并且更加容易实现交互，在过去需要依赖于Flash和JavaScript，现在基本依靠CSS3就可以做到[3]。CSS中从一种样式逐渐变化到另一种样式就称为过渡（transition），利用transition属性再加上-webkit-私有前缀[4]，有了私有前缀-webkit-就可以在Android和IOS跨平台APP开发中使用，很容易就实现了相应的功能。例如：

3 动画控制

CSS3除了过渡（transition）、变换（transform）等特效，为了更好地进行动画控制还提供了很重要的动画控制属性animation，从而可以来控制更加复杂的动画效果，例如控制动画播放、暂停、次数等[5]。

4 应用实例

实例讲解，以下是一张半径为130px的圆形动物图片，会沿着顺时针方向，以每圈延迟时间为5s的速度一直匀速旋转，如图3所示：

5 结束语

通过以上对CSS3动画的基本介绍，可以看出CSS3在前端开发中的地位凸显，用简单的CCS3语句就可以替代Flash和JavaScript的部分动画功能，相信在未来的CSS技术更新中，会逐步取代Flash和JavaScript的相应功能。

参考文献：

[1] 夏魁良.HTML+CSS+JavaScript网页设计[M].清华大学出版社，2019.

[2] 李维旺. 基于网页重构的网络用户体验优化研究与实现[D].电子科技大学，2018.

[3] 陆郁.探析CSS技术在网页制作中的应用与代码优化[J].科技风，2019（01）：110.

[4] 李微.HTML5+CSS3在网页设计中的特性及优势[J].信息与电脑（理论版），2018（22）：13-15.

[5] 张静.CSS技术在网页设计中的应用研究[J].无线互联科技，2018，15（15）：141-142.

【通联编辑：张薇】