css风车绕中心旋转_如何借助CSS3实现简单旋转风车效果？

传统Web设计开发过程中，动画效果主要借助flash动画制作工具实现动画的制作。随着JS技术尤其是JQuery技术的出现，Web开发人员可以借助JS或者JQuery技术实现各类Web动画的开发。除此之外在HTML5+CSS3技术下可直接借助CSS3技术实现简单动画的制作。本文以风车旋转效果实现为例，对CSS3动画制作进行简单分析与说明。首先给出最终实现效果，如下图所示：

屏幕录播转gif格式可能效果较差

---

CSS3编写旋转风车效果如上图所示，本例子主要涉及CSS3属性包括CSS3动画属性与CSS3 2D转换属性。其中2D属性转换主要用于实现对图片进行旋转操作，动画属性主要用于实现动画控制功能。所需属性分别描述如下：

1、CSS3 2D 转换

通过 CSS3 transform属性，我们能够对元素进行移动、缩放、转动、拉长或拉伸。我们例子中主要使用到元素的旋转方法rotate()，通过 rotate() 方法，元素顺时针旋转给定的角度。rotate方法参数为旋转度数，一般用deg表示，如30°为30deg。

2、CSS3 动画

动画主要是指指定元素从一个状态转移到另一个状态，CSS提供@keyframes 规则用于实现对状态的定义，通过@keyframes关键帧设置，最终可以实现动画效果。规则编写好之后需要使用animation属性，